@extends('layout.basic.main')
@push('css')
    <link rel="stylesheet" href="/css/friendlist/style.css?v={{config("sns-line.version")}}">

    <style>
        td, th {
            text-align: left !important;
            vertical-align: middle !important;
        }

        h5 {
            padding: 10px
        }

        .btn button {
            width: 100%;
        }

        .btn button {
            display: block;
            border-radius: 5px;
            -webkit-border-radius: 5px;
            -moz-border-radius: 5px;
            padding: 5px 10px;
            background: #4A96B2;
            color: #fff;
            margin-top: 5px;
            border: 0;
        }

        .choice_detail {
            height: 200px;
            overflow-y: scroll;
        }

        .grn {
            background-color: #79c351 !important;
        }

        .pagejump input {
            width: 25%;
            margin-right: 5px;
        }

        .text-center {
            text-align: center !important;
        }

        .modal-backdrop.in {
            filter: alpha(opacity=50);
            opacity: .5;
        }

        .modal-backdrop {
            position: fixed;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            z-index: 1040;
            background-color: #000;
        }

        .modal-backdrop.in {
            display: block !important;
        }

        .modal-content {
            padding: 20px;
        }

        .modal_message {
            border: 5px solid #ccc;
            padding: 3px;
        }

        .modal_message .inner {
            background: #fff;
            border-radius: 5px;
            -webkit-border-radius: 5px;
            -moz-border-radius: 5px;
            padding: 10px;
        }

        .inner p {
            margin: 0px;
        }

        .quicksend {
            margin-top: 20px;
        }

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

        .modal-content input[type="submit"], .modal-content input[type="button"], .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;
        }

        #modalReview .pull-right {
            width: 30%;
            margin: 10px 0 !important;
        }

        #quick_reply[disabled] {
            cursor: not-allowed !important;
        }

        p.name {
            margin-bottom: 10px;
            font-size: 20px;
            font-weight: bold;
        }

        .vertical-align-middle {
            vertical-align: middle;
        }

        i.glyphicon-folder-open {
            color: #f0ad4e !important;
        }

        .tem_choice li, a.collapsed:hover {
            cursor: pointer;
        }

        .checkbox input[type=checkbox] {
            margin-top: 7px;
        }

        tr.is_checked td {
            background-color: #f0ad4e;
        }

        span.glyphicon-chevron-up, .glyphicon-chevron-down {
            text-align: center;
        }

        .separate_mypage2_left > .btn a {
            padding: 5px 20px;
        }

        .nano {
            overflow: visible;
        }

        .nano-inner {
            overflow-y: scroll;
            height: 320px;
        }

        #detailtagselector .nano-pane {
            display: none !important;
        }

        div:focus, div:visited {
            outline: none !important;
        }

        .tem_choice > ul {
            height: 200px;
            overflow-y: scroll !important;
            overflow-x: hidden;
        }

        .label-media {
            width: 100px;
        }

        .media-body {
            width: 40%;
        }

        td .question_wap, td .location-wrapper, td .buttons-wrapper, td .introduction-wrapper {
            width: 50%;
        }

        #modalReview .message .question_wap {
            border-radius: 5px;
            width: 50%;
            margin-left: 15%;
            background: #fff;
        }

        #modalReview .question_title {
            border-bottom: 1px solid #ccc;
            padding: 10px !important;
            overflow: hidden;
            word-break: break-all;
            text-align: center;
        }

        #modalReview .answer_question {
            height: 40px;
        }

        #modalReview .message {
            border: 1px solid black;
            padding: 0;
            background-color: #cccccc;
        }

        .alert-tag {
            margin-bottom: 40px;
            display: flow-root;
            font-weight: 600 !important;
        }

        .alert-text {
            text-align: right;
            color: red;
            font-size: 16px;
        }

        .alert-text .text-seconds {
            font-size: 15px;
        }

        .alert-text .text-first {
            margin-right: 30px;
            font-size: 15px;
        }

    </style>
    <link rel="stylesheet" href="/css/friendlist/table.css?v={{config("sns-line.version")}}">
@endpush
@section('content')
    <article class="">
        <section class="friendlist_mypage">
            <h2 style="font-size: 20px; color: #222222; font-weight: bold; padding: 10px 10px 10px 0;">友だち詳細</h2>

            <div class="separate_mypage">
                <div class="separate_mypage_left">
                    <div class="imgblc" id="user-info" v-cloak>

                        <img src="{{$line_info['avatar_url']}}" alt="">
                        <p class="">
                        <div style="display: flex; justify-content: center">
                            <div class="btn" style="padding: 6px 0; font-size: 12px">
                                @if($line_info['is_blocked'] == 1 && $conversation['blocked_by'] == 1)
                                <a href="javascript:unBlock({{Request::route('line_id')}})" class="red">ブロック解除</a>
                                    @else
                                    <a href="javascript:block({{Request::route('line_id')}})" class="red">ブロック</a>
                                   @endif
                            </div>
                            <div class="btn" style="padding: 6px 3px;">
                                <a href="javascript:deleteLineUser({{Request::route('line_id')}})" class="btn btn-default" style="background-color: #777777; padding: 6px 33px; font-size: 12px">削除</a>
                            </div>
                        </div>

                        {{--<div style="padding: 10px 10px;margin-top: 5px"  class="label-status label-status-msg ble label" v-bind:class="'label-'+ sttClass">ブロック</div>--}}
{{--                        <div class="btn" style="cursor:default">--}}
{{--                            <span href="javascript:void(0)" style="padding: 9px 10px;margin-top: 5px;border-radius: 5px"--}}
{{--                                  class="label-status label-status-msg  label" v-bind:class="'label-'+ sttClass"></span>--}}
{{--                        </div>--}}
                        </p>
                    </div>
                    <div class="txtblc">

                        <p class="tourokumei">LINE登録名:{{$line_info['name_display']}}</p>
                        <p>{{(!empty($line_info['view_name']))?'表示名：'.$line_info['view_name']:''}}</p>
                        {{--                            <small>--}}
                        {{--                                <p class="has_emoji text-center"--}}
                        {{--                                   style="background-color: #f0f0f0;font-weight: 400">{{($line_info['status_message'])}}</p>--}}
                        {{--                            </small>--}}
                    </div>
                </div>
                <div class="separate_mypage_right">

                    <ul class="nav nav-pills" style="margin-left: 100px;">
                        <li class="active"><a data-toggle="pill" href="#menu1">概要・配信状況</a></li>
                        <li><a data-toggle="pill" href="#menu2">配信状況詳細操作</a></li>
                        <li><a data-toggle="pill" href="#menu3">情報設定</a></li>
                        <li><a data-toggle="pill" href="#menu4">タグ</a></li>
                        <li><a data-toggle="pill" href="#menu5">その他</a></li>
                    </ul>

                    <div class="tab-content">
                        <div id="menu1" class="tab-pane fade in active">
                            <table class="table">
                                <tr>
                                    <td>購読中のステップ</td>
                                    <td>
                                        @if(is_null($line_info['running']))
                                            停止中
                                        @else
                                            　




                                            {{$line_info['running']['name']}}
                                            (開始時間　{{$line_info['running']['start_datetime']}})
                                            <span class="btn">
                                            <a href="{{route('stepMessage.listMessage',['scenario'=>$line_info['running']['scenario_id']])}}"
                                               target="_blank" class="gry">表示</a>
                                            </span>
                                        @endif
                                    </td>
                                </tr>
                                @if(empty($next_scenario))
                                @else
                                    <tr>
                                        <td>
                                            次のメッセージ

                                        </td>
                                        <td>