@extends('layout.basic.main')
@section('title', 'ホーム')
@push('css')
    <link rel="stylesheet" href="{{asset('/css/friendlist/style.css')}}?v={{config('sns-line.version')}}">
    <link rel="stylesheet" href="/css/basic_home/style.css?v={{config('sns-line.version')}}">
    <style>
        .label-media{
            width: 80px;
        }
        .media-right.carousel{
            width: 300px;
        }
        .media-right.carousel .button-action:first-child{
            border-bottom:none;
        }
        #talk_list table .media-right{
            width: 350px!important;
            padding: 10px;
            border-radius: 5px;
        }

        ul.nav {
            /*margin-bottom: 0px;*/
        }

        .btngroup .btn {
            width: 100%;
        }

        #dataTables_filter {
            text-align: right;
            display: none;
        }

        label:after {
            content: '';
        }

        .input-sm {
            line-height: 1.5 !important;
        }

        div.dataTables_paginate {
            margin: 0;
            white-space: nowrap;
            text-align: right;
        }

        div.dataTables_paginate ul.pagination {
            margin: 2px 0;
            white-space: nowrap;
        }
        .right-c{
            text-align: right !important;
            padding-right: 6% !important
        }
        @media (min-width: 1024px) {
            .right-c{
                padding-right: 2% !important;
            }

        }
        @media (min-width: 1440px) {
            .right-c{
                padding-right: 6% !important;
            }

        }
        .label-color-1{
            color:white;
            background-color:rgba(244,67,54,1);
        }
        .label-color-2{
            color:white;
            background-color:rgba(254,186,0,1);
        }
        .label-color-3{
            color:white;
            background-color:rgba(87,153,219,1);
        }
        .label-color-4{
            color:white;
            background-color:rgba(8,191,90,1);
        }
        .label-color-5{
            color: white;
            background-color: rgba(125, 145, 149, 1);
        }

        .label-color-null {
            color: black !important;
        }

        .label-color- {
            color: black !important;
        }

        #friend_table thead tr th {
            padding: 10px !important;
            font-weight: bold;
            background-color: #08BF5A !important;
            border: none;
        }

        #friend_table tbody tr td {
            border: none;
            border-bottom: 1px solid #F4F6F7;
        }

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

        .ht8_change_overview {
            display: flex;
            align-items: center;
            column-gap: 15px;
        }

        .ht8_change_overview .btn {
            margin-bottom: 0 !important;
        }

        .ht8_change_separate .friendday {
            margin-right: 30px !important;
        }

        .ht8_change_separate .mark {
            margin-right: 0 !important;
            background-color: unset !important;
        }

        .ht8_change_separate #number_msg_by_kind {
            padding: 20px;
            min-height: 300px;
            background-color: #F6F6F6;
        }

        .ht8_change_separate #number_msg_by_kind li {
            background: white;
        }

        .ht8_change_separate #number_msg_by_kind li .label-status {
            width: 70%;
            padding: 6px 5px !important;
        }

        .update-info-headline {
            padding-left: 0 !important;
            margin-left: 15px;
            border-style: solid;
            display: grid !important;
            grid-template-columns: 130px auto;
        }

        .i-frame-wrapper .headline {
            height: auto;
        }

        .update-info-day {
            margin-right: 20px;
        }

        #number_msg_by_kind {
            border: none;
        }

        .homecontents * {
            font-weight: bold;
        }

        .update-info-list a,
        .update-info-day {
            font-size: 14px;
        }

        .ht8_change_separate {
            flex-direction: column;
        }

        .ht8__change-noti-header {
            display: grid;
            grid-template-columns: 130px auto;
            align-items: center;
            background-color: #7D9195;
            padding: 6px 15px;
            color: white;
            border-top-left-radius: 5px;
            border-top-right-radius: 5px;
        }

        .ht8__change-noti-header * {
            font-size: 14px;
            padding-top: 4px;
        }

        .h-item__left {
            margin-right: 20px;
            text-align: center;
        }

        .ht8__change-mk-new {
            background-color: #FEBA00;
            text-align: center;
            color: white;
            border-radius: 2px;
            margin-right: 5px;
            padding: 0 8px;
            font-weight: bold;
            line-height: 20px;
            font-size: 11px;
        }

        .ht0609__noti * {
            font-family: Arial, "Open Sans", "Helvetica Neue", Helvetica, Verdana, Roboto, "游ゴシック", "Yu Gothic", "游ゴシック体", "YuGothic", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Meiryo UI", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif !important;
        }

        
        .loading_1 {
        display: flex;
        justify-content: center;
        }
        .loading_1 div {
        width: 1rem;
        height: 1rem;
        margin: 2rem 0.3rem;
        background: #979fd0;
        border-radius: 50%;
        -webkit-animation: 0.9s bounce infinite alternate;
                animation: 0.9s bounce infinite alternate;
        }
        .loading_1 div:nth-child(2) {
        -webkit-animation-delay: 0.3s;
                animation-delay: 0.3s;
        }
        .loading_1 div:nth-child(3) {
        -webkit-animation-delay: 0.6s;
                animation-delay: 0.6s;
        }

        @-webkit-keyframes bounce {
        to {
            opacity: 0.3;
            transform: translate3d(0, -1rem, 0);
        }
        }

        @keyframes bounce {
        to {
            opacity: 0.3;
            transform: translate3d(0, -1rem, 0);
        }
        }
    </style>
@endpush
@section('content')
    <article class="top">
        <section class="homecontents">
            <h2 class="diff"
                style="font-size: 25px; color: #222222; font-weight: bold; padding: 10px 10px 10px 0; margin-bottom: 0">
                ホーム</h2>
            @if(count($notifications))
                <div>
                    <h3 class="mt0 mb5" style="border-bottom: none;font-size: 18px">お知らせ</h3>
                    <div style="padding: 20px;background-color: #F6F6F6; width: 70%" class="ht0609__noti">
                        <div class="ht8__change-noti-header">
                            <div class="h-item__left">投稿日</div>
                            <div class="h-item__right">お知らせ内容</div>
                        </div>
                        <div class="i-frame-wrapper w100per va-b" style="height: 154px; border: none">
                            <div class="headline" style="background-color: white">
                                @foreach($notifications as $k=>$v)
                                    <div class="update-info-headline xs-f10"
                                         style="margin-right: 20px;display: flex; align-items: center; flex-direction: row">
                                        {{-- 投稿日 = ngày phát hành đã hẹn (display_date) để khớp với 投稿日時 bên màn đăng ký thông báo --}}
                                        <span class="update-info-day">{{ \Carbon\Carbon::parse($v->display_date ?: $v->created_at)->format('Y年m月d日') }}</span>
                                        <span class="update-info-list" style="display: flex;">
                                            @if($v->display_market_new == 1)
                                                <div class="ht8__change-mk-new">NEW</div>
                                            @endif
                                            <a style="text-decoration: underline"
                                               href="{{ $v->url }}"
                                               target="_blank">{!! $v->title !!}</a>
                                        </span>
                                    </div>
                                @endforeach
                            </div>
                        </div>
                    </div>
                </div>
            @endif
            <div class="separate ht8_change_separate">
                <section class="friendday">
                    <div style="display: flex; align-items:center; justify-content: space-between">
                        <h3 style="border-bottom: 0; font-size: 18px">友だち数推移</h3>
                        <div class="ht8_change_overview">
                            <a href="{{ route('basic.overview.chart') }}" class="btn btn-sns-line btn-sns-line-primary">
                                <span>グラフ表示</span>
                                <svg xmlns="http://www.w3.org/2000/svg" width="21.372" height="16.029"
                                     viewBox="0 0 21.372 16.029">
                                    <path id="Icon_awesome-chart-line" data-name="Icon awesome-chart-line"
                                          d="M20.7,17.857H2.671V5.168A.668.668,0,0,0,2,4.5H.668A.668.668,0,0,0,0,5.168V19.193a1.336,1.336,0,0,0,1.336,1.336H20.7a.668.668,0,0,0,.668-.668V18.525A.668.668,0,0,0,20.7,17.857ZM19.368,5.836H14.44a1,1,0,0,0-.708,1.71L15.084,8.9l-3.063,3.063L8.959,8.9a1.335,1.335,0,0,0-1.889,0L4.2,11.766a.668.668,0,0,0,0,.945l.944.944a.668.668,0,0,0,.945,0l1.923-1.923,3.063,3.063a1.335,1.335,0,0,0,1.889,0l4.007-4.007,1.352,1.352a1,1,0,0,0,1.71-.708V6.5A.667.667,0,0,0,19.368,5.836Z"
                                          transform="translate(0 -4.5)" fill="#fff"/>
                                </svg>
                            </a>
                            <a href="{{route('friendHistory')}}" class="btn btn-sns-line btn-sns-line-secondary">
                                <span>詳細表示</span>
                                <i class="fas fa-chevron-right"></i>
                            </a>
                        </div>
                    </div>
                    <table id="friend_table" class="table table-responsive table-hover table-striped" v-cloak>
                        <thead>
                        <tr>
                            <th style="border-top-left-radius: 5px; border-bottom-left-radius: 5px; text-align: left!important; padding-left: 30px!important;">
                                日付
                            </th>
                            <th style="min-width: 130px;">友だち追加数</th>
                            <th style="width: 15%;">ブロック数</th>
                            <th style="width: 12%;">前日比</th>
                            <th style="width: 15%;">有効友だち数</th>
                            <th style="width: 15%; border-top-right-radius: 5px; border-bottom-right-radius: 5px">
                                友だち追加総数
                            </th>
                        </tr>
                        </thead>
                        <tbody v-if="dates">
                                <tr v-for="(date,key) in dates">
                                    <td style="padding-left: 30px; text-align: left!important;">
                                        @{{ formatDateFlDay(key) }}
                                    </td>
                                    <td>
                                        <a style="text-decoration: underline"
                                           :href="'/basic/friendlist?followed_from='+ moment(key).format('YYYY-MM-DD') +'&followed_to='+moment(key).format('YYYY-MM-DD')">
                                            @{{ date.followed }}
                                        </a>
                                    </td>
                                    <td>
                                        <a style="text-decoration: underline"
                                           :href="'/basic/overview/friendlist/view-date?date='+moment(key).format('YYYY-MM-DD')+'&tab=2'">@{{ date.blocked }}</a>
                                    </td>
                                    <td>
                                        <div class="before_day">
                                            <div style="font-family: initial; display: inline;margin-right: -2px;">
                                                @{{ (date.followed - date.blocked) > 0 ? '+' : ''}}
                                            </div>
                                            @{{ date.followed - date.blocked }}
                                        </div>
                                    </td>
                                    <td>
                                        @{{ date.active_friend }}
                                    </td>
                                    <td>
                                        @{{ date.total_friend }}
                                    </td>
                                </tr>
                        </tbody>
                        <tbody v-else>
                            <tr>
                                <td colspan="6">データはありません。</td>
                            </tr>
                        </tbody>
                        <tbody v-if="showLoading">
                            <tr>
                                <td colspan="6">
                                    <div class="loading_1">
                                        <div></div>
                                        <div></div>
                                        <div></div>
                                    </div>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </section>
                <p>※タイムラグが発生しLINE OFFICIAL ACCOUNT MANAGERの表示数と異なる可能性があります</p>
                <section class="mark">
                    <h3 style="border-bottom: 0; margin-bottom: 28px!important;font-size: 18px">対応ステータス別人数</h3>
                    <ul id="number_msg_by_kind" v-cloak v-show="display">
                        <li v-for="item in arraySorted" v-if='items && items["number_status_"+item.k] !=0'>
                            <label for="" class="label-status label-status-msg ble label"
                                   :class="'label-'+item.class">@{{ item.text }}</label>
                            <span>
                                <a style="text-decoration: underline"
                                   :href="'/basic/friendlist?status_search='+item.k">
                                    @{{ items["number_status_"+item.k] }}</a>
                            </span>
                        </li>
                        <li v-for="item in statusList" v-if='item.count !=0'>
                            <label for="" class="label-status label-status-msg ble label"
                                   v-bind:style="'background:'+ item.bg_status + ';color:' + item.color "
                            >@{{ item.name_status }}</label>
                            <span>
                                <a style="text-decoration: underline"
                                   :href="'/basic/friendlist?status_search='+item.id">
                                    @{{ item.count }}</a>
                            </span>
                        </li>
                    </ul>
                </section>
            </div>
        </section>
    </article>
    <div class="modal-overlay" style="display: none;"></div>

@endsection
@push('js')
    <script src="/plugins/vuejs/vue-resource@1.3.4.js"></script>
    <script src="/js/basic_home/script.js?v={{config('sns-line.version')}}"></script>
@endpush