@extends('layout.basic.main')
@push('css')
<link rel="stylesheet" href="/css/conversion/style.css?v={{config("sns-line.version")}}" type="text/css">
    <style>
        .pc-body{
            font-weight: bold;
            color: #51595c;
        }
        .title-detail{
            font-size: 20px;
            font-weight: bold;
            padding: 10px 10px 10px 0px;
            color: rgb(81, 89, 92) !important;
        }
        thead tr th{
            padding: 10px !important;
            font-weight: bold;
            background-color: #08BF5A !important;
            border: none!important;
        }
        table>tbody>tr>td{
            border-top: none !important;
            border-bottom: 1px solid #ddd;
        }

    </style>
@endpush
@section('content')
    <div class="container-fluid pc-body">
        <div class="row">
            <div class="col-sm-12">
                <div style="display: flex; align-items: baseline; justify-content: space-between">
                    <h2 class="title-detail">[{{$conName}}]反応友だち一覧</h2>
                    <a href="/basic/conversion" style=" font-weight: bold;text-decoration: underline;color: rgba(87,153,219,1);" > &lt;前ページ </a>
                </div>

                <table class="table table-striped">
                    <thead>
                    <tr>
                        <th style="width: 200px; border-radius: 4px 0 0 4px;" class="text-left"> 反応日時</th>
                        <th class="text-left" style="border-radius: 0 4px 4px 0;">友だち名</th>
                    </tr>
                    </thead>
                    <tbody>
                    @if(!empty($conversion) && count($conversion) > 0)
                        @foreach($conversion as $item)
                            <tr>
                                <td class="text-left">
                                    {{ \Illuminate\Support\Carbon::createFromTimestamp(strtotime($item->visited_at))->format('Y.m.d H:i')}}
                                </td>
                                <td class="text-left">
                                    <div style="display: flex; align-items: center">
                                        <img style="width: 45px; border-radius: 50%; margin-right: 15px" src="{{ !empty($item->avatar_url) ? $item->avatar_url : '/images/blank_avatar.png'}}" onerror="this.onerror=null;this.src='/images/blank_avatar.png'"
                                             width="150px;" >
                                        <a href="/basic/friendlist/my_page/{{$item->line_user_id}}" style="color: #00a0ea; font-weight: bold; text-decoration: underline">{!! $item->name !!}</a>
                                    </div>
                                    </td>

                            </tr>
                        @endforeach
                        @else
                        <tr >
                            <td colspan="2"> データがありません。</td>
                        </tr>
                    @endif

                    </tbody>
                </table>
{{--                <br>--}}
{{--                <br>--}}
{{--                <div class="text-center">--}}
{{--                    <a class="btn btn-line-secondary btn-preview-slot" href="/basic/conversion">戻る</a>--}}
{{--                </div>--}}
            </div>
        </div>
    </div>
@endsection
@push('js')
<script src="/chat_files/clipboard.min.js"></script>
{{--<script src="/js/conversion/index.js?v={{config("sns-line.version")}}"></script>--}}
@endpush