@extends('layout.basic.main')
@section('title','チャット管理')
@push('css')
    <link rel="stylesheet" href="/css/talk_list/style.css?v={{config("sns-line.version")}}">
    <style>
        .btn{
            font-weight: bold;
        }
        thead tr th{
            padding: 10px !important;
            font-weight: bold;
            background-color: #08BF5A !important;
            border: 1px solid;
        }
        table>tbody>tr>td{
            border-top: none !important;
            border-bottom: 1px solid #ddd;
        }
        .image-preview {
            border-radius: 10px;
            overflow: hidden;
            float: right;
        }
        .temp_name {
            font-size: 14px !important;
            font-weight: 700;
            margin: 0 10px;
            height: 21px;
        }

        .box-audio {
            width: 300px;
            background: #F8F8F8 0% 0% no-repeat padding-box;
            border-radius: 5px;
            padding: 5px 8px;
        }

        .box-audio .fa-music {
            color: #FFFFFF;
            font-size: 20px;
            padding: 10px;
            background-color: #888888;
            border-radius: 5px;
            width: 40px;
            height: 40px;
        }

        .box-audio .ic-pdf {
            color: #FFFFFF;
            font-size: 20px;
            padding: 10px 13px;
            background-color: #888888;
            border-radius: 5px;
            width: 40px;
            height: 40px;
        }

        .title-box-file {
            word-wrap: break-word;
            width: 230px;
        }
    </style>
@endpush
@section('content')
    <div class="container-fluid">
        <div class="row">
            <section class="talklist" id="talk_list" v-cloak>
                <h2 style="font-size: 20px;font-weight: bold; padding: 10px 10px 10px 0">チャット管理</h2>
{{--                <p style="margin-bottom: 15px; font-size: 15px; color: #222222">1:1チャットで受信したメッセージを新着順に確認することができます。</p>--}}
                <div style="display: flex;align-items: baseline;justify-content: flex-start;margin-bottom: 20px">
                    <div style="font-size: 14px">メッセージ検索</div>
                    <input type="text" class="form-control" id="search_text" v-model="keyword_search"  v-on:keyup.enter="initData()"><i class="fas fa-search" style="display: flex" id="icon_search" v-on:click="initData()"></i>
                </div>
                <div class="row">
                    <div class="col-xs-6" style="display: flex;justify-content: start; width: 55%;padding-right: 0">

                        <a v-on:click="getAllMessage()">
                            <button class="btn get-list-msg" id="get_all_msg">一覧</button>
                        </a>
                        <a v-on:click="getMsgNotConfirm()">
                            <button class="btn get-list-msg choose-btn-get-msg" id="get_msg_not_confirm">未確認のみ</button>
                        </a>
                        <button class="btn" id="openModalFilterMessage" onclick="openModalFilterMessage()">絞り込み</button>
                        <span style="margin-top: 7px">
                            <input type="checkbox" name="check_reply" id="check_reply" v-model="check_reply" v-on:click="initData()"><span style="font-weight: bold">返信を含める</span>
                        </span>
                    </div>
                    <div class="col-xs-6 text-right" style="display: flex;align-items: baseline;justify-content: flex-end;width: 45%;padding-left: 0">
                        <form style="display: flex; align-items: center;font-size: 14px">
                            <button type="button" class="btn btn-sns-line btn-sns-line-secondary" style="height: 35px;padding: 5px 15px !important;" v-on:click="filterAllDate()">全期間</button>
                            <div style="margin-right: 5px; margin-left: 15px;font-weight: bold">表示期間</div>
                            <div style="position:relative;">
                                <i class="fa fa-calendar calendar-filter" aria-hidden="true"></i>
                                <input type="text" class="datetimepicker select-date" name="start_date"  style="padding: 0 0 0 23px; font-weight: bold" v-model="start_date">
                            </div>
                            <div style="margin: 0 5px; font-weight: bold">から</div>
                            <div style="position:relative;">
                                <i class="fa fa-calendar calendar-filter" aria-hidden="true"></i>
                                <input type="text" class="datetimepicker select-date" name="end_date" style="padding: 0 0 0 23px; font-weight: bold" v-model="end_date">
                            </div>
                            <input type="hidden" name="only_new_friend">
                            <input type="hidden" name="only_old_friend">
                        </form>
                    </div>
                </div>
                <div id="preview-filter-message" class="row" v-if="keyword_search || text_filter_preview">
                    <div class="col-xs-10">
                        <!-- <div id="total_item">全@{{ total_msg }}件</div> -->
                        <div id="preview_keyword" v-if="keyword_search">メッセージに@{{ keyword_search }}を含む</div>
                        <div id="preview_modal_filter" v-html="text_filter_preview"></div>
                    </div>
                    <div class="col-xs-2" style="text-align: right">
                        <button type="button" class="btn btn-sns-line btn-sns-line-dark" style="padding: 5px 25px !important;margin-right: 20px;margin-top: 10px" v-on:click="clearDataFilter()">クリア</button>
                    </div>
                </div>
                <div class="table-responsive"></div>
                <div id="show_check_all_page"><input type="checkbox" name="checkAllPage" id="checkAllPage">全@{{ total_msg_send }}件選択</div>
                <table class="table table-hover table-bordered">
                    <thead>
                    <tr>
                        <th class="format_table" style="width: 80px"><div style="color:#FFFFFF;font-size: 9px;width: 60px;">ページ内選択</div><label><input type="checkbox" name="checkAll" id="checkAll"></label></th>
                        <th class="format_table" style="width: 90px"><div style="margin-top: -28px;color: #FFFFFF;display: flex">ステータス</div></th>
                        <th class="format_table" style="min-width: 200px;text-align: left !important;"><div style="margin-top: -28px;color: #FFFFFF;display: flex">受信日時</div></th>
                        <th class="format_table" style="width: 15%;text-align: left !important;"><div style="margin-top: -28px;color: #FFFFFF;display: flex">LINE名</div></th>
                        <th class="format_table" style="width: calc(85% - 470px);text-align: left !important;"><div style="margin-top: -28px;color: #FFFFFF;display: flex">メッセージ内容</div></th>
                        <th class="format_table" style="width: 100px"></th>
                    </tr>
                    </thead>

                    <tr v-if="items.length == 0"><td colspan="6" style="text-align: center !important;">該当するメッセージがありません。</td></tr>
                    <tr v-if="items.length != 0" v-for="(item, index) in items">
                        <td><input type="checkbox" name="check_msg" class="check_msg" v-if="item.msg_kind == 1" v-bind:data-id="item.id"></td>
                        <td  v-if="item.is_confirmed == 0 && item.msg_kind == 1"><div class="status-message" style="background: #FEBA00" >未確認</div></td>
                        <td  v-if="item.is_confirmed == 1 && item.msg_kind == 1"><div class="status-message" style="background: #7D9195">確認済</div></td>
                        <td  v-if="(item.is_message_new == 1 && item.msg_kind != 1 && item.msg_kind != 2) || (item.is_message_new == 0 && item.msg_kind != 1 && item.msg_kind != 4)"><div class="status-message" style="background: #F2F2F2;color: #51595C">返信</div></td>
                        <td style="width: 15%;text-align: left !important;" class="vertical-align-middle" v-if="item.msg_type != null">@{{ setTimeCreated(item.msg_created_at) }}</td>
                        <td class="vertical-align-middle">
                            <div style="display: flex;align-items: center">
                                <i v-if="(item.is_message_new == 1 && item.msg_kind != 1 && item.msg_kind != 2) || (item.is_message_new == 0 && item.msg_kind != 1 && item.msg_kind != 4)" class="fas fa-share" style="font-size: 20px;margin-right: 10px;color: #7D9195"></i>
                                <img :src="item.avatar_user ? item.avatar_user : '/images/blank_avatar.png'" onerror="this.onerror=null;this.src='/images/blank_avatar.png'" style="width: 30px;border-radius: 50%;margin-right: 10px;">
                                <a :href="'/basic/chat-v3?friend_id='+ item.line_user_id" style="text-decoration: underline;font-weight: bold">@{{ item.name }}</a>
                            </div>
                        </td>

                        <td style="word-break: break-all" class="vertical-align-middle text-left" v-html="displayType(item)"></td>
                        <td class="vertical-align-middle" style="width: 10%">
                            <div v-if="item.msg_type  != null">
                                <a class="modal-open" v-on:click="getDetailMessageTalkList(item)"><button class="btn btn-sns-line btn-sns-line-secondary" style="color: #FFFFFF;font-size: 14px;height: 34px;padding: 6px 30px !important;margin-bottom: 0px;border: unset">詳細</button></a>
                            </div>
                        </td>
                    </tr>
                </table>
                <div>ステータス 一括変更</div>
                <div class="row"  style="padding: 0">
                    <div class="col-sm-4" style="display: flex;align-items: center;min-width: 300px">
                        <input type="radio" name="check_confirm" value="1" checked style="margin-top: 0;margin-bottom: 1px">確認済
                        <input type="radio" name="check_confirm" value="2" style="margin-left: 20px;margin-top: 0;margin-bottom: 1px">未確認
                        <button class="btn btn-sns-line btn-sns-line-success" style="margin-left: 20px;padding: 5px 20px !important;" :disabled="is_changing_status" v-on:click="changStatus()">変更</button>
                    </div>
                    <div class="col-sm-8" style="text-align: right; display: flex;justify-content: end;margin-top: -20px;">
                        <p class="hyouji">
                        </p>
                        <div class="btn" v-if="flagEnd == 1"><a style="background: #08BF5A !important;font-weight: bold;margin-top: -7px; width: 100px; border-color: #08BF5A!important;" class="grn" v-on:click="nextPage()">次へ</a></div>
                    </div>
                </div>
                <div class="text-center">

                </div>
                <div class="modal fade" id="sendReplyMessage" tabindex="-1" role="dialog"
                     aria-labelledby="sendReplyMessage" style="top: 70px;left: 20%;">
                    <div class="modal-dialog modal-lg" role="document">
                        <div class="modal-content" style="border: none;padding: 15px;min-width: 600px;width: 80%">
                            <span class="line-icon line-icon-close" style="float: right" data-dismiss="modal"  aria-hidden="true"><i class="fas fa-times"></i></span>
                            <div style="padding: 20px">
                                <div style="display: flex;align-items: center">
                                    <img :src="msg_detail.avatar_user ? msg_detail.avatar_user : '/images/blank_avatar.png'" onerror="this.onerror=null;this.src='/images/blank_avatar.png'" style="width: 30px;border-radius: 50%;margin-right: 15px;">
                                    <p class="name" style="margin-right: 15px">
                                        <a :href="'/basic/friendlist/my_page/'+msg_detail.line_user_id" >@{{ msg_detail.name }}</a>
                                    </p>
                                    <div v-if="(msg_detail.is_message_new == 1 && msg_detail.msg_kind != 1 && msg_detail.msg_kind != 2) || (msg_detail.is_message_new == 0 && msg_detail.msg_kind != 1 && msg_detail.msg_kind != 4)" style="font-size: 14px">さんへのメッセージ</div>
                                    <div v-else style="font-size: 14px">さんからのメッセージ</div>
                                </div>
                                <div style="text-align: left !important;margin-top: 10px;margin-bottom: 5px" class="vertical-align-middle" >@{{ setTimeCreated(msg_detail.msg_created_at) }}</div>
                                <div class="modal_message_v2 h-[220px] mx-[25px] my-[18px] px-[20px] py-[30px] bg-[#8EABD6] rounded-[10px] overflow-y-scroll">
                                    <!-- <div class="inner">
                                        <p v-html="messageTable(msg_detail.msg_type,msg_detail.content)"></p>
                                    </div> -->
                                    <template v-for="(item, index) in itemPreviewMsg">
                                        <div class="bg-[#FFFFFF] p-[10px] rounded-[10px] mb-[18px] float-right w-[300px]"
                                            v-if="(item.type_data == 'msg' && (item.type == 'text' || item.type == typeMessageV2.text)) || (item.type_data == 'template' && item.type == typeTemplateV2.text)">
                                            <p class="text-left whitespace-pre-wrap" style="word-wrap: break-word;" v-html="showMessageText(item.content, item.replace_content)"></p>
                                        </div>

                                        <div class="mb-[18px] image-preview" v-if="(item.type_data == 'msg' && (item.type == 'image_map' || item.type == 'image' || item.type == typeMessageV2.image)) || (item.type_data == 'template' && (item.type == typeTemplateV2.image || item.type == typeTemplateV2.image_map))">
                                            <img :src=" item.content && item.content.startsWith('http') ? item.content : ( item.image_server ? item.image_server : '