@extends('layout.basic.main')
<style>
    tr,td,th{
        border: 1px solid #ccc !important;
    }
    th{font-weight: bold !important;}
    td{text-align: left !important;}
    td.danger{
        background-color: #c12e2a!important;
    }
    td.warning{
        background-color: orange;
    }
</style>
@section('content')
    <div class="container-fluid pc-body" id="csvtable">
        <div class="row">
            <div class="col-xs-12 col-sm-12 col-md-12 main">
                <div class="row">
                    <div class="col-sm-12">


                    </div>
                    <div class="row">
                        <div class="col-sm-12">
                            <h2 style="font-weight: bold">CSVインポート
                            </h2>
                            <hr>
                            <h3 style="font-weight: bold">1.CSVファイルアップロード</h3>
                            <br>
                            <form method="POST" accept-charset="UTF-8" enctype="multipart/form-data">
                                {{csrf_field()}}
                                <p>
                                    各友だちの「本名」「システム表示名」「個人メモ」「電話番号」「表示状態(表示/非表示/ブロック)」の更新が行えます

                                </p>
                                <br>
                                <div class="row">
                                    <div class="col-sm-8">
                                        <div class="alert alert-warning" role="alert">
                                            <b>
                                                <i class="glyphicon glyphicon-exclamation-sign"></i> 注意<br>
                                                ※CSVファイルは必ずこの管理画面からエクスポートしたものを使用してください。<br>
                                                ※CSVファイル(Excel)の上1・2行目と左1列目は、絶対に編集しないでください。<br>
                                            </b>
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-sm-4">
                                        <div class=" form-group">
                                            <label style="font-weight: bold">CSVファイル選択</label><br><br>
                                            <label for="fileUpload">
                                                <span class="btn btn-info">ファイルを選択する</span>
                                            </label>
                                            <input type="file" name="csv" style="display: none;" id="fileUpload" accept=".csv" onchange="importCSV(this)">
                                        </div>
                                    </div>
                                    <div class="col-sm-4">
                                        <input class="btn btn-primary btn-lg btn-block" onclick="csvSave()" :disabled="items.length==0" type="button" value="CSVアップロード" >
                                    </div>
                                </div>
                            </form>

                            <hr>
                            <br>
                            <br>
                            <h4 style="font-weight: bold">CSVアップロード履歴(最新5件)</h4>
                            <table border="1" >
                                <thead>
                                    <tr>
                                        <th>ユーザーID</th>
                                        <th>友だち追加日時</th>
                                        <th>最新メッセージ</th>
                                        <th>LINE登録名</th>
                                        <th>システム表示名</th>
                                        <th>電話番号</th>
                                        <th>メールアドレス</th>
                                        <th>ステップ配信状況</th>
{{--                                        <th>LINE登録名</th>--}}
{{--                                        <th>本名</th>--}}
{{--                                        <th>システム表示名</th>--}}
{{--                                        <th>電話番号</th>--}}
{{--                                        <th>ステータスメッセージ</th>--}}
{{--                                        <th>登録(フォロー)日時</th>--}}
{{--                                        <th>個別メモ</th>--}}
{{--                                        <th>表示状態</th>--}}
{{--                                        <th>ユーザーブロック</th>--}}
{{--                                        <th>個別メモ</th>--}}
{{--                                        <th>表示状態</th>--}}
{{--                                        <th>ユーザーブロック</th>--}}
                                        <th></th>
                                    </tr>
                                </thead>
                                <tbody>
                                <tr v-for="item in items" >
                                    <td :class="(item.errors.name)" v-text="item.line_id"></td>
                                    <td :class="(item.errors.name)" v-text="item.followed_at"></td>
                                    <td :class="(item.errors.name)" v-text="item.msg_created_at"></td>
                                    <td :class="(item.errors.name)" v-text="item.name"></td>
                                    <td :class="(item.errors.name)" v-text="item.view_name"></td>
                                    <td :class="(item.errors.name)" v-text="item.phone_number"></td>
                                    <td :class="(item.errors.name)" v-text="item.email"></td>
                                    <td :class="(item.errors.name)" v-text="item.scenario_action"></td>
{{--                                    <td :class="(item.errors.name)" v-text="item.real_name"></td>--}}
{{--                                    <td :class="(item.errors.name)" v-text="item.view_name"></td>--}}
{{--                                    <td :class="(item.errors.name)" v-text="item.phone_number"></td>--}}
{{--                                    <td :class="(item.errors.name)" v-text="item.status_msg"></td>--}}
{{--                                    <td :class="(item.errors.name)" v-text="item.followed_at"></td>--}}
{{--                                    <td :class="(item.errors.name)" v-text="item.memo"></td>--}}
{{--                                    <td :class="(item.errors.name)" v-text="item.status"></td>--}}
{{--                                    <td :class="(item.errors.name)" v-text="item.blocked"></td>--}}
                                    <td :class="(item.errors.name)" v-text="item.errors.value"></td>
                                </tr>
                                </tbody>
                            </table>
                            <br>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script src="/js/jquery.min.js"></script>
    <script src="/js/media/alertify.min.js"></script>
    <script src="/plugins/vuejs/vue.min.js"></script>
    <script src="/js/friendlist/import_csv.js?v={{config("sns-line.version")}}"></script>
    <script type="text/javascript" charset="UTF-8">

    </script>
    @if(session('message'))
        <script>
            $(document).ready(function () {
                alertify.confirm('{{session("message")}}');
            })
        </script>
    @endif

    @if(session('error'))
        <script>
            $(document).ready(function () {
                alertify.confirm('<span style="color:red;">{{session("error")}}</span>');
            })
        </script>
    @endif
@endsection