@extends('layout.basic.main')
@section('title', 'ホーム（友だち数推移詳細）')
@push('css')
    <link rel="stylesheet" href="{{asset('/css/friendlist/style.css')}}">
    <style>
        .sub-top-one{
            padding: 10px;
            color: #fff;
            font-weight: bold;
            background: #dd4b39;
            font-size: 18px !important;
        }
        .friend-follow {
            background: #eee;
            display: inline-block;
            margin: 0 10px;
            border-radius: 5px;
            -webkit-border-radius: 5px;
            -moz-border-radius: 5px;
            padding: 0 10px;
            border: 1px solid #ccc;
        }
        main{
            padding: 0;
        }
        thead tr th {
            padding: 10px !important;
            font-weight: bold;
            background-color: #08BF5A !important;
            border: 1px solid;
        }


        .table-bordered th {
            background-color: #08BF5A !important;
        }

        #app-history-h8 * {
            font-weight: bold;
        }

        #friend_table th,
        #friend_table td {
            border: unset;
        }

        #friend_table tbody tr {
            border-bottom: 1px solid #F4F6F7;
        }
    </style>
@endpush
@section('content')
    <article>
        <section class="homecontents" id="app-history-h8" v-cloak>
            <section class="friendday">
                <div style="display: flex; align-items: center; justify-content: space-between">
                    <div style="display: flex; align-items: center">
                        <h3 style="font-size: 20px; color: #222222; font-weight: bold; padding: 10px 10px 10px 0;">
                            友だち数推移</h3>
                        <button class="btn btn-sns-line btn-sns-line-dark" style="margin-bottom: 0!important;"
                                @click="exportCsv">
                            <img src="/images/output-csv-ic.png" style="width: 17px; padding-bottom: 2px">
                            CSV書出し
                        </button>
                    </div>
                    <div>
                        <form style="display: flex; align-items: center">
                            <div style="margin-right: 5px; font-weight: bold">表示期間</div>
                            <div style="position:relative;">
                                <i class="fa fa-calendar" aria-hidden="true"
                                   style="position: absolute;top: 9px;left: 6px;"></i>
                                <input type="text" class="datetimepicker" name="start_date" readonly
                                       style="padding: 0 0 0 23px; font-weight: bold" v-model="start_date">
                            </div>
                            <div style="margin: 0 5px; font-weight: bold">から</div>
                            <div style="position:relative;">
                                <i class="fa fa-calendar" aria-hidden="true"
                                   style="position: absolute;top: 9px;left: 6px;"></i>
                                <input type="text" class="datetimepicker" name="end_date" readonly
                                       style="padding: 0 0 0 23px; font-weight: bold" v-model="end_date">
                            </div>
                            <input type="hidden" name="only_new_friend">
                            <input type="hidden" name="only_old_friend">
                        </form>
                    </div>
                </div>
                <p>※タイムラグが発生しLINE OFFICIAL ACCOUNT MANAGERの表示数と異なる可能性があります</p>
                <input type="hidden" id="total_following" value="{{$get_friend_following}}">
                <table id="friend_table">
                    <thead>
                    <tr>
                        <th style="padding-left: 20px !important; text-align: left!important; width: 20%;border-top-left-radius: 5px; border-bottom-left-radius: 5px;">
                            日付
                        </th>
                        <th style="width: 16%">友だち追加数</th>
                        <th style="width: 16%">ブロック数</th>
                        <th style="width: 16%">前日比</th>
                        <th style="width: 16%">有効友だち数</th>
                        <th style="width: 16%;border-top-right-radius: 5px; border-bottom-right-radius: 5px">友だち追加総数
                        </th>
                    </tr>
                    </thead>
                    <tbody>
                    
                    <tr v-for="item in list_report">
                        <td style="padding-left: 20px; text-align: left!important;">
                            <span>@{{dateContextJp(item.date) }}</span>
                        </td>
                        <td>
                            <a style="text-decoration: underline"
                               :href="`/basic/overview/friendlist/view-date?date=${item.date}`">@{{ item.followed }}</a>
                        </td>
                        <td>
                            <a style="text-decoration: underline"
                               :href="`/basic/overview/friendlist/view-date?date=${item.date}&tab=2`">@{{ item.blocked
                                }}</a>
                        </td>
                        <td>
                            <div class="before_day">
                                <div style="font-family: initial; display: inline;margin-right: -2px;">
                                    @{{ (item.followed - item.blocked) > 0 ? '+' : ''}}
                                </div>
                                @{{ item.followed - item.blocked }}
                            </div>
                        </td>
                        <td>
                            <span>@{{ item.active_friend > 0 ?  item.active_friend : 0 }}</span>
                        </td>
                        <td>
                            <span>@{{ item.total_friend }}</span>
                        </td>
                    </tr>
                    </tbody>
                </table>
                <div style="display: flex; margin-left: 20px">
                    <a href="{{ url()->previous() }}" class="btn btn-sns-line btn-sns-line-secondary"
                       style="width: 110px;">
                        <span>戻る</span>
                    </a>
                </div>
            </section>
        </section>
    </article>
    @push('js')
        <script src="/js/axios.min.js"></script>
        <script src="/plugins/moment/moment-locales.min.js"></script>
        <script src="/js/form_answer/jquery.ui.datepicker-ja.js"></script>
        <script>
            var active_friend = parseInt($("#total_following").val());
            var before_day = 0;
            $('#friend_table tbody tr').each(function (i, row) {
                var $row = $(row);
                before_day = parseInt($row.closest('tr').find('.before_day').text());

                $row.closest('tr').find('.active_friend').text(active_friend);
                active_friend -= before_day;
            });

            $(function () {
                $.datepicker.setDefaults($.datepicker.regional["ja"]);
                $('.datetimepicker').datepicker({
                    dateFormat: "yy-mm-dd",
                    theme: 'dark',
                }).on('change', function (e) {
                    var name = e.target.name;
                    var date = e.target.value;
                    if (name == 'start_date') {
                        appHistory.start_date = date;
                    } else {
                        appHistory.end_date = date;
                    }
                    $.LoadingOverlay('show');
                    appHistory.init();
                });
            });
            const appHistory = new Vue({
                el: '#app-history-h8',
                data: {
                    start_date: `{{ $startDate }}`,
                    end_date: `{{ $endDate }}`,
                    list_report: []
                },
                created: function () {
                    this.init();
                },
                methods: {
                    init: function () {
                        let self = this;
                        $.LoadingOverlay('show');
                        axios.post('{{ route('ajax.init_data_history_add_friend') }}', {
                            data: JSON.stringify({start: self.start_date, end: self.end_date})
                        },
                        {
                        }
                    ).then(response => {
                            console.log(response);
                            self.list_report = [];
                            self.start_date = response.data.start;
                            self.end_date = response.data.end;
                            if (response.data.result) {
                                for (const item in response.data.result) {
                                    self.list_report.push({
                                        date: item,
                                        followed: response.data.result[item].followed,
                                        blocked: response.data.result[item].blocked,
                                        total_friend: response.data.result[item].total_friend,
                                        active_friend: response.data.result[item].active_friend,
                                    })
                                }
                            }
                            $.LoadingOverlay('hide');
                        }).catch(err => {
                            $.LoadingOverlay('hide');
                            console.log(error)
                        });
                        $.LoadingOverlay('hide');
                    },
                    dateContextJp: function (date) {
                        moment.locale('ja');
                        return moment(date).format('YYYY年M月D日（ddd）');
                    },
                    exportCsv: function () {
                        let self = this;
                        axios.post('{{ route('ajax.export_csv_history_add_friend') }}', {
                            data: self.list_report
                        }).then(response => {
                            if (response.data.file) {
                                let file = response.data.file;
                                var a = document.createElement("a");
                                a.setAttribute('href', file);
                                a.setAttribute('download', '');
                                a.setAttribute('target', '_blank');
                                a.click();
                            }
                        }).catch(err => {
                            console.log(err)
                        });
                    }
                },
            })
        </script>
    @endpush
@endsection