@extends('layout.basic.main')
@push('css')
    <link rel="stylesheet" href="/css/friendlist/style.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>
        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;
        }

        .focus-pointer {
            cursor: pointer;
            margin-bottom: 5px;
            font-size: 12px;
        }

        .focus-pointer:hover {
            color: rgb(0, 160, 234) !important;;
        }

        .action-my-page {
            position: absolute;
            opacity: 0;
            visibility: hidden;
            transition: 0.5s;
            z-index: 0;
            display: none;
        }

        .btn-group:hover .action-my-page {
            opacity: 1;
            visibility: visible;
            z-index: 100;
            display: block;
        }

        #tab-menu-mypage li.active a {
            color: #2C2C2C !important;
            background: white !important;
            border-top: 10px solid rgba(8, 191, 90, 1) !important;
            border-radius: 5px 5px 0 0;
            border-left: 1px solid rgba(125, 145, 149, 1);
            border-right: 1px solid rgba(125, 145, 149, 1);
        }

        #tab-menu-mypage .tab-menu-sub:hover {
            background: rgb(118, 132, 135);
            border-top: 10px solid rgb(118, 132, 135);
            border-bottom: unset;
            border-left: 1px solid rgb(118, 132, 135);
            border-right: 1px solid rgb(118, 132, 135);
        }

        #tab-menu-mypage .tab-menu-sub {
            color: white;
            cursor: pointer;
            text-align: center;
            height: 36px;
            border-radius: 5px 5px 0 0;
            border-top: 10px solid rgba(125, 145, 149, 1);
            padding: 0;
        }

        #my-page-user li {
            border-radius: 5px 5px 0 0;
        }

        #my-page-user .tab-main-menu li.select {
            background-color: rgba(8, 191, 90, 1);
            color: white;
        }

        #my-page-user .tab-main-menu li {
            width: 130px;
            padding: 8px 10px;
            margin-right: 8px;
            border-radius: 5px;
            background-color: white;
            cursor: pointer;
            border: 2px solid rgba(8, 191, 90, 1);
            color: rgba(8, 191, 90, 1);
        }

        #my-page-user .title_regis {
            padding: 5px 20px;
            margin-bottom: 10px;
            font-size: 15px;
            font-weight: 600;
            position: relative;
        }

        #my-page-user .title_regis:before {
            content: "";
            display: block;
            position: absolute;
            height: 100%;
            width: 10px;
            background-color: rgba(8, 191, 90, 1);
            left: 0;
            top: 0;
        }

        #my-page-user .title-info-basic {
            display: inline-block;
            color: white;
            background: rgba(125, 145, 149, 1);
            text-align: center;
            padding: 10px;
            height: 42px;
            width: 200px;
            border-radius: 4px;
        }

        #my-page-user .content-info-basic {
            display: inline-block;
            text-align: left;
            background: rgba(242, 242, 242, 1);
            margin-left: 15px;
            padding: 10px;
            width: calc(100% - 215px);
            border-radius: 4px;
        }

        #my-page-user .active_category_tag {
            background: rgba(176,194,198,1);
        }

        #my-page-user .active_category_tag .name-folder-tag {
            color: #FFFFFF;
        }

        #my-page-user .content-info-cus {
            display: inline-block;
            text-align: left;
            margin-left: 15px;
            width: calc(100% - 215px);
            border-radius: 4px;
        }
        #my-page-user .content-info-cus .title-bg {
            background: rgba(242, 242, 242, 1);
            padding: 10px;
            border-radius: 4px;
            height: 42px;
            overflow: hidden;
            display: block;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        #my-page-user .content-info-cus .h-input {
            height: 40px;
            margin-top: 2px;
        }
        .fade.in {
            transform: scaleY(.01) scaleX(0);
            animation: unfoldIn cubic-bezier(.165, .84, .44, 1) forwards !important;
        }

        .table-my-page th {
            background: rgba(125,145,149,1) !important;
            text-align: center !important;
            vertical-align: middle !important;
        }

        .table-my-page td {
            background: unset;
        }

        .table-my-page td .btn {
            padding: 4px !important;
            width: 90px;
        }
        .cus-file{
            padding: 5px;
            background: #5799db;
            color: #fff;
            width: 50px;
            font-size: 14px;
            text-align: center;
            border-radius: 5px;
            margin-left: 10px;
            margin-right: 10px;
        }

        .cus-file input[type="file"] {
            display: none;
        }
        #tab-menu-mypage .input-cal{
            padding-left: 30px;
            border-radius: 5px;
            height: 40px;
            width: 200px;
        }
        #tab-menu-mypage .ic-cal-ip{
            position: absolute;
            left: 8px;
            top: 9px;
            color: rgba(190,190,190,1);
        }
        #tab-menu-mypage  select {
            appearance: auto!important;
        }

        #Icon_feather-edit-my-page {
            fill: transparent;
            stroke: rgb(245 248 249);
            stroke-width: 2px;
            stroke-linejoin: round;
            stroke-linecap: round;
            stroke-miterlimit: 4;
            shape-rendering: auto;
        }

        #my-page-user i {
            color: rgba(137,143,144,1) !important;
            cursor: pointer;
        }

        #my-page-user .icon-setting i {
            font-size: 18px;
        }

        .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;
            transition: unset !important;
            -webkit-transform:unset !important;
            -ms-transform: unset !important;
            -o-transform: unset !important;
            transform: unset !important;
        }

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

        #my-page-user .table td {
            background: #FFFFFF !important;
            border-bottom: 1px solid #CDD6DD !important;
            border-left: unset !important;
            border-right: unset !important;
            border-top: unset;
        }

        #my-page-user .table th {
            font-weight: 600;
            border: unset;
        }

        #my-page-user .icon-setting:hover {
            background-color: #7D9195;
            color: #FFFFFF !important;
        }

        #my-page-user .icon-setting:hover i {
            color: #FFFFFF !important;
        }

        #my-page-user .icon-setting {
            width: 33px;
            padding: 2px 9px 7px 9px;
            border-radius: 4px;
            font-size: 20px;
        }

    </style>
    <link rel="stylesheet" href="/css/friendlist/table.css?v={{config("sns-line.version")}}">
@endpush
@section('content')
    <article id="my-page-user" style="font-size: 14px">
        <section class="friendlist_mypage">
            <h2 style="font-size: 20px; color: #2C2C2C; font-weight: bold; padding: 10px 10px 10px 0;">友だち情報詳細</h2>
            <div class="main-info-friend" style="background: rgba(246,246,246,1); padding: 12px 30px">
                <div class="imgblc" id="user-info" style="display: flex;justify-content : space-between;align-items: center;vertical-align: middle">

                    <img src="{{ $line_info['avatar_url'] ? $line_info['avatar_url'] : '/images/blank_avatar.png'}}" onerror="this.onerror=null;this.src='/images/blank_avatar.png'" alt=""
                         style="width: 60px;height: 60px;display: inline-block">
                    <div style="display: inline-block; font-size: 18px; margin-left: 20px">
                        {{$line_info['name_display']}}
                    </div>
                    <div style="display: none; font-size: 18px;margin-left: 10px;" v-show="infoBasic.name_system"  class="show_name_system">/</div>
                    <div style="display: none; font-size: 18px;margin-left: 10px;"  class="show_name_system">
                        @{{ infoBasic.name_system }}
                    </div>
                    <div style="margin-left: auto;display: inline-block">
                        <div class="btn" style="padding: 6px 3px;width: 110px">
                            <a href="{{ route('chatBasic', ['friend_id' => $line_info['id']]) }}" class="btn btn-default"
                               style="font-size:12px;font-weight: 600;background-color: rgba(8,191,90,1); padding: 5px 8px;color: white">1:1チャット</a>
                        </div>
                        <div class="btn" style="padding: 6px 3px;width: 110px">
                            @if($line_info['is_blocked'] == 1 && $conversation['blocked_by'] == 1)
                                <a class="btn btn-default"
                                   style="font-size:12px;font-weight: 600;background: rgba(125,145,149,1);padding: 5px 8px;color: white"
                                   href="javascript:unBlock({{Request::route('line_id')}})">ブロック解除</a>
                            @else
                                <a class="btn btn-default"
                                   style="font-size:12px;font-weight: 600;background: rgba(125,145,149,1);padding: 5px 8px;color: white"
                                   href="javascript:block({{Request::route('line_id')}})">ブロック</a>
                            @endif
                        </div>
                        <div class="btn" style="padding: 6px 3px;width: 110px">
                            <a href="javascript:deleteLineUser({{Request::route('line_id')}})" class="btn btn-default"
                               style="font-size:12px;font-weight: 600;background-color: rgba(244,67,54,1); padding: 5px 8px;color: white">削除</a>
                        </div>
                        <div class="btn btn-group" style="padding: 6px 0;margin-right: 15px;margin-left: 20px">
                               <span class="focus-pointer" style="font-size: 24px; color: rgb(137, 143, 144);">
                                   <svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" fill="currentColor"
                                        viewBox="0 -2 16 16" class="bi bi-three-dots"><path
                                               d="M3 9.5a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zm5 0a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zm5 0a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3z"></path></svg>
                               </span>
                            <ul class="dropdown-menu action-my-page"
                                style="min-width: 100px; padding: 10px; left: -42px; top: 20px;">
                                <li class="focus-pointer">
                                    <div>
                                        <a style="padding: 0;color: #2C2C2C ;background: white"
                                           href="{{route('answerForm',['line_user_id'=>Request::route('line_id')])}}">フォーム回答</a>
                                    </div>
                                </li>
                                <li class="focus-pointer" style="margin-top: 10px">
                                    <div>
                                        <a style="padding: 0;color: #2C2C2C ;background: white"
                                           href="{{route('mypageURL',['line_user_id'=>Request::route('line_id')])}}">URLクリック測定</a>
                                    </div>
                                </li>
                                {{--                                <li class="focus-pointer">--}}
                                {{--                                    <div>--}}
                                {{--                                        アクション--}}
                                {{--                                    </div>--}}
                                {{--                                </li>--}}
                            </ul>
                        </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>
            <div id="tab-menu-mypage" style="margin-top: 30px">
                {{--                <ul class="nav nav-tabs">--}}
                {{--                    <li class="active"--}}
                {{--                        style="margin-right: 2px;border: unset;width: calc(50% - 2px);min-width: 90px;background: rgba(125,145,149,1)"--}}
                {{--                        onclick="tabScenario(1)"><a class="tab-menu-sub" data-toggle="tab" href="#main_menu"--}}
                {{--                                                    style="margin-right: 0;border-bottom: unset">基本メニュー</a></li>--}}
                {{--                    <li style="margin-left: 2px;border: unset;width: calc(50% - 2px);min-width: 90px;background: rgba(125,145,149,1)"--}}
                {{--                        onclick="tabTemplate(1)"><a class="tab-menu-sub" data-toggle="tab" href="#edit_menu"--}}
                {{--                                                    style="margin-right: 0px;border-bottom: unset">カスタムメニュー</a></li>--}}
                {{--                </ul>--}}

                {{--                <div class="tab-content"--}}
                {{--                     style="border-bottom: 1px solid rgba(125,145,149,1);border-left: 1px solid rgba(125,145,149,1);border-right: 1px solid rgba(125,145,149,1)">--}}
                {{--                    <div id="main_menu" class="tab-pane fade in active" style="height: 80px">--}}
                {{--                    </div>--}}
                {{--                    <div id="edit_menu" class="tab-pane fade" style="height: 80px">--}}
                {{--                    </div>--}}
                {{--                </div>--}}
                <ul class="tab tab-main-menu" style="font-weight: 600;margin-top: 20px; font-size: 14px;display: block">
                    <li class="select" data-name="info_user" onclick="switchTabMenu('info_user')"> <span style="margin-left: 10px;font-weight: 600">基本情報</span><label id="edit_information" style=" float: right" v-on:click="showModalSettingInfo()">
                            <svg class="Icon_feather-edit-2" viewBox="3 3.257 15 15" style="color: white">
                                <path  id="Icon_feather-edit-my-page" d="M 14.34734535217285 3.884055376052856 C 15.18294239044189 3.048460006713867 16.53771018981934 3.048460245132446 17.37330627441406 3.884055376052856 C 18.20890045166016 4.719650745391846 18.20890045166016 6.074419021606445 17.37330627441406 6.910015106201172 L 7.160694122314453 17.12262344360352 L 3 18.25735855102539 L 4.134734153747559 14.09666633605957 L 14.34734535217285 3.884055376052856 Z">
                                </path>
                            </svg>
                        </label></li>
                    <li style="font-weight: 600" data-name="scenario" onclick="switchTabMenu('scenario')">ステップ配信</li>
                    <li style="font-weight: 600" data-name="tag" onclick="switchTabMenu('tag')">タグ</li>
                    <li style="font-weight: 600" data-name="bill_history" onclick="switchTabMenu('bill_history')">購入履歴</li>
                    <li style="font-weight: 600" data-name="booking_history" onclick="switchTabMenu('booking_history')">予約履歴</li>
                </ul>
                <ul>
                    <li class="info_user tab_content">

                        <div class="title_regis" style="margin-top: 30px" v-show="dataInfo.toggle_basic == 1 && dataInfo.array_show_basic.length > 0">基本情報</div>
                        <div id="show_real_info_basic" style="display: none">
                            <div style="display: flex;margin-top: 15px" v-for="(item,index) in dataInfo.array_show_basic">
                                <div class="title-info-basic">@{{ getTitleInfo(item) }}</div>
                                <div class="content-info-basic" >@{{  getContentInfo(item) }}</div>
                            </div>
                        </div>

                        <div style="margin-top: 30px;margin-left: 0;margin-right: 0" class="row" v-show="dataInfo.toggle_custom == 1 && dataInfo.array_show_custom.length > 0">
                            <div class="title_regis col-sm-7">友だち情報</div>
                            <div class="col-sm-5" style="padding: 0" v-if="!isEdit">
                                <button class="btn-primary btn "
                                        v-on:click="toggleEdit"
                                        style="border: 1px solid rgb(87 153 219) !important;font-size: 12px;font-weight: 600;;float: right;text-align:center;width: 140px;color: white;background: rgb(87 153 219);"
                                >手動編集</button>
                            </div>
                            <div id="btn_save_custom_info" class="col-sm-5" style="padding: 0;display: none" v-show="isEdit">
                                <button class="btn-primary btn "
                                        v-on:click="saveInfo()"
                                        style="border: 1px solid #08BF5A !important;font-size: 12px;font-weight: 600;float: right;text-align:center;width: 140px;color: white;background: #08BF5A"
                                >保存</button>
                            </div>
                        </div>
                        <div style="display: none" id="show_real_info_custom">
                            <div style="margin-top: 15px; align-items: center" v-for="(info_id,indexId) in dataInfo.array_show_custom">
                                <div style="display: flex">
                                    <div class="title-info-basic" v-if="info_id == -1">システム表示名</div>
                                    <div class="content-info-cus" v-if="info_id == -1">
                                        <div  v-if="!isEdit"  class="title-bg" >
                                            @{{ infoBasic.name_system }}
                                        </div>
                                        <input v-else type="text" class="form-control h-input" name="value" v-model="infoBasic.name_system">
                                    </div>
                                </div>
                                <div style="display: flex">
                                    <div class="title-info-basic" v-if="info_id == -2">携帯電話</div>
                                    <div class="content-info-cus" v-if="info_id == -2">
                                        <div  v-if="!isEdit"  class="title-bg" >
                                            @{{ infoBasic.phone }}
                                        </div>
                                        <input v-else type="text" class="form-control h-input" name="value" v-model="infoBasic.phone">
                                    </div>
                                </div>
                                <div style="display: flex">
                                    <div class="title-info-basic" v-if="info_id == -3">メールアドレス</div>
                                    <div class="content-info-cus" v-if="info_id == -3">
                                        <div  v-if="!isEdit"  class="title-bg" >
                                            @{{ infoBasic.email }}
                                        </div>
                                        <input v-else type="text" class="form-control h-input" name="value" v-model="infoBasic.email">
                                    </div>
                                </div>
                                <div style="display: flex">
                                    <div class="title-info-basic" v-if="info_id == -4">生年月日</div>
                                    <div class="content-info-cus" v-if="info_id == -4">
                                        <div class="vdp-datepicker " >
                                            <div class="input-group box-date"  style="position: relative">
                                                <input class="input-cal datepickerBirthday date-1 "
                                                       v-model="infoBasic.birthday"
                                                       type="text"
                                                       :disabled="!isEdit"
                                                       placeholder="">
                                                <span class="ic-cal-ip">
                                                <i class="far fa-calendar"></i>
                                            </span>

                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div style="display: flex">
                                    <div class="title-info-basic" v-if="info_id == -6">都道府県</div>
                                    <div class="content-info-cus" v-if="info_id == -6">
                                        <div  v-if="!isEdit"  class="title-bg" style="min-width: 200px">
                                            @{{ infoBasic.province }}
                                        </div>
                                        <select v-else class="form-control h-input" v-model="infoBasic.province">
                                            <option value="-">-</option>
                                            <option v-for="i in infoBasic.list_province" :value="i">@{{ i }}</option>
                                        </select>
                                    </div>
                                </div>
                                <div style="display: flex" v-for="(info,index) in infoCustom" v-if="info.id == info_id">
                                    <div class="title-info-basic">@{{ info.title }}</div>
                                    <div v-if="info.type_data == 1" class="content-info-cus">
                                        <div  v-if="!isEdit"  class="title-bg" style="min-width: 200px">
                                            @{{ info.newValue != '' && info.newValue != 'clear_data_option' ? info.newValue : info.default_value }}
                                        </div>
                                        <select v-else class="form-control h-input" v-model="info.newValue">
                                            <option value="clear_data_option">-</option>
                                            <option v-for="i in info.valueOption" :value="i.value">@{{ i.value }}</option>
                                        </select>
                                    </div>
                                    <div v-if="info.type_data == 2" class="content-info-cus">
                                        <div  v-if="!isEdit"  class="title-bg">
                                            @{{ info.newValue != '' ? info.newValue : info.default_value }}
                                        </div>
                                        <input v-else type="text" class="form-control h-input" name="value" v-model="info.newValue">
                                    </div>
                                    <div v-if="info.type_data == 3" class="content-info-cus">
                                        {{--                                    <div  v-if="!isEdit"  class="title-bg" >--}}
                                        {{--                                        @{{ info.newValue != '' ? setValueDate(info.newValue) : setValueDate(info.default_value) }}--}}
                                        {{--                                    </div>--}}
                                        <div class="vdp-datepicker " >
                                            <div class="input-group box-date"  style="position: relative">
                                                <input type="hidden" class="index-item" :value="index">
                                                <input class="input-cal datepicker date-1 "
                                                       v-model="info.newValue"
                                                       onkeydown="return clearDate(event, 'from')"
                                                       type="text"
                                                       :disabled="!isEdit"
                                                       placeholder="">
                                                <span class="ic-cal-ip">
                                                <i class="far fa-calendar"></i>
                                            </span>

                                            </div>
                                        </div>
                                        {{--                                    <input v-else type="date" class="form-control h-input datepicker"--}}
                                        {{--                                            style="width: 200px"--}}
                                        {{--                                            v-model="info.newValue"--}}
                                        {{--                                            name="date" >--}}
                                    </div>

                                    <div v-if="info.type_data == 4" class="content-info-cus">
                                        <div style="display: flex; align-items: center"  >
                                            <img :id="'preview_profile'+index" :src="(info.newValue != '' && info.newValue != null) ? '