@extends('dashboard/layout.app')
@section('title', 'BettrAi | Reports')
@section('content')
<link href="{{ URL::to('assets/css/reports_styles.css') }}?v={{ rand(1000000,9999999) }}" rel="stylesheet" type="text/css" /> 
<style type="text/css">
	.margindiv{
		margin-bottom: 30px;
    	margin-left: 0px;
	}
    #divLoadingInPopup.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;
	}
</style>
<link rel="stylesheet" type="text/css" href="{{ URL::to('assets/emails/css/webix_style.css') }}">
<link rel="stylesheet" href="{{ URL::to('assets/emails/css/materialdesignicons.css') }}" type="text/css" charset="utf-8">
<link href="{{ URL::to('assets/emails/css/main_app.css') }}" rel="stylesheet">
<script type="text/javascript" src="{{ URL::to('assets/emails/js/vendor.js') }}"></script>
<script type="text/javascript" src="{{ URL::to('assets/emails/js/app.js') }}"></script>
<script src="https://cdn.ckeditor.com/ckeditor5/39.0.1/classic/ckeditor.js"></script>
<script src="{{ asset('assets/emails/js/webix.js') }}"></script>
<div class="d-flex flex-column-fluid mt-1">
	<div class="container">
        <div class="webix_view webix_layout_line" view_id="$layout1" style="width: 100%; height: 900;">
            <div class="webix_view webix_layout_clean" style="white-space: nowrap; width: 100%; height: 850px;" view_id="$layout3">
                <div class="webix_view webix_scrollview leftSidebar" style="overflow: scroll; display: inline-block; vertical-align: top; width: 20%; height: 850px; background:white;" view_id="$scrollview1">
                    <div class="webix_scroll_cont">
                        <div class="webix_view webix_layout_line" view_id="$layout4" style="background:#fff;">
                            <div class="webix_view webix_control webix_el_button webix_primary" view_id="$button1" style="margin-top: 10px; width: 100%; height: 38px; text-align: center;">
                                <div class="webix_el_box"><button type="button" id="compose_mail" class="btn btn-primary" style="width:100%"><i class="fa fa-plus" style="color:white;"></i> Compose</button></div>
                            </div>

                            <div class="webix_view webix_tree webix_sidebar" style="margin-top: 10px; width: 100%; height: auto;" role="tree" view_id="$sidebar1">
                                <div class="webix_scroll_cont">
                                    <div role="presentation" class="webix_tree_leaves">
                                        <div role="presentation" class="webix_tree_branch_1">
                                            <div webix_tm_id="1" class="webix_tree_item inbox_button webix_selected" role="treeitem" tabindex="0" aria-level="1">
                                                <div class="flex spaceBetween alignCenter"><span><i class="fa fa-inbox"></i> Inbox</span><span class="sidebarBadge" id="inbox_badge">0</span></div>
                                            </div>
                                            <div webix_tm_id="2" class="webix_tree_item" role="treeitem"><span class=""><i class="fa fa-pen"></i> Drafts</span></div>
                                            <div webix_tm_id="3" class="webix_tree_item" role="treeitem"><span class=""><i class="fa fa-envelope"></i> Sent</span></div>
                                            <div webix_tm_id="4" class="webix_tree_item" role="treeitem"><span class=""><i class="fas fa-exclamation-triangle"></i> Spam</span></div>
                                            <div webix_tm_id="5" class="webix_tree_item" role="treeitem"><span class=""><i class="fa fa-trash"></i> Deleted</span></div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="webix_view webix_tree" style="margin-top: 10px; width: 100%; height: auto;">
                                <div class="webix_scroll_cont">
                                    <div id="folders_container">
                                        @if(!empty($folders))
                                            {!! $folders['text'] !!}
                                        @endif
                                    </div>
                                </div>
                            </div>

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

                <div class="webix_view webix_layout_line inbox_content" style="display: inline-block; vertical-align: top; width: 80%; height: 850px; background:white;" view_id="$layout7">
                    <div class="col-12 row">
                        <div class="col-3">
                            <input type="checkbox" id="inbox_select_all" name="inbox_select_all" class="inbox_select_all" value="1" style=" margin-bottom: 10px;margin-top: 10px; cursor:pointer;"> <b>Select All / Unselect All </b>
                        </div> 
                        <div class="col-7" id="actions_div" style="display:none;">
                            <i class="fa fa-envelope-open mark_as_read" title="Mark As Read" style="color: #838383; margin-top: 10px;padding-right: 10px;cursor:pointer;"></i>
                            <i class="fa fa-inbox move_to_folder" title="Move to Folder" style="color: #838383; margin-top: 10px;padding-right: 10px;cursor:pointer;"></i>
                        </div>
                        <div class="col-2 pt-3">
                            <i class="fa fa-address-book"></i>
                        </div>
                    </div>

                    <div class="webix_view webix_layout_line" view_id="$layout8" style="display: inline-block; vertical-align: top; width:30%; overflow-y: scroll; height: 850px;">
                        <div class="webix_view webix_toolbar inboxBg" style="border-width: 1px 1px 1px 0px; height: 56px;" role="toolbar" view_id="$toolbar2">
                            <div class="webix_scroll_cont">
                                <div class="webix_inp_static" style="line-height:44px;width:100%;text-align:left; background:white;">Recent
                                    <i class="fa fa-angle-down" style="padding-left: 10px; padding-top: 10px;"></i>
                                </div>
                            </div>
                        </div>

                        <div class="webix_view webix_list webix_custom_scroll inboxBg" style="overflow-y: scroll; width: 100%; height: 100%; position: relative;" role="listbox" view_id="$list1">
                            <div class="webix_scroll_cont">

                                {{-- DYNAMIC MESSAGE LIST --}}
                                @if(!empty($messages) && count($messages) > 0)
                                    @foreach($messages as $msg)
                                    <div class="webix_list_item inboxItem openMail" data-id="{{ $msg->id }}" style="width:auto; height:112px; overflow:hidden; background:white;" role="option">
                                        <div class="inboxWrapp flex {{ ($msg->message_flag == 0) ? 'unread' : '' }}">
                                            <input type="checkbox" name="inbox_select[]" class="inbox_select" value="{{ $msg->id }}" style=" margin-bottom: 60px;margin-right: 20px;"> 
                                            <div class="inboxLeft">
                                                <div class="inboxImg">
                                                    <img src="{{ URL::to('assets/media/users/default.jpg') }}">
                                                    <div class="inboxState {{ ($msg->message_flag == 0) ? 'online' : 'offline' }}"></div>
                                                </div>
                                            </div>

                                            <div class="flex flexColumn wide">
                                                <div class="flex spaceBetween wide">
                                                    <span class="inboxUser">{{ $msg->fname }} {{ $msg->lname }}</span>
                                                    <span class="smTextLight"><span>------</span></span>
                                                </div>

                                                <div class="inboxSubject">{{ \Illuminate\Support\Str::limit($msg->title, 80) }}</div>

                                                <div class="flex spaceBetween alignCenter wide">
                                                    <span class="inboxMessage">{{ \Illuminate\Support\Str::limit($msg->message, 80) }}</span>
                                                    <span class="inboxTag mdi mdi-tag work"></span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    @endforeach
                                @else
                                    <div class="webix_list_item inboxItem" style="padding:20px;">No messages found</div>
                                @endif

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

                    <div class="webix_view webix_layout_line" view_id="$layout9" style="display: inline-block; vertical-align: top; width: 69%; height: 850px;">
                        <div class="webix_view webix_layout_clean" style="width: 100%; height: 208px;" view_id="$layout10">
                            <div class="webix_view mailHead" style="width: 75%; height: 206px;" view_id="$template4">
                                <div class=" webix_template">
                                    <div id="mail_preview_box">
                                        @php
                                            $selected = $messages[0] ?? null;
                                        @endphp

                                        @if($selected)
                                            <div class="inboxWrapp flex wide">
                                                <div class="inboxLeft">
                                                    <div class="inboxImg">
                                                        <img src="{{ URL::to('assets/media/users/default.jpg') }}">
                                                        <div class="inboxState {{ ($selected->message_flag == 0) ? 'online' : 'offline' }}"></div>
                                                    </div>
                                                </div>

                                                <div class="flex flexColumn wide">
                                                    <div class="flex spaceBetween alignCenter wide">
                                                        <span class="flex alignCenter">
                                                            <span class="inboxUser boldText">{{ $selected->fname }} {{ $selected->lname }}</span>
                                                            <span class="inboxTag mailTag mdi mdi-tag work"></span>
                                                        </span>
                                                        <span class="smTextLight"><span>------</span></span>
                                                    </div>

                                                    <div class="smTextLight flex alignCenter pointer">
                                                        <span>to: </span>
                                                        <span>me</span>
                                                        <span class="mailTo mdi mdi-menu-down"></span>
                                                    </div>
                                                    <span class="mailSubject boldText">{{ $selected->title }}</span>

                                                    <div class="mailInfoTable flex flexColumn">
                                                        <div class="tableRow flex">
                                                            <div class="tableLeft">
                                                                <span class="smTextLight">from:</span>
                                                            </div>
                                                            <div class="tableRight smText ">
                                                                <span class="mailItem">
                                                                <span class="boldText">{{ $selected->fname }} {{ $selected->lname }}</span>
                                                                <span>&lt;{{ $selected->username ?? '' }}&gt;</span>
                                                                </span>
                                                            </div>
                                                        </div>
                                                        <div class="tableRow flex">
                                                            <div class="tableLeft">
                                                                <span class="smTextLight">when:</span>
                                                            </div>
                                                            <div class="tableRight smText ">
                                                                <span>------</span>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>

                                            <div class="mailWrapper">
                                                <div class="mailInner">
                                                    {!! nl2br(e($selected->message)) !!}
                                                </div>
                                            </div>
                                        @else
                                            <div class="mailWrapper">
                                                <div class="mailInner">
                                                    <p>No message selected.</p>
                                                </div>
                                            </div>
                                        @endif
                                    </div>
                                </div>
                            </div>

                            <div class="webix_view webix_toolbar webix_layout_toolbar" style="width: 24%; height: 206px;" role="toolbar" view_id="$toolbar3">
                                <div class="webix_scroll_cont">
                                    <div class="webix_view webix_layout_line" style="width: 100%; height: 45px;" view_id="$layout11">
                                        <div class="webix_view webix_spacer" view_id="$spacer5" style="width: 0px; height: 38px;"></div>
                                        <div class="webix_view webix_control webix_el_icon" view_id="$icon5"><button type="button" class="webix_icon_button"><i class="fa fa-reply"></i></button></div>
                                        <div class="webix_view webix_control webix_el_icon" view_id="$icon6"><button type="button" class="webix_icon_button"><i class="fa fa-reply-all"></i></button></div>
                                        <div class="webix_view webix_control webix_el_icon" view_id="$icon7"><button type="button" class="webix_icon_button"><i class="fa fa-share"></i></button></div>
                                        <div class="webix_view webix_control webix_el_icon" view_id="$icon8"><button type="button" class="webix_icon_button"><i class="fa fa-trash"></i></button></div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="webix_view webix_custom_scroll" style="border-width: 1px 0px 1px 1px; overflow: scroll; margin-left: 0px; margin-top: -1px; width: 100%; height: 0px;" view_id="$template5">
                            <div class="webix_scroll_cont webix_template">
                                <!-- message body preview (duplicate area for compatibility) -->
                            </div>
                        </div>

                        <div class="webix_view webix_form webix_layout_form" style="border-width: 1px 0px 0px 1px; margin-left: 0px; margin-top: -1px; width: 100%; height: 250px;" role="form" view_id="$form1">
                            <div class="webix_scroll_cont">
                                <form id="messages_form" enctype="multipart/form-data">
                                    <div class="webix_view webix_layout_line" style="margin-left: 10px; margin-top: 17px;">
                                        <div class="webix_view" style="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" style="width: 100%; height: 34px;">
                                            <div class=" webix_template">
                                                <div class="tableRow paddedRow flex">
                                                    <div class="tableLeft"><span class="smTextLight">to:</span></div>
                                                    <div class="tableRight smText">
                                                        <input type="text" name="recipent_mail" id="email_input" class="form-control" style="width: 100%;" placeholder="Enter email" autocomplete="nope">
                                                        <input type="hidden" name="email_user_ids" id="email_user_ids" class="form-control">
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="webix_view webix_layout_line" style="margin-left: 0px; margin-top: 10px; width: 90%; height: 86px;">
                                            <div class="webix_view" style="width: 58px; height: 86px;">
                                                <div class=" webix_template">
                                                    <div class="inboxImg">
                                                        <img src="{{ URL::to('assets/media/users/default.jpg') }}">
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="webix_view mailTextArea" style="width: 90%; height: 86px;">
                                                <div class="webix_el_box"><textarea placeholder="Type here" style="width:100%;" id="editor" name="editor" class="webix_inp_textarea"></textarea></div>
                                            </div>
                                        </div>

                                        <div class="webix_view webix_layout_line" style="height: 38px;">
                                            <div class="webix_view webix_spacer" style="width: 70%; height: 38px;"></div>
                                            <div class="webix_view webix_control webix_el_icon"><button type="button" style="height:38px;width:38px;" class="webix_icon_button"><span class="webix_icon mdi mdi-paperclip"></span></button></div>
                                            <div class="webix_view webix_control webix_el_button webix_primary"><div class="webix_el_box"><button type="button" id="send_message_btn" class="btn btn-primary">Send</button></div></div>
                                        </div>
                                    </div>

                                    <div id="attachfile-section" class="small-12" style="margin-top:10px;margin-bottom : 10px;">
                                        <ul class="attach-file" style="padding-left: 0px;list-style: none;">
                                            <li>
                                                <div id="attachfile-section">
                                                    <div style="width:100%;height:40px;" id="uploaded_file_list"></div>
                                                    <div style="width:100%;height:40px;" id="file_browse_wrapper">
                                                        <input type="file" name="fileAttach[]" id="fileAttach" multiple class="multi maxsize-2048" autocomplete="nope">
                                                    </div>
                                                </div>
                                            </li>
                                        </ul>
                                    </div>

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

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

<div id="divLoading" class="tabloadershow"></div>

<!-- Move folder modal (simple) -->
<div id="move_folder_modal" style="display:none; position:fixed; right:20px; top:100px; background:#fff; padding:15px; border:1px solid #ccc; z-index:2000;">
    <select id="move_folder_select" class="form-control">
        @if(!empty($folders) && isset($folders['options']))
            {!! $folders['options'] !!}
        @endif
    </select>
    <button id="move_folder_confirm" class="btn btn-primary mt-2">Move</button>
    <button id="move_folder_cancel" class="btn btn-light mt-2">Cancel</button>
</div>

<script type="text/javascript">
$(document).ready(function () {
    ClassicEditor.create(document.querySelector('#editor')).catch(error => { console.error(error); });
    // update inbox badge
    var unreadCount = {{ !empty($messages) ? count($messages) : 0 }};
    $("#inbox_badge").text(unreadCount);
});

// compose
$("#compose_mail").click(function(){ $(".mail_content").show(); $(".inbox_content").hide(); });

// select all
$(".inbox_select_all").change(function() {
    if(this.checked){ $('.inbox_select').prop('checked', true); $("#actions_div").show(); }else{ $('.inbox_select').prop('checked', false); $("#actions_div").hide(); }
});
$(document).on("change", ".inbox_select", function(){ $('.inbox_select_all').prop('checked', false); var any = $('.inbox_select:checked').length; if(any>0) $("#actions_div").show(); else $("#actions_div").hide(); });

// open mail via AJAX
$(document).on("click", ".openMail", function () {
    var mail_id = $(this).data("id");
    $.ajax({
        url: "{{ url('/emails/open') }}",
        type: "POST",
        data: { mail_id: mail_id, _token: "{{ csrf_token() }}" },
        success: function (res) {
            if(res.status == 'success') {
                $(".mail_content").show();
                $(".inbox_content").hide();
                $("#mail_preview_box").html(res.html);
            } else {
                alert("Unable to load message");
            }
        },
        error: function(){ alert("Server error"); }
    });
});

// send message
$(document).on("click", "#send_message_btn", function(e){
    e.preventDefault();
    var formData = new FormData($("#messages_form")[0]);
    formData.append("_token","{{ csrf_token() }}");
    $.ajax({
        url: "{{ url('/emails/send') }}",
        type: "POST",
        data: formData,
        processData: false,
        contentType: false,
        success: function(res){
            if(res.status == "success"){ alert("Message sent"); location.reload(); } else { alert("Failed to send"); }
        },
        error: function(){ alert("Server error"); }
    });
});

// mark as read
$(document).on("click", ".mark_as_read", function () {
    var ids = [];
    $(".inbox_select:checked").each(function(){ ids.push($(this).val()); });
    if(ids.length === 0){ alert("Select at least one message"); return; }
    $.ajax({
        url: "{{ url('/emails/mark-read') }}",
        type: "POST",
        data: { ids: ids, _token: "{{ csrf_token() }}" },
        success: function(res){ if(res.status == "success"){ alert("Marked as read"); location.reload(); } }
    });
});

// move to folder
$(document).on("click", ".move_to_folder", function () {
    var ids = [];
    $(".inbox_select:checked").each(function(){ ids.push($(this).val()); });
    if(ids.length === 0){ alert("Select at least one message"); return; }
    $("#move_folder_modal").show().data("ids", ids);
});
$(document).on("click", "#move_folder_cancel", function(){ $("#move_folder_modal").hide().removeData("ids"); });
$(document).on("click", "#move_folder_confirm", function(){
    var ids = $("#move_folder_modal").data("ids");
    var folder_id = $("#move_folder_select").val();
    $.ajax({
        url: "{{ url('/emails/move-folder') }}",
        type: "POST",
        data: { ids: ids, folder_id: folder_id, _token: "{{ csrf_token() }}" },
        success: function(res){ if(res.status == "success"){ alert("Messages moved"); location.reload(); } }
    });
});
</script>

@endsection