{% load static i18n %}
<!DOCTYPE html>
<html lang="fa">
<head>

    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>{% translate 'صفحه‌ی پشتیبان' %}</title>

    <!-- External files2 -->
    <link rel="stylesheet" href="{% static 'django_chatapp/css/supporter.css' %}">

</head>
<body>

    <section class="chatapp" id="chatapp">

        <div class="alert_box" v-if="alert">
            <p>[[ alert ]]</p>
        </div>

        <span id="sound_sendmsg" class="d-none">{% static 'django_chatapp/song/send.mp3' %}</span>

        <p class="d-none" id="supporter_uid">{{ supporter_uid }}</p>

        <div class="chatapp__msg">

            <!-- + header -->
            <div class="msg__header">
                <div class="msg__wrapper">

                    <div class="header__info">
                        <img src="{% static 'django_chatapp/img/supporter.png' %}" alt="supporter image">
                        <div>
                            <span v-if="client_id" :title="client_id.slice(0,3) + '****' + client_id.slice(7,11)">[[ client_name.slice(0,35) ]]</span>
                            <span v-if="client_id">[[ receiver_status == 'online' ? $t('online') : $t('last seen recently') ]]</span>
                            <span v-else>[[ $t('WelCome to Supporter Panel') ]]</span>
                        </div>
                    </div>

                    <div class="header__option">
                        <div class="wrapper_btns">

                            <button class="btns_base" v-if="!client_id && $i18n.locale != 'en'" @click="change_lang('en')">En</button>
                            <button class="btns_base" v-if="!client_id && $i18n.locale != 'fa'" @click="change_lang('fa')">Fa</button>
                            <button class="btns_base" v-if="!client_id && $i18n.locale != 'ar'" @click="change_lang('ar')">Ar</button>
                            <button class="btns_base" v-if="!client_id && $i18n.locale != 'ru'" @click="change_lang('ru')">Ru</button>
                            
                            <button class="btns_base" v-if="client_id" @click="open_report_box"><img src="{% static 'django_chatapp/img/report.png' %}" alt="report user"></button>
                            <button class="btns_base" v-if="client_id" @click="openclose_copyreadymsg"><img src="{% static 'django_chatapp/img/copy.png' %}" alt="copy msg box"></button>
                            <button class="btns_base" v-if="client_id" @click="reset_close_chat_box"><img src="{% static 'django_chatapp/img/close.png' %}" alt="close chat box"></button>
                            
                            <div class="reportbox_section" v-if="which_toggle_popup == 'report'">

                                <form @submit.prevent="send_report">
                                    <div class="chatapp_formcontrol" style="margin-bottom: 17px !important;">
                                        <select v-model="report_item">
                                            <option value="badterms">[[ $t('Using inappropriate words') ]]</option>
                                            <option value="others">[[ $t('Others') ]]</option>
                                        </select>
                                    </div>
    
                                    <div class="chatapp_formcontrol">
                                        <label>[[ $t('Report Content') ]]</label>
                                        <textarea v-model="report_cause"></textarea>
                                    </div>
    
                                    <div class="chatapp_button">
                                        <button type="button" @click="send_report">[[ $t('Send') ]]</button>
                                    </div>
                                </form>
                            </div>

                            <div class="copybox_section" v-if="which_toggle_popup == 'copybox'">

                                <div class="wrapper_boxes">

                                    <div class="msg_item" v-for="ready_msg in ready_msgs" v-if="ready_msgs" :key="ready_msg.id">
                                        <p :title="ready_msg.content">[[ ready_msg.subject ]]</p>
                                        <div class="wrapper_btns_msgs">
                                            <button v-if="ready_msg.supporter__supporter_uid == supporter_uid && !ready_msg.is_public" @click="delete_ready_msg(ready_msg.id)"><img src="{% static 'django_chatapp/img/delete.png' %}" alt="delete ready msg item"></button>
                                            <div class="wrapper_2btn_msgs">
                                                <button @click="msg_input+=ready_msg.content" v-if="client_id"><img src="{% static 'django_chatapp/img/plus.png' %}" alt="add to input"></button>
                                                <button @click="copy_ready_msg(ready_msg.content)"><img src="{% static 'django_chatapp/img/copy.png' %}" alt="copy to clipboard"></button>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="msg_item" v-if="ready_msgs.length == 0">
                                        <p>[[ $t('There are no ready messages.') ]]</p>
                                    </div>

                                </div>
                            </div>

                        </div>


                    </div>

                </div>
            </div>
            <!-- - header -->

            <!-- + tabbar -->
            <div class="msg__tabbar">
                <div class="tab_item" :class="tab_id_active == 'menu' ? 'tab_active' : ''" @click="open_tab_data('menu')">
                    [[ $t('Home') ]]
                </div>
                <div class="tab_item" :class="tab_id_active == 'yourunreads' ? 'tab_active' : ''" @click="open_tab_data('yourunreads')">
                    [[ $t('Your unread Messages') ]] <span v-if="this_supporter_counter_tab > 0">[[ this_supporter_counter_tab ]]</span>
                </div>
                <div class="tab_item" :class="tab_id_active == 'unreads' ? 'tab_active' : ''" @click="open_tab_data('unreads')">
                    [[ $t('Other unread Messages') ]] <span v-if="no_supoorter_counter_tab > 0">[[ no_supoorter_counter_tab ]]</span>
                </div>
                <div class="tab_item" :class="tab_id_active == 'allpages' ? 'tab_active' : ''" @click="open_tab_data('allpages')">
                    [[ $t('All Users') ]]
                </div>
            </div>
            <!-- - tabbar -->

            <!-- + body -->
            <div class="msg__body">        
                <div class="body__wrapper">

                    <div v-if="tab_id_active=='menu'" class="tab_menu_links">
                        
                        <!-- links -->
                        <div class="wrapper_buttons">
                            <p><a>[[ $t('Register a Ready Message') ]]</a></p>
                        </div>

                        <!-- outputs -->
                        <div class="wrapper_output">

                            <form novalidate @submit.prevent="submit_new_readymsg">
                                
                                <div class="chatapp_formcontrol" style="margin-bottom: 17px !important; margin-top: 7px;">
                                    <label>[[ $t('Subject') ]]</label>
                                    <input type="text" id="subject-chatinput" v-model="new_readymsg_subject" autocomplete="off" autofocus>
                                </div>
                                <div class="chatapp_formcontrol">
                                    <label>[[ $t('Content') ]]</label>
                                    <textarea id="content-chatinput" rows="4" v-model="new_readymsg_content" autocomplete="off"></textarea>
                                </div>
                                <div class="chatapp_button">
                                    <button type="submit">[[ $t('Save') ]]</button>
                                </div>
                            </form>

                        </div>

                    </div>

                    <div v-if="tab_id_active=='yourunreads'" :class="tab_data_is_show == false ? 'd-none' : ''">
                        
                        <!-- list pages -->
                        <div class="wrapper__chatboxes">
                            <template v-if="unreads_thissupporter.length != 0" v-for="(msg, index) in unreads_thissupporter" :key="msg">
                                <div class="chat__box" :class="['page1_item_' + index,  msg.status == 'online' ? 'border_green' : 'border_red']" @click="show_user_chat_page(msg.owner_id, msg.owner_name, `page1_item_${index}`, 'thissupporter', index)">
                                    <div class="user_date_div">
                                        <div :title="msg.owner_id.slice(0,3) + '****' + msg.owner_id.slice(7,11)">[[ msg.owner_name.slice(0,25) ]]</div>
                                        <div>[[ msg.status == 'online' ? $t('online') : $t('last seen recently') ]]</div>
                                    </div>
                                    <div class="unreadmsg_counter">[[ msg.counter ]]</div>
                                </div>
                            </template>
                            <template v-else>
                                <div class="chat__box">
                                    <div class="user_date_div no__data">
                                        <div>[[ $t('There are no unread messages for you') ]]</div>
                                    </div>
                                </div>
                            </template>
                        </div>

                    </div>

                    <div v-if="tab_id_active=='unreads'" :class="tab_data_is_show == false ? 'd-none' : ''">

                        <!-- list pages -->
                        <div class="wrapper__chatboxes">
                            <template v-if="unreads_nosupoorter.length != 0" v-for="(msg, index) in unreads_nosupoorter" :key="msg">
                                <div class="chat__box" :class="['page2_item_' + index, msg.status == 'online' ? 'border_green' : 'border_red']" @click="show_user_chat_page(msg.owner_id, msg.owner_name, `page2_item_${index}`, 'nosupoorter', index)">
                                    <div class="user_date_div">
                                        <div :title="msg.owner_id.slice(0,3) + '****' + msg.owner_id.slice(7,11)">[[ msg.owner_name.slice(0,25)]]</div>
                                        <div>[[ msg.status == 'online' ? $t('online') : $t('last seen recently') ]]</div>
                                    </div>
                                    <div class="unreadmsg_counter">[[ msg.counter ]]</div>
                                </div>
                            </template>
                            <template v-else>
                                <div class="chat__box">
                                    <div class="user_date_div no__data">
                                        <div>[[ $t('There are no unread messages') ]]</div>
                                    </div>
                                </div>
                            </template>
                        </div>

                    </div>
                    
                    <div v-if="tab_id_active=='allpages'" :class="tab_data_is_show == false ? 'd-none' : ''">

                        <!-- list pages -->
                        <div class="wrapper__chatboxes">
                            <template v-if="chat_to_all.length != 0" v-for="(chat, index) in chat_to_all" :key="chat">
                                <div class="chat__box" :class="'page3_item_' + index" @click="show_user_chat_page(chat.user_chat_uid, `${chat.first_name} ${chat.last_name}`, `page3_item_${index}`, 'anyone', index)">
                                    <div class="user_date_div">
                                        <div>[[ (chat.first_name + chat.last_name).slice(0,25) ]]</div>
                                        <div>[[ chat.user_chat_uid.slice(0,3) ]]****[[ chat.user_chat_uid.slice(7,11) ]]</div>
                                    </div>
                                </div>
                            </template>
                            <template v-else>
                                <div class="chat__box">
                                    <div class="user_date_div no__data">
                                        <div>[[ $t('There are no Users') ]]</div>
                                    </div>
                                </div>
                            </template>
                        </div>

                    </div>

                    <!-- + messages wrapper -->
                    <div class="all__msg__wrapper" :class="show_msg_container == true ? '' : 'd-none'">

                        <template v-for="msg_item in message_list" :key="msg_item.id">
                            <div v-if="!msg_item.is_deleted" class="one_msg_wrapper">

                                <ul :id="`msg-menu-bar-${msg_item.id}`" class="msg-menu-bar d-none" :class="msg_item.sender_type == 'supporter' ? 'msg-menu-bar--left' : 'msg-menu-bar--right'">
                                    <li @click="reply_msg(`chatapp_msg_${msg_item.id}`, msg_item.id)"><img src="{% static 'django_chatapp/img/reply.png' %}" alt="reply"> [[ $t('Reply') ]]</li>
                                    <li @click="copy_ready_msg(msg_item.text)"><img src="{% static 'django_chatapp/img/copy.png' %}" alt="copy"> [[ $t('Copy') ]]</li>
                                    <li v-if="edit_user_msg && msg_item.sender_type == 'supporter' && !msg_item.is_edited" @click="edit_message(`chatapp_msg_${msg_item.id}`, msg_item.id)"><img src="{% static 'django_chatapp/img/edit.png' %}" alt="edit"> [[ $t('Edit') ]]</li>
                                    <li v-if="delete_user_msg && msg_item.sender_type == 'supporter'" @click="delete_message(msg_item.id)"><img src="{% static 'django_chatapp/img/delete.png' %}" alt="delete"> [[ $t('Remove') ]]</li>
                                </ul>

                                <div class="msg" :class="msg_item.sender_type == 'supporter' ? 'msg__right' : 'msg__left'" :id="'chatapp_msg_' + msg_item.id">
                                    <p v-if="msg_item.reply_title" class="msg__replied" :class="msg_item.sender_type == 'supporter' ? 'msg__replied--right' : 'msg__replied--left'" @click="msg_replied(`chatapp_msg_${msg_item.reply_id}`)">
                                        <span>[[ msg_item.reply_title == 'supporter' ? $t('You') : $t('Client') ]]</span>
                                        <span v-if="!msg_item.reply_is_deleted">[[ msg_item.reply_msg ]]</span>
                                        <span v-else>[[ $t('This message has been deleted.') ]]</span>
                                    </p>
                                    
                                    <p class="msg__content">
                                        [[ msg_item.text ]]
                                    </p>
                                    <div class="msg__info">
                                        <div class="msg__info__status" v-if="msg_item.sender_type == 'supporter'">
                                            <img v-if="msg_item.is_seen" src="{% static 'django_chatapp/img/double-check.png' %}" alt="double check status">
                                            <img v-else src="{% static 'django_chatapp/img/single-check.png' %}" alt="single check status">
                                        </div>
                                        <div class="msg__info__clock">[[ msg_item.created ]]</div>
                                        <div class="msg__info__edited" v-if="msg_item.is_edited">[[ $t('edited') ]]</div>
                                    </div>
                                    <div class="reply_one_msg" :class="msg_item.sender_type == 'supporter' ? 'reply_one_msg--right' : 'reply_one_msg--left'">
                                        <span @click="reply_msg(`chatapp_msg_${msg_item.id}`, msg_item.id)">[[ $t('reply') ]]</span>
                                        <br><br>
                                        <span class="toggle_mneubar" @click="show_menu_bar(`msg-menu-bar-${msg_item.id}`)">[[ $t('more') ]]</span>
                                    </div>
                                </div>
                            </div>
                            <div v-if="msg_item.is_deleted && show_deleted_msg">
                                <div class="msg__content deleted_msg"  :class="msg_item.sender_type == 'supporter' ? 'msgdel__right' : 'msgdel__left'">
                                    <img src="{% static 'django_chatapp/img/delete.png' %}" alt="delete"> [[ $t('This message has been deleted.') ]]
                                </div>
                            </div>
                            <div class="clearfix"></div>
                        </template>

                    </div>
                    <!-- - messages wrapper -->

                </div>
            </div>
            <!-- - body -->

            <!-- + send msg -->
            <div class="body__inputs d-none">
                <form novalidate @submit.prevent="sned_msg_socket">
                    <div class="forminput_wrapper">

                        <input type="text" v-model="msg_input" id="text-chatinput" autocomplete="off" :placeholder="$t('Enter your message:')">
                        <button class="show_emoji" type="button" @click="show_emojibar">
                            <img src="{% static 'django_chatapp/img/emoji.png' %}" alt="toggle emojis">
                        </button>

                        <div class="reply_msg_wrapper d-none">
                            <button class="close_replybar" type="button" @click="close_replybar">&times;</button>
                            <div>
                                <p class="reply__writer"></p>
                                <p class="reply__content"></p>
                                <p class="reply__reply_id d-none"></p>
                            </div>
                        </div>

                        <div class="emoji_wrapper d-none">
                            <div class="emoji_box">
                                <div class="emoji_item" @click="add_emoji_toinput('&#x1F600;')">&#x1F600;</div>
                                <div class="emoji_item" @click="add_emoji_toinput('&#x1F601;')">&#x1F601;</div>
                                <div class="emoji_item" @click="add_emoji_toinput('&#x1F602;')">&#x1F602;</div>
                                <div class="emoji_item" @click="add_emoji_toinput('&#x1F603;')">&#x1F603;</div>
                                <div class="emoji_item" @click="add_emoji_toinput('&#x1F604;')">&#x1F604;</div>
                                <div class="emoji_item" @click="add_emoji_toinput('&#x1F605;')">&#x1F605;</div>
                                <div class="emoji_item" @click="add_emoji_toinput('&#x1F607;')">&#x1F607;</div>
                                <div class="emoji_item" @click="add_emoji_toinput('&#x1F60B;')">&#x1F60B;</div>
                                <div class="emoji_item" @click="add_emoji_toinput('&#x1F60C;')">&#x1F60C;</div>
                                <div class="emoji_item" @click="add_emoji_toinput('&#x1F60D;')">&#x1F60D;</div>
                                <div class="emoji_item" @click="add_emoji_toinput('&#x1F60E;')">&#x1F60E;</div>
                                <div class="emoji_item" @click="add_emoji_toinput('&#x1F60F;')">&#x1F60F;</div>
                                <div class="emoji_item" @click="add_emoji_toinput('&#x1F610;')">&#x1F610;</div>
                                <div class="emoji_item" @click="add_emoji_toinput('&#x1F611;')">&#x1F611;</div>
                                <div class="emoji_item" @click="add_emoji_toinput('&#x1F612;')">&#x1F612;</div>
                                <div class="emoji_item" @click="add_emoji_toinput('&#x1F613;')">&#x1F613;</div>
                                <div class="emoji_item" @click="add_emoji_toinput('&#x1F618;')">&#x1F618;</div>
                                <div class="emoji_item" @click="add_emoji_toinput('&#x1F61C;')">&#x1F61C;</div>
                                <div class="emoji_item" @click="add_emoji_toinput('&#x1F621;')">&#x1F621;</div>
                                <div class="emoji_item" @click="add_emoji_toinput('&#x1F622;')">&#x1F622;</div>
                                <div class="emoji_item" @click="add_emoji_toinput('&#x1F624;')">&#x1F624;</div>
                                <div class="emoji_item" @click="add_emoji_toinput('&#x1F625;')">&#x1F625;</div>
                                <div class="emoji_item" @click="add_emoji_toinput('&#x1F627;')">&#x1F627;</div>
                                <div class="emoji_item" @click="add_emoji_toinput('&#x1F628;')">&#x1F628;</div>
                                <div class="emoji_item" @click="add_emoji_toinput('&#x1F629;')">&#x1F629;</div>
                                <div class="emoji_item" @click="add_emoji_toinput('&#x1F62A;')">&#x1F62A;</div>
                                <div class="emoji_item" @click="add_emoji_toinput('&#x1F62C;')">&#x1F62C;</div>
                                <div class="emoji_item" @click="add_emoji_toinput('&#x1F62D;')">&#x1F62D;</div>
                                <div class="emoji_item" @click="add_emoji_toinput('&#x1F62E;')">&#x1F62E;</div>
                                <div class="emoji_item" @click="add_emoji_toinput('&#x1F630;')">&#x1F630;</div>
                                <div class="emoji_item" @click="add_emoji_toinput('&#x1F631;')">&#x1F631;</div>
                                <div class="emoji_item" @click="add_emoji_toinput('&#x1F632;')">&#x1F632;</div>
                                <div class="emoji_item" @click="add_emoji_toinput('&#x1F633;')">&#x1F633;</div>
                                <div class="emoji_item" @click="add_emoji_toinput('&#x1F634;')">&#x1F634;</div>
                                <div class="emoji_item" @click="add_emoji_toinput('&#x1F636;')">&#x1F636;</div>
                                <div class="emoji_item" @click="add_emoji_toinput('&#x1F637;')">&#x1F637;</div>
                                <div class="emoji_item" @click="add_emoji_toinput('&#x1F641;')">&#x1F641;</div>
                                <div class="emoji_item" @click="add_emoji_toinput('&#x1F642;')">&#x1F642;</div>
                                <div class="emoji_item" @click="add_emoji_toinput('&#x1F643;')">&#x1F643;</div>
                                <div class="emoji_item" @click="add_emoji_toinput('&#x1F644;')">&#x1F644;</div>
                                <div class="emoji_item" @click="add_emoji_toinput('&#x1F910;')">&#x1F910;</div>
                                <div class="emoji_item" @click="add_emoji_toinput('&#x1F911;')">&#x1F911;</div>
                                <div class="emoji_item" @click="add_emoji_toinput('&#x1F912;')">&#x1F912;</div>
                                <div class="emoji_item" @click="add_emoji_toinput('&#x1F913;')">&#x1F913;</div>
                                <div class="emoji_item" @click="add_emoji_toinput('&#x1F914;')">&#x1F914;</div>
                                <div class="emoji_item" @click="add_emoji_toinput('&#x1F915;')">&#x1F915;</div>
                                <div class="emoji_item" @click="add_emoji_toinput('&#x1F917;')">&#x1F917;</div>
                                <div class="emoji_item" @click="add_emoji_toinput('&#x1F91A;')">&#x1F91A;</div>
                                <div class="emoji_item" @click="add_emoji_toinput('&#x1F91D;')">&#x1F91D;</div>
                                <div class="emoji_item" @click="add_emoji_toinput('&#x1F91E;')">&#x1F91E;</div>
                                <div class="emoji_item" @click="add_emoji_toinput('&#x1F91F;')">&#x1F91F;</div>
                                <div class="emoji_item" @click="add_emoji_toinput('&#x1F923;')">&#x1F923;</div>
                                <div class="emoji_item" @click="add_emoji_toinput('&#x1F926;')">&#x1F926;</div>
                                <div class="emoji_item" @click="add_emoji_toinput('&#x1F928;')">&#x1F928;</div>
                                <div class="emoji_item" @click="add_emoji_toinput('&#x1F929;')">&#x1F929;</div>
                            </div>
                        </div>

                        <button type="submit" class="submit_msg_client">
                            <img src="{% static 'django_chatapp/img/send.png' %}" alt="send image">
                        </button>
                    </div>
                </form>

                <div class="btn_last_msg d-none" @click="go_to_bottom_of_box">
                    <button @click="go_to_bottom_of_box">
                        <img src="{% static 'django_chatapp/img/gotodown.png' %}" alt="go to last msg img">
                        <div class="unreadmsg_counter d-none"></div>
                    </button>
                </div>

            </div>
            <!-- - send msg -->

        </div>

    </section>

    <script type="text/javascript" src="{% static 'django_chatapp/js/vue3.js' %}"></script>
    <script type="text/javascript" src="{% static 'django_chatapp/js/vue-i18n.js' %}"></script>
    <script type="text/javascript" src="{% static 'django_chatapp/js/supporter.js' %}"></script>

</body>
</html>