@extends('layout.basic.main')
@section('title','フォーム作成（回答一覧）')
@push('css')
<meta name="_token" content="{{csrf_token()}}" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/ui@4.0/dist/fancybox.css" />
<link rel="stylesheet" href="{{asset('css/form_answer/form_result.css')}}?v={{config("sns-line.version")}}">
@endpush
@section('content')
<div class="container-fluid" id="formanswer_result" v-cloak>
    <div class="row">
        <div class="col-sm-12">
        </div>
        <div class="row">
            <div class="col-sm-12">
                <div class="d-flex justify-content-between align-items-center">
                    <h2 style="font-size: 20px; color: #51595C ; font-weight: bold; padding: 10px 10px 10px 0">@if(!empty($form_list)) {!! $form_list->name !!} @endif回答データ詳細</h2>
                </div>
                <br/>
                <div class="tabpanel">
                    <ul class="panel-detail">
                        <li @click="changePanel(1)" :class="type == 1 ? 'active' : ''">回答一覧</li>
                        <li @click="changePanel(2)" :class="type == 2 ? 'active' : ''">回答者一覧</li>
                    </ul>

                    <div class="datetime">
                        <span style="margin-right: 15px;">表示期間</span>
                        <div class="input-group">
                            <span class="input-group-addon" id="basic-addon1">
                                <i class="fas fa-calendar-alt"></i>
                            </span>
                            <input type="text" name="start_date" class="form-control datetimepicker" id="input_date_start" v-model="date_start" />
                        </div>
                        <span style="margin: 0 10px;">から</span>
                        <div class="input-group">
                            <span class="input-group-addon" id="basic-addon2">
                                <i class="fas fa-calendar-alt"></i>
                            </span>
                            <input type="text" name="end_date" class="form-control datetimepicker" id="input_date_end" v-model="date_end" />
                        </div>
                    </div>
                </div>
                <div class="list_result col-lg-8 col-sm-10" style="padding: 0" v-if="type == 1">
                    <div class="header_result">
                        <div class="d-flex align-item-center">
                            <div class="d-flex align-item-center">
                                <i class="fa-light fa-calendar" style="font-weight: normal !important; font-size: 25px; margin-right: 10px"></i>
                                <div style="margin-top: 4px">回答日時</div>
                            </div>
                            <div class="d-flex align-item-center" style="margin-left: 30px; font-size: 15px">
                                <i class="fa-thin fa-clock" style="font-weight: 300 !important; font-size: 28px; margin-right: 10px"></i>
                                <div style="margin-top: 4px">推定ページ表示時間</div>
                            </div>
                        </div>
                        <div class="d-flex align-items-center">
                            <div class="total_record" style="width: 220px"><span v-html="from"></span>~<span v-html="to"></span>件を表示中（全<span v-html="totalRecord"></span>件）</div>
                            <div class="paginate_select" style="font-size: 16px">
                                表示件数
                                <select class="form-control my_class" @change="changePaginate($event)">
                                    <option value="50">50</option>
                                    <option value="75">75</option>
                                    <option value="100">100</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="item_result" v-for="answer in result">
                        <div class="info-friend-reply">
                            <div class="time_answer">
                                <i class="fa-light fa-calendar" style="font-weight: normal !important;"></i> <span style="margin-left: 15px;margin-top: 5px" v-html="moment(answer.created_at).format('YYYY/MM/DD HH:mm')"></span>
                            </div>
                            <div class="duration_answer">
                                <i class="fa-thin fa-clock" style="font-weight: 300 !important;"></i> <span style="margin-left: 15px;" v-html="answer.duration_time_reply ? answer.duration_time_reply : '--:--'"></span>
                            </div>
                        </div>
                        <div class="friend">
                            <div class="avatar-friend">
                                <img :src="displayAvatar(answer.avatar_url)" alt="" style="width: 100%;" @error="setAltImg">
                            </div>
                            <a style="text-decoration: underline" :href="'/basic/friendlist/my_page/'+answer.line_user_id" v-html="answer.name"></a>
                        </div>
                        <div class="content-result">
                            <div class="row-result" v-for="item in answer.data">
                                <div class="grid-cell-1" v-html="item.name"></div>
                                <div class="grid-cell-2">
                                    <span v-if="item.type == 'friend_info_file' && item.value != ''">
                                        <div v-if="!isImage((item.value.startsWith('http') ? '' : '{{ env('URL_SERVER_MEDIA') }}/')+item.value)">
                                            <a style="background-color: #00B401;border: 0;" class="btn btn-primary"
                                               @click="downloadFile(item.value)">
                                                ダウンロード <i class="fa fa-download" aria-hidden="true"></i>
                                            </a>
                                        </div>
                                        <div v-else>
                                            <a data-fancybox :data-src="(item.value.startsWith('http') ? '' : '{{ env('URL_SERVER_MEDIA') }}/')+item.value">
                                                <img :src="(item.value.startsWith('http') ? '' : '{{ env('URL_SERVER_MEDIA') }}/')+item.value" width="120px">
                                            </a>
                                        </div>
                                    </span>
                                    <span v-else v-html="Array.isArray(item.value) ? item.value.toString() : item.value"></span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="list_friend_reply" v-else>
                    <div class="header_list_friend">
{{--                        <button type="button" class="btn btn-sns-line btn-sns-line-primary">友だちリストページで表示</button>--}}
                    </div>
                    <div class="table_list_friend">
                        <table class="table table-striped table-hover" id="tbl-formanswer">
                            <thead>
                                <tr>
                                    <th class="hear_table text-left" style="width: 180px;">回答日時</th>
                                    <th class="hear_table text-left" style="width: 250px;">友だち名</th>
                                    <th class="hear_table" style="width: 200px;">推定ページ表示時間</th>
                                    <th class="hear_table " style="width: 150px;">個別回答</th>
                                    <th></th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr v-for="item in result">
                                    <td class="text-left"> @{{ moment(item.created_at).format('YYYY/MM/DD HH:mm') }} </td>
                                    <td class="text-left">
                                        <a style="font-weight: bold; text-decoration: underline;" :href="'/basic/friendlist/my_page/'+item.id">@{{ item.name }}</a>
                                    </td>
                                    <td>
                                        <span>@{{ item.duration_time_reply ? item.duration_time_reply : '--:--' }}</span>
                                    </td>
                                    <td>
                                        <a :href="'/basic/form-answer/detail-result/{{ $form_id }}/'+item.form_result_id" style="padding: 4px 30px;" type="button" class="btn btn-sns-line btn-sns-line-secondary">表示</a>
                                    </td>
                                    <td></td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
                <nav class="text-center" style="clear: both">
                    <a style="float: left; padding: 10px 50px;margin-top: 30px" class="btn btn-sns-line btn-sns-line-secondary" href="{{ url('/basic/form-answer') }}">戻る</a>
                    <div  v-if="last_page > 1">
                        全@{{totalRecord}}件中　@{{from}}～@{{to}}件を表示中
                    </div>
                    <ul class="pagination"  v-if="last_page > 1">
                        <li v-if="page > 1">
                            <a href="#" aria-label="Previous" @click.prevent="changePage(page - 1)">
                                <i style="color:#08BF5A" class="fas fa-arrow-left"></i>
                            </a>
                        </li>
                        <li v-for="page_item in pagesNumber" v-bind:class="[ page_item == isActived ? 'active' : '']">
                            <a href="#" @click.prevent="changePage(page_item)">@{{ page_item }}</a>
                        </li>
                        <li v-if="page < last_page">
                            <a href="#" aria-label="Next" @click.prevent="changePage(page + 1)">
                                <i style="color:#08BF5A" class="fas fa-arrow-right"></i>
                            </a>
                        </li>
                    </ul>
                </nav>
            </div>
        </div>

    </div>
</div>
@endsection
@push('js')
<script src="https://cdn.jsdelivr.net/npm/@fancyapps/ui@4.0/dist/fancybox.umd.js"></script>
<script src="/plugins/vuejs/vue-resource@1.3.4.js"></script>
<!-- <script src="/js/my_page/answer_form_history.js?v={{config("sns-line.version")}}"></script> -->
<script src="/plugins/loadingoverlay/loadingoverlay.min.js"></script>
<script>
    var form_id = '{{ $form_id }}';
</script>
<script src="/js/form_answer/form_result.js?v={{config("sns-line.version")}}"></script>
@endpush