@extends('layout.basic.main')
@push('css')
    <link rel="stylesheet" href="{{asset('/css/friendlist/style.css')}}?v={{config("sns-line.version")}}">
    <style>
        #user_event tr{
            border-bottom: 1px solid #F4F6F7;
        }
        #user_event th,
        #user_event td{
            border: none;
        }
        #user_event *{
            font-weight: bold;
        }
    </style>
@endpush
@section('content')
    <article class="">
        <section class="messagelistsetting" id="user_event" v-cloak>
            <div style="display: flex;justify-content: space-between;align-items: center;">
                <h2 style="font-size: 20px; color: #222222; font-weight: bold; padding: 10px 10px 10px 0">配信中友だち一覧</h2>
                <a href="{{ url()->previous() }}"><span>&lt;前ページ</span></a>
            </div>
            <div id="container-table">
                <table id="List_Friend_user">
                    <tbody>
                        <tr class="success" style="height: 42px;">
                            <th style="text-align: left!important; width: 250px">リマインド配信開始日時</th>
                            <th style="text-align: left!important;">友だち名</th>
                        </tr>
                    </tbody>
                    <tbody>
                        <tr v-for="(item,index) in eventList">
                        <td style="text-align: left!important;">
                            <div style="margin-left: 10px">
                                <span>
                                    @{{ moment(item.register_date_time).format('YYYY年MM月DD日') }}
                                </span>
                                <span style="margin-left: 10px">
                                    @{{ moment(item.register_date_time).format('HH時mm分') }}
                                </span>
                            </div>
                        </td>
                            <td style="text-align: left!important;padding-left: 20px;">
                                <div style="display: flex; align-items: center">
                                    <img :src="item?.line_user?.avatar_url ?? '/images/blank_avatar.png'"
                                         onerror="this.onerror=null;this.src='/images/blank_avatar.png'"
                                         style="width: 50px;border-radius: 50%;" alt="">
                                    <a style="margin-left: 10px; text-decoration: underline"
                                       :href="`/basic/friendlist/my_page/${item.line_user.id}`"
                                       v-if="item?.line_user?.id">
                                        @{{ item?.line_user?.view_name ?? item?.line_user?.name}}
                                    </a>
                                </div>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </section>
    </article>
@endsection
@push('js')
    <script src="/js/axios.min.js"></script>
    <script>
        const event_id = '{{ $event_id }}';
        const bot_id = '{{ $bot_id }}';
        new Vue({
            el: "#user_event",
            data: {
                eventList: []
            },
            created: async function() {
                this.eventList = await this.init();
            },
            methods: {
                init: async () => {
                    $.LoadingOverlay('show');
                    let eventList;
                    await axios.post('{{ route('user_event.init') }}',{
                        bot_id: bot_id,
                        event_id: event_id
                    })
                        .then(res => {
                            eventList = res.data.user_event_list;
                        }).catch(err => {
                            console.log(err);
                        }).then(() => {
                            $.LoadingOverlay('hide');
                        })
                    return eventList;
                }
            }
        })
    </script>
@endpush