@extends('layout.basic.main')
@push('css')
<style>
    .mushibtn {
        overflow: auto;
        margin-bottom: 15px;
    }

    #create-event {
        float: right;
    }

    .btn:focus {
        outline: unset;
        outline-offset: unset;
    }

    .btn:active:focus {
        outline: unset;
    }

    .btn-default{
        background: rgb(239, 239, 239);
        color: rgb(68, 68, 68);
    }
</style>
@endpush
@section('content')
<article class="sub">
    <section class="errormessage" id="reportMessage">
        <h2 style="font-size: 25px; background: #dd4b39;color: white; padding: 10px; margin: 15px 0;">レポートメッセージ</h2>
        <div class="title_left" style="font-size: 20px; font-weight: bold;">レポートメッセージ一覧</div>
        <table class="table table-bordered" id="table_broadcast">
            <tbody>
            <tr>
                <th style="width: 15%">送信時間</th>
                <th style="width: 25%">ユーザー</th>
                <th class="list_message" style="width: 40%">メッセージ</th>
                <th class="btnth"></th>
            </tr>
            @if(!empty($list))
                @foreach($list as $index => $item)
                    <tr>
                        <td>{{ $item->updated_at}}</td>
                        <td>
                            <a href="/basic/friendlist/my_page/{{$item->line_user_id}}">
                                {{ $item->name ? $item->name : $item->real_name }}
                            </a>
                        </td>
                        <td>
                            <div v-html="messageTable('{{$item->type}}', '{{ $item->content }}')"></div>
                        </td>
                        <td></td>
                    </tr>
                @endforeach
            @else
                <tr>
                    <td colspan="6">データはありません。</td>
                </tr>
            @endif
            </tbody>
        </table>
        <div class="col-sm-12 text-center" style="margin-top: 20px">
            {{ $list->links() }}
        </div>
    </section>
</article>
@endsection
@push('js')
    <script type="application/javascript">
        var app = new Vue({
            el: '#reportMessage'
        });
    </script>
@endpush