@extends('admin.layouts.contentLayoutMaster')

@section('title','訂單諮詢')

@section('vendor-styles')
    <link rel="stylesheet" type="text/css" href="{{ asset('plugins/vue-good-table/vue-good-table.css') }}">
@endsection

@section('page-styles')
    <link rel="stylesheet" type="text/css" href="{{ mix('css/pages/admin/question/index.css') }}">
@endsection

@section('content')
    <div id="app">
        {{-- search bar --}}
        <section @keydown.enter="getList">
            <div class="row">
                <div class="col-md-12 col-sm-12">
                    <div class="card">
                        <div class="card-header">
                            <h4 class="card-title">搜尋</h4>
                            <a class="heading-elements-toggle"><i class="bx bx-dots-vertical font-medium-3"></i></a>
                            <div class="heading-elements">
                                <ul class="list-inline mb-0">
                                    <li>
                                        <a data-action="collapse"><i class="bx bx-chevron-down"></i></a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                        <div class="card-content collapse show">
                            <div class="card-body">
                                <div class="row">

                                    <div class="col-md-3">
                                        <fieldset class="form-group">
                                            <label for="keyword">關鍵字</label>
                                            <input
                                                    class="form-control"
                                                    id="keyword"
                                                    name="keyword"
                                                    placeholder="處理編號,訂單編號"
                                                    title="處理編號,訂單編號"
                                                    type="text"
                                                    v-model="search.keyword">
                                        </fieldset>
                                    </div>
                                    <div class="col-md-3">
                                        <h6>諮詢時間</h6>
                                        <div class="row">
                                            <div class="col-md-6">
                                                <input
                                                        class="form-control flatpickr2"
                                                        id="question_at_start"
                                                        name="question_at_start"
                                                        placeholder="起"
                                                        type="text"
                                                        v-model="search.question_at_start">
                                            </div>
                                            <div class="col-md-6">
                                                <input
                                                        class="form-control flatpickr2"
                                                        id="question_at_end"
                                                        name="question_at_end"
                                                        placeholder="迄"
                                                        type="text"
                                                        v-model="search.question_at_end">
                                            </div>
                                        </div>
                                    </div>

                                    <div class="col-md-3">
                                        <h6>問題類別</h6>
                                        <fieldset class="form-group">
                                            <select
                                                    class="form-control "
                                                    id="question_category"
                                                    name="question_category"
                                                    v-model="search.question_category">
                                                <option value=""></option>
                                                <option v-for="(item, index) in config.questionCategories"
                                                        :value="index">@{{ item }}
                                                </option>
                                            </select>
                                        </fieldset>
                                    </div>

                                    <div class="col-md-3">
                                        <h6>諮詢狀態</h6>
                                        <fieldset class="form-group">
                                            <select
                                                    class="form-control "
                                                    id="question_status"
                                                    name="question_status"
                                                    v-model="search.question_status">
                                                <option value=""></option>
                                                <option v-for="(item, index) in config.questionStatus" :value="index">
                                                    @{{ item }}
                                                </option>
                                            </select>
                                        </fieldset>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="card-content collapse show">
                            <div class="card-footer">
                                <div class="row">
                                    <div class="col-md-6">

                                    </div>
                                    <div class="col-md-6 d-flex justify-content-end">
                                        <button class="btn btn-primary glow mr-1 mb-1" type="button" @click="getList">
                                            搜尋
                                        </button>
                                        <button class="btn btn-light glow mr-1 mb-1" type="reset" @click="clearSearch">
                                            清空
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        {{-- actions & table --}}
        <section>
            <div class="row">
                <div class="col-12">
                    <div class="card">
                        <div class="card-header d-flex justify-content-between align-items-center">
                            <h4 class="card-title">列表</h4>
                        </div>
                        <div class="card-content">
                            @can ('客服管理-訂單諮詢列表-編輯')
                                <div class="row border rounded px-1 py-2 mx-2 mb-2">
                                    <label class="actions-block-label">
                                        <span class="h6 text-muted">批次變更</span>
                                    </label>
                                    <div class="col-12 col-sm-6 col-lg-3">
                                        <fieldset class="form-group">
                                            <label for="action_question_status">諮詢狀態</label>
                                            <select
                                                    class="form-control"
                                                    id="action_question_status"
                                                    name="action_question_status"
                                                    v-model="actions.question_status">
                                                <option value=""></option>
                                                <option v-for="(item, index) in config.questionStatus"
                                                        :value="index">@{{ item }}
                                                </option>
                                            </select>
                                        </fieldset>
                                    </div>
                                    <div class="col-12 col-sm-6 col-lg-3 d-flex align-items-center">
                                        <button type="button" class="btn btn-primary glow mb-0" @click="action">更新
                                        </button>
                                    </div>
                                </div>
                            @endcan

                            <div class="row">
                                <div class="col-md-12">
                                    <vue-good-table
                                            ref="good-table"
                                            :columns="goodTableColumns"
                                            :rows="goodTableRows"
                                            :pagination-options="{
                                                enabled: true,
                                                perPage: 50,
                                                perPageDropdown: [10, 30, 50],
                                                dropdownAllowAll: false,
                                                mode: 'records'
                                            }"
                                            :select-options="{
                                                enabled: true,
                                                selectOnCheckboxOnly: true,
                                                selectionInfoClass: 'good-table-selection-info',
                                                selectionText: '列，已選取',
                                                clearSelectionText: '清除',
                                                selectAllByGroup: true,
                                            }"
                                            :line-numbers="true">
                                        <template slot="table-row" slot-scope="props">
                                            <span v-if="props.column.field == 'actionsHtml'"
                                                  class="d-flex justify-content-center">
                                                <a :href="props.row.others.orderShowUrl"
                                                   title="查看訂單"
                                                   class="mr-1 cursor-pointer"
                                                   target="_blank">
                                                    <i class="badge-circle badge-circle-light-secondary bx bx-detail font-medium-1" title="查看訂單"></i>
                                                </a>

                                                <a href="javascript:;"
                                                   title="查看/回覆"
                                                   class="mr-1 cursor-pointer"
                                                   @click="getThreads(props.row.id)"
                                                   v-b-modal="'modalDetail'">
                                                    <i class="badge-circle badge-circle-light-secondary bx bx-message-dots font-medium-1"></i>
                                                </a>

                                                <a href="javascript:;" title="結案" class="mr-1 cursor-pointer"
                                                   @click="doneQuestion(props.row.id)" v-if="!props.row.others.isDone">
                                                    <i class="badge-circle badge-circle-light-secondary bx bx-power-off font-medium-1"></i>
                                                </a>
                                            </span>
                                        </template>
                                    </vue-good-table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <b-modal
                id="modalDetail"
                size="lg"
                :title="'訂單諮詢: ' + selectedQuestion.question.code"
                scrollable
                body-bg-variant="light">
            <div class="email-app-details" v-if="selectedQuestion.question">
                <div class="email-scroll-area">
                    <!-- email details  -->
                    <div class="row">
                        <div class="col-12">
                            <div v-for="(thread, threadIndex) in selectedQuestion.threads"
                                 class="collapsible email-detail-head shadow bg-white rounded">
                                <div :class="['card collapse-header', { open: threadIndex === (selectedQuestion.threads.length - 1) }]"
                                     role="tablist">

                                    <div :aria-controls="'collapse'+ thread.id"
                                         aria-expanded="false"
                                         class="card-header d-flex justify-content-between align-items-center"
                                         :data-target="'#collapse'+ thread.id"
                                         data-toggle="collapse"
                                         :id="'headingCollapse' + thread.id"
                                         role="tab">

                                        <div class="collapse-title media" v-if="thread.from === 'customer'">
                                            <i class='bx bx-question-mark' style="font-size: 30px;"></i>

                                            <div class="media-body mt-25">
                                                <span class="text-primary">@{{ selectedQuestion.question.questionPersonName }}</span>
                                                <span class="d-sm-inline d-none">&lt; @{{ selectedQuestion.question.questionPersonMobile }} &gt;</span>
                                            </div>
                                        </div>

                                        <div class="collapse-title media" v-else-if="thread.from === 'service'">
                                            <i class='bx bx-user' style="font-size: 30px;"></i>

                                            <div class="media-body mt-25">
                                                <span class="text-primary">管理員</span>
                                            </div>
                                        </div>


                                        <div class="information d-sm-flex d-no/ne align-items-center">
                                            <small class="text-muted mr-50">@{{ thread.createdAt }}</small>
                                        </div>
                                    </div>

                                    <div :id="'collapse'+ thread.id" :aria-labelledby="'headingCollapse' + thread.id"
                                         :class="['collapse', {show: threadIndex === (selectedQuestion.threads.length - 1)}]"
                                         role="tabpanel">
                                        <div class="card-content">
                                            <div class="card-body py-1" v-html="thread.message"></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row ">
                        <div class="col-12 px-0">
                            <div class="card shadow-none rounded mb-0">
                                <div class="card-body">
                                    <span>Reply to @{{ selectedQuestion.question.questionPersonName }}</span>
                                    <textarea :disabled="selectedQuestion.question.isDone" class="form-control" rows="5"
                                              v-model="newMessage"></textarea>

                                    <button class="btn btn-primary send-btn mt-2 float-right" @click="sendMessage"
                                            :disabled="selectedQuestion.question.isDone">
                                        <i class='bx bx-send mr-25'></i>
                                        <span class="d-none d-sm-inline">Send</span>
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <template #modal-footer="{ cancel }">
                <b-button variant="danger" @click="doneQuestion(selectedQuestion.question.id)"
                          v-if="!selectedQuestion.question.isDone">
                    結案
                </b-button>

                <b-button variant="light" @click="cancel()">
                    Close
                </b-button>
            </template>
        </b-modal>
    </div>
@endsection

@section('vendor-scripts')
    <script src="{{ asset('plugins/vue-good-table/vue-good-table.js') }}"></script>
@endsection

@section('page-scripts')
    <script src="{{ mix('assets/js/admin/question/index.js') }}"></script>
@endsection