@extends('layout.basic.main')
@section('title','友だち情報管理（情報一覧）')

@push('css')
    <link rel="stylesheet" href="/css/friendlist/style_info.css?v={{config("sns-line.version")}}">
    <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.15.4/css/all.css" integrity="sha384-rqn26AG5Pj86AF4SO72RK5fyefcQ/x32DNQfChxWvbXIyXFePlEktwD18fEz+kQU" crossorigin="anonymous">

    <style>
        #table_list_template tr th{
            padding: 11px;
        }
        .tmp td .btn {
            width: 80%;
        }
        .tab_folder{
            padding: 12px;
            font-size: 18px;
            display: flex;
            align-items: baseline;
            justify-content: space-between;
        }
        .btn-group:hover .action-broadcast{
            opacity: 1;
            visibility: visible;
            z-index: 100;
            display: block;
        }
        .tag_group.active{
            background-color: #f6f6f6 !important;
        }
        .modal-content input[type="submit"], .tag_right .btngroup .tag_right_search input[type="submit"] {
            width: 30%;
            background: #eee;
            border: 1px solid #eee;
            padding: 5px 10px;
            display: inline-block;
            height: 40px;
        }

        .modal-content input[type="text"], .tag_right .btngroup .tag_right_search input[type="text"] {
            width: 70%;
            height: 40px;
        }

        .btn-new-group{
            background-color: #0ebeeb !important;
        }
        #information_friend_item table th{
            background: rgba(8,191,90,1) !important;
        }
        .list-i-fol{
            padding: unset;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
        .fade {
            transform: unset !important;
            animation: unset !important;
        }
        .fade.in {
            transform: unset !important;
            animation: unset !important;
        }
        .modal-content {
            -webkit-animation-name: unset !important;
            -webkit-animation-duration: 0.6s;
            animation-name: unset !important; ;
            animation-duration: unset !important;
        }
        .modal.fade .modal-dialog {
            -webkit-transition: unset !important;
            -o-transition: -unset !important;
            transition: unset !important;
            -webkit-transform:unset !important;
            -ms-transform: unset !important;
            -o-transform: unset !important;
            transform: unset !important;
        }

        .btn-top-group{
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .btn-top-group button{
            width: 150px;
            color: white;

        }
        tbody>tr:first-child>td{
            border-top: none !important;
        }
        div, a, button{
            font-weight: bold !important;
        }

    </style>
@endpush
@section('content')
    <article class="">
        <div id="loading_overlay" class="loading-overlay text-center" style="display: none">
            <i class="glyphicon glyphicon-refresh spin"></i>
        </div>
        <section class="taglist tmp" id="information_friend_item" v-cloak>
            <h2 style="font-size: 20px; color: #51595c; font-weight: bold; padding: 10px 10px 10px 0">情報一覧</h2>


            <div class="">
                <div class="" style=" margin-top: 10px;">
                    <div class="btn-top-group">
                        <div style="display: flex;align-items: center">

                            <div style="height: 34px;width: 100px;background-color: rgb(125, 145, 149);color: #FFFFFF;    border-radius: 4px;
    text-align: center;
    padding-top: 7px;">
                                情報
                            </div>
                            <span style="font-size: 16px; color: rgba(81,89,92,1); margin-left: 3px">@{{ settingInfoTitle }}</span>
                        </div>

                        <div>
                            <a class="btn btn-secondary" style="background-color: rgba(125,145,149,1) ; color: #FFFFFF"
                               v-on:click="exportCsv()">CSV書き出し</a>
                            <button class="btn btn-secondary"
                                    v-bind:class="(selected.length ==0)?'disabled':''"
                                    style="background-color: #F44336 " v-on:click="deleteInfoFriend()">一括削除</button>

                        </div>
                    </div>
                    <table id="table_list_template" class="table">

                        <tr>
                            <th class="checkth" style="width: 5%">
                                <input type="checkbox" name="" value="" v-model="selectAll">

                            </th>
                            <th style="width:300px">友だち名</th>
                            <th class="text-left" >情報</th>


                        </tr>
                        <tbody style="border-top: none">
                        <tr v-if="items.length > 0" v-for="(item, index) in items">
                            <td>
                                <input type="checkbox" name="check_item[]" :value="item.line_id" v-model="selected">
                            </td>
                            <td >
                                <a :href="'/basic/friendlist/my_page/'+item.line_id">@{{ item.name }}</a>
                            </td>
                            <td class="text-left" >
                                <span v-if="idItem == 'd_1'">
                                     @{{ item.view_name }}
                                </span>
                                <span v-if="idItem == 'd_2'">
                                    @{{ item.phone_number }}
                                </span>
                                <span v-if="idItem == 'd_3'">
                                    @{{ item.email }}
                                </span>
                                <span  v-if="idItem == 'd_4'">
                                    @{{ item.birthday }}
                                </span>
                                <span  v-if="idItem == 'd_5'">
                                    @{{ item.age }}
                                </span>
                                <span  v-if="idItem == 'd_6' || idItem == '-6'">
                                    @{{ item.province }}
                                </span>
                                <span v-else-if="dataType == 4">
                                     <img v-if="checkTypefile(item.value)"  :src="(item.value.startsWith('http') ? '' : '