@extends('layout.basic.main')
@section('title','友だち情報詳細')

@push('css')
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/ui@4.0/dist/fancybox.css" />
    <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.15.4/css/all.css"
        integrity="sha384-rqn26AG5Pj86AF4SO72RK5fyefcQ/x32DNQfChxWvbXIyXFePlEktwD18fEz+kQU" crossorigin="anonymous">
    <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>
        body {
            color: #51595C !important;
        }

        td,
        th {
            text-align: left !important;
            font-weight: bold;
            vertical-align: middle !important;
        }

        table.fixed {
            table-layout: fixed;
            width: 100%;
        }

        table.fixed>tr>td {
            width: 120px !important;
            padding: 0px;
        }

        table.thead-radius-border,
        table.thead-radius-border>thead,
        table.thead-radius-border>thead>tr {
            background: transparent !important;
        }

        table.thead-radius-border>thead>tr>th:first-child {
            border-radius: 5px 0px 0px 5px;
        }

        table.thead-radius-border>thead>tr>th:last-child {
            border-radius: 0px 5px 5px 0px;
        }

        table.thead-radius-border>thead>tr>td {
            border-bottom: 2px solid #F4F6F7 !important;
        }

        div,
        span {
            font-weight: bold;
        }

        h5 {
            padding: 10px
        }

        .btn button {
            width: 100%;
        }

        a.underline-txt {
            text-decoration: underline;
            color: #5799DB;
        }

        .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;
            z-index: 1040 !important;
        }

        .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 .tab-main-menu li span {
            color: #96ADB2;
        }

        #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 ul.tab-main-menu {
            display: flex !important;
            flex-wrap: wrap;
            justify-content: space-between !important;
        }

        #my-page-user .tab-main-menu li {
            width: auto;
            border-radius: 5px;
            background-color: white;
            cursor: pointer;
            font-size: 16px;
            margin: 0px 4px;
            padding: 10px 0px;
            color: #51595C;
            position: relative;
        }

        @media screen and (max-width: 1480px) {
            #my-page-user .tab-main-menu li {
                font-size: 15px;
            }
        }

        #my-page-user .tab-main-menu li:last-child {
            margin-right: 0px;
        }

        #my-page-user .tab-main-menu li:first-child {
            padding-left: 5px;
        }

        #my-page-user .tab-main-menu li>span {
            text-align: center;
            white-space: nowrap;
        }

        #my-page-user .tab-main-menu li.select span,
        #my-page-user .tab-main-menu li:hover span {
            color: #08BF5A;
        }

        #my-page-user .tab-main-menu li span::after {
            content: "";
            width: 0px;
            height: 4px;
            display: block;
            margin: 5px auto 0px;
            border-radius: 3px;
            background: #08BF5A;
        }

        #my-page-user .tab-main-menu li:hover>span::after,
        #my-page-user .tab-main-menu li.select>span::after {
            width: 100%;
            transition: width 0.2s;
        }

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

            padding-left: 0px;
            margin-top: 0px !important;
        }

        /* #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); */
            background: #08BF5A;
        }

        #my-page-user .tag-item-active {
            background: #F4FBF2;
        }

        #my-page-user .tag-checkbox {
            border: 1px solid #f6f6f6;
            border-radius: 5px;
            width: 20px;
            height: 20px;
            margin-right: 10px;
            background: white;
        }

        #my-page-user .tag-item-active .tag-checkbox {
            background: #08BF5A;
        }

        #my-page-user .folder-tag {
            background: #F4FBF2;
        }

        #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; */
            background: #F2F2F2 !important;
            color: #51595C !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(8, 191, 90);
            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: 20px;
            color: #96ADB2;
        }

        .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 {
            padding-right: calc(4% - 15px);
        }

        #my-page-user .modal {
            position: relative;
        }

        #my-page-user .modal .modal-content {
            padding: 18px 51px 18px 61px !important;
            box-sizing: content-box;
        }

        #my-page-user .modal-header {
            display: flex;
            flex-direction: row-reverse;
        }

        #my-page-user .modal-header h2 {
            flex: 1;
        }

        #my-page-user .modal-header .close {
            opacity: 1;
            color: #7D9195;
            display: flex;
            flex-direction: column;
            justify-content: center;
            padding: 0px 10px;
            font-size: 26px;
            box-sizing: content-box;
            flex: 0;
            height: 38px;
            position: absolute;
            right: 26px;
            align-items: center;
            cursor: pointer;
            border-radius: 5px;
        }

        #my-page-user .modal-header .close i{
            line-height: 38px;
        }

        #my-page-user .modal-header .close:hover{
            background-color: #96ADB2;
            color: #fff;
        }

        #my-page-user .btn-sns-line-my-page {
            box-shadow: 0px 2px 0px #00000080;
            margin-left: 20px;
            width: 150px !important;
        }

        #my-page-user .btn-sns-line-my-page:hover {
            opacity: 0.7;
        }

        #my-page-user .main-info-friend .btn-sns-line:hover {
            opacity: 0.6;
        }

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

        #my-page-user .table th {
            font-weight: bold;
            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 {
            padding: 10px 11px 8px;
            display: flex !important;
            font-size: 21px;
            justify-content: center;
            border-radius: 4px;
            align-items: center;
        }

        #my-page-user .remove-setting-btn.icon-setting,
        #my-page-user .add-setting-btn.icon-setting{
            cursor: pointer;
        }

        #my-page-user .remove-setting-btn.icon-setting:hover {
            background: #F44336;
        }

        #my-page-user .add-setting-btn.icon-setting:hover {
            background: #44CB80;
        }

        #my-page-user .tbl_info_df tr td {
            border: 1px solid #96ADB2;
            padding: 13px;
            border-right: 1px solid #96ADB2 !important;
        }

        #my-page-user .tbl_info_df.with-hover tr td:last-child:hover{
            background-color: #f6f6f6;
            cursor: pointer;
        }

        .tt-tab1 {

            font-size: 20px;
        }

        #my-page-user .tbl_info_df input[type='text'] {
            height: 37px;
        }

        #my-page-user .tbl_remind_mp th {
            background-color: #F2F2F2 !important;
            color: #51595C !important;
            padding: 10px 8px;
        }

        #my-page-user .itembox_form {
            border: 2px solid rgb(242, 242, 242);
            border-radius: 5px;
            padding: 15px;
            margin-bottom: 20px;
            /* width: 76%; */
        }

        #my-page-user .form_answer th {
            background-color: #F2F2F2 !important;
            color: #51595C !important;
        }

        #my-page-user .tblFormAnswer tr:nth-child(odd)>td {
            background: #F2F2F2 !important;
        }

        #my-page-user .tblFormAnswer tr:nth-child(even)>td {
            background: #FFF
        }

        #my-page-user .tblFormAnswer td {
            border-bottom: 1px solid #F8F8F8 !important;
        }

        .itembox_form .item_form_child {
            border: 1px solid #F8F8F8;
            border-bottom: none;
            /*width: 76%;*/
        }

        .itembox_form .item_form_child:last-child {
            border-bottom: 1px solid #F8F8F8;
            ;
        }

        .item_aw div {
            font-size: 13px;
        }

        #tab-menu-mypage .pagination {
            vertical-align: middle;
            margin-bottom: 30px;
        }

        #tab-menu-mypage .pagination>li.active>a {
            background-color: #08BF5A !important;
            color: white !important;
            border-color: #08BF5A !important;
            border-top: 1px !important;
            /*border-radius: 0;*/
        }

        #tab-menu-mypage .pagination>li.active>a:hover {
            background-color: #08BF5A;
            color: white;
            border-color: #08BF5A;
        }

        #tab-menu-mypage .pagination>li:first-child>a {
            margin-left: 0;
            border-top-left-radius: 4px !important;
            border-bottom-left-radius: 4px !important;
        }

        #tab-menu-mypage .pagination>li:last-child>a {
            border-top-right-radius: 4px !important;
            border-bottom-right-radius: 4px !important;
        }

        body.modal-open {
            -ms-overflow-style: none;
            /* IE and Edge */
            scrollbar-width: none;
            /* Firefox */
        }

        body.modal-open::-webkit-scrollbar {
            display: none;
            /* Chrome  */

        }

        #table_history_scenario .preview-mess-step-btn:hover {
            opacity: 0.7;
        }

        #table_history_scenario_paginate ul li span {
            font-family: Arial, Helvetica, sans-serif;
            display: inline-block;
            font-weight: bold !important;
            text-align: center;
            line-height: 32px;
            border: 1px solid #DDDDDD;
            width: 34px;
            height: 34px;
            box-sizing: border-box;
            cursor: pointer;
        }

        #table_history_scenario_paginate ul li>span.prev-arrow,
        #table_history_scenario_paginate ul li>span.next-arrow {
            color: #08BF5A !important;
        }

        #table_history_scenario_paginate ul li:hover>span,
        #table_history_scenario_paginate ul li.current_page>span {
            background: #08BF5A;
            color: #fff !important;
        }

        #table_history_scenario_paginate ul li:first-child span {
            border-radius: 5px 0px 0px 5px;
        }

        #table_history_scenario_paginate ul li:last-child span {
            border-radius: 0px 5px 5px 0px;
        }

        #settingFriendInfo .modal-dialog,
        #modalPreview .modal-dialog {
            height: 100% !important;
            width: 34% !important;
            z-index: 1040;
            position: fixed;
            top: 8%;
            left: 50%;
            transform: translate(-50%, 0px) !important;
        }

        #modalPreview .modal-dialog {
            width: 45% !important;
        }

        #settingFriendInfo .modal-dialog .modal-content {
            max-height: 50% !important;
            overflow-y: auto;
        }

        #modalPreview .modal-dialog .modal-content {
            max-height: 60% !important;

        }

        #changeStepMessage .modal-dialog {
            width: 36% !important;
        }

        #changeStepMessage .modal-dialog .modal-content {
            padding-right: 61px !important;
        }

        #imagePreviewModal::before,
        #profileImagePreviewModal::before,
        #settingFriendInfo::before,
        #changeStepMessage::before,
        #modal_booking_calendar_detail::before,
        #previewRemind::before {
            content: '';
            width: 100%;
            height: 100%;
            position: fixed;
            top: 0px;
            right: 0px;
            background: black;
            opacity: 0.6;
            z-index: 1001;
        }

        #imagePreviewModal .modal-dialog,
        #profileImagePreviewModal .modal-dialog {
            height: 100% !important;
            width: 100% !important;
            text-align: center;
            z-index: 1040;
            position: fixed;
            top: 8%;
            left: 50%;
            transform: translate(-50%, 0px) !important;
        }

        #imagePreviewModal .modal-content,
        #profileImagePreviewModal .modal-content {
            border: none;
            box-shadow: none;
            background: transparent !important;
            height: 62% !important;
            padding: 0px !important;
            width: auto !important;
        }

        #imagePreviewModal .modal-content .modal-body,
        #profileImagePreviewModal .modal-content .modal-body {
            height: 100% !important;

        }

        #imagePreviewModal .modal-body,
        #profileImagePreviewModal .modal-body,
        #modal_booking_calendar_detail .modal-body,
        #modal_booking_event_detail .modal-header {
            border: none;
        }

        #changeStepMessage .modal-dialog,
        #modal_booking_calendar_detail .modal-dialog,
        #previewRemind .modal-dialog {
            z-index: 1040;
            /* width: 50% !important; */
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -80%) !important;
        }

        #modal_booking_event_detail .modal-dialog {
            z-index: 1040;
            position: fixed;
            top: 30px;
            left: 50%;
            transform: translate(-50%, 0px) !important;

        }

        #settingFriendInfo .modal-content::-webkit-scrollbar,
        #modal_booking_calendar_detail .modal-content::-webkit-scrollbar,
        .my-page-scrollbar::-webkit-scrollbar {
            width: 10px;
        }

        #settingFriendInfo .modal-content::-webkit-scrollbar-track,
        #modal_booking_calendar_detail .modal-content::-webkit-scrollbar-track,
        .my-page-scrollbar::-webkit-scrollbar-track {
            background: white;
            border-radius: 0px 6px 6px 0px;
        }

        #settingFriendInfo .modal-content::-webkit-scrollbar-thumb,
        #modal_booking_calendar_detail .modal-content::-webkit-scrollbar-thumb,
        .my-page-scrollbar::-webkit-scrollbar-thumb {
            background: #7D9195;
            border-radius: 5px;
        }

        #modal_booking_event_detail .u-title {
            text-align: center;
            background-color: #7D9195;
            color: white;
            padding: 9px;
            border-radius: 5px;
            margin-bottom: 14px;
            margin-right: 15px;
            font-weight: bold;
        }

        #modal_booking_event_detail .u-content {
            background-color: #F2F2F2;
            color: #51595C;
            padding: 9px;
            border-radius: 5px;
            margin-bottom: 14px;
            height: 39px;
        }

        #modal_booking_event_detail .u-content:last-child {
            margin-bottom: 0px;
        }

        #modal_booking_event_detail .title-form {
            border-left: 7px solid #08BF5A;
            font-weight: bold;
            font-size: 18px;
            padding: 5px 10px;
            margin-top: 33px;
            margin-bottom: 20px;
        }

        #modal_booking_event_detail .b-title-info {
            text-align: center;
            background-color: #F6F6F6;
            color: #51595C;
            padding: 9px;
            border-radius: 5px;
            margin-bottom: 14px;
            font-weight: bold;
        }

        #modal_booking_event_detail .b-content_info {
            border: 1px solid #B0C2C6;
            color: #51595C;
            padding: 8px;
            border-radius: 5px;
            margin-bottom: 14px;
            height: 38px;
        }

        #modal_booking_event_detail .f-title-info {
            text-align: left;
            background-color: #ffffff;
            color: #51595C;
            padding: 9px;
            border-radius: 5px;
            margin-bottom: 14px;
            font-weight: bold;
        }

        #modal_booking_event_detail .f-content_info {
            border: 1px solid #B0C2C6;
            background-color: #F4F6F7;
            color: #51595C;
            padding: 8px;
            border-radius: 5px;
            margin-bottom: 14px;
            height: 38px;
        }



        #changeStepMessage input[name="step_to_change"]:checked+.step-to-change-input-radio::before {
            background-color: #96ADB2;
        }

        #changeStepMessage .step-to-change-input-radio {
            width: 34px;
            height: 34px;
            border-radius: 50%;
            border: 2px solid #96adb2;
            box-sizing: border-box;
            position: relative;
            cursor: pointer;
        }

        #changeStepMessage .step-to-change-input-radio::before {
            content: "";
            width: 16px;
            height: 16px;
            border-radius: 50%;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }

        #imagePreviewModal .img-container,
        #profileImagePreviewModal .img-container {
            width: 100%;
            margin-bottom: 1rem;
        }

        #imagePreviewModal .img-container img,
        #profileImagePreviewModal .img-container img {
            width: 100% !important;
            height: 100% !important;
            object-fit: contain !important;
        }

        .img-container {
            position: relative;
        }

        .img-container .full-scr-img-preview-btn {
            position: absolute;
            bottom: 10px;
            right: 10px;
            transform: rotate(90deg);
            background: white;
            padding: 0px 4px;
        }

        .bill_history .tab-btn {
            background-color: white;
            color: #7D9195;
            padding: 6px;
            border: 2px solid #7D9195;
            border-radius: 5px;
            outline: none;
            box-sizing: border-box;
            margin-right: 14px;
        }

        .bill_history .tab-btn:hover,
        .bill_history .tab-btn.active {
            background-color: #7D9195 !important;
            color: white;
        }

        /* Chrome, Safari, Edge, Opera */
        input.phone_number_input::-webkit-outer-spin-button,
        input.phone_number_input::-webkit-inner-spin-button {
            -webkit-appearance: none;
            margin: 0;
        }

        /* Firefox */
        input[type=number].phone_number{
            -moz-appearance: textfield;
        }
    </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: #51595C; font-weight: bold; padding: 10px 10px 10px 0;">友だち情報詳細</h2>
            <div class="row">
                <div class="col-sm-12">
                    <div class="main-info-friend" style="background: #f6f6f6; padding: 12px 30px; border-radius: 5px;">
                        <div class="imgblc" id="user-info"
                            style="display: flex;justify-content : space-between;align-items: center;vertical-align: middle">

                            <img src="{{ isset($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; border-radius: 50%; cursor: pointer;"
                                v-on:click="toggleProfileImageModal($event, '{{ $line_info['avatar_url'] ? $line_info['avatar_url'] : '/images/blank_avatar.png' }}')">
                            <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: flex">
                                <div style="padding: 6px 3px;">
                                    <a
{{--                                            href="{{ route('chatBasic', ['friend_id' => $line_info['id']]) }}"--}}
                                       v-on:click="linkToChat({{ Request::route('line_id') }})"
                                        class="btn btn-sns-line btn-sns-line-success btn-sns-line-my-page">
                                        <i class="fas fa-comments-alt" style="margin-right: 5px"></i><span>チャット</span>
                                    </a>
                                </div>
                                <div style="padding: 6px 3px;">
                                    @if ($line_info['is_blocked'] == 1 && $conversation['blocked_by'] == 1)
                                        <a class="btn btn-sns-line btn-sns-line-dark btn-sns-line-my-page"
                                            style="background: #7D9195;" {{--                                   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') }})"><i class="far fa-ban"
                                                style="margin-right: 5px"></i>ブロック解除</a>
                                    @else
                                        <a class="btn btn-sns-line btn-sns-line-dark btn-sns-line-my-page"
                                            style="background: #7D9195;" {{--                                   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') }})"><i class="far fa-ban"
                                                style="margin-right: 5px"></i>ブロック</a>
                                    @endif
                                </div>
                                <div style="padding: 6px 3px;">
                                    <a href="javascript:deleteLineUser({{ Request::route('line_id') }})"
                                        class="btn btn-sns-line btn-sns-line-danger btn-sns-line-my-page"
                                        {{--                               style="font-size:12px;font-weight: 600;background-color: rgba(244,67,54,1); padding: 5px 8px;color: white" --}}><i class="far fa-trash-alt"
                                            style="margin-right: 5px"></i>削除</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>

            </div>
            <div id="tab-menu-mypage">
                {{-- <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> --}}
                <div class="row">
                    <div class="col-md-12 col-lg-8">
                        <ul class="tab tab-main-menu"
                            style="font-weight: 600;
                            margin-top: 20px; 
                            font-size: 14px;
                            display: block;
                            margin-bottom: 0px;">
                            <li class="select" data-name="info_user" onclick="switchTabMenu('info_user')">
                                <span style="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')">
                                <span>ステップ配信</span>
                            </li>
                            <li style="font-weight: 600;" data-name="remind" onclick="switchTabMenu('remind')">
                                <span>リマインド配信</span>
                            </li>
                            <li style="font-weight: 600;" data-name="tag" onclick="switchTabMenu('tag')">
                                <span>タグ</span>
                            </li>
                            <!-- <li style="font-weight: 600;" data-name="booking_calendar"
                                onclick="switchTabMenu('booking_calendar')">
                                <span>カレンダー予約</span>
                            </li> -->
                            <li style="font-weight: 600" data-name="booking_history"
                                onclick="switchTabMenu('booking_history')">
                                <span>イベント予約</span>
                            </li>
                            <li style="font-weight: 600" data-name="bill_history" onclick="switchTabMenu('bill_history')">
                                <span>購入履歴</span>
                            </li>
                            <li style="font-weight: 600" data-name="form_answer" onclick="switchTabMenu('form_answer')">
                                <span>フォーム回答</span>
                            </li>
                        </ul>
                    </div>
                </div>
                <hr
                    style="border-bottom: 2px solid #E8E8E8; background-color: transparent; margin-top: 0px; margin-bottom: 20px;">
                <ul>
                    <li class="row info_user tab_content">
                        <div class="col-md-12 col-lg-8">
                            <div class="row" style="margin-left: 0;margin-right: 0; display: flex;">
                                <div class="title_regis col-md-5"
                                    style="font-size: 20px; flex:1; display: flex; flex-direction: column; justify-content: end;">
                                    <span style="letter-spacing: 1px;">基本情報</span>
                                </div>
                                <div>
                                    <button class="btn btn-sns-line btn-sns-line-secondary btn-sns-line-my-page"
                                        v-on:click="showModalSettingInfo('basic_info_setting');"
                                        style="box-shadow: 0px 2px 0px #00000080;">
                                        <span>表示設定</span>
                                    </button>
                                </div>
                            </div>
                            <div id="show_real_info_basic" style="margin-bottom: 92px; display: none;">
                                <table class="tbl_info_df">
                                    <tbody>
                                        <tr v-for="(item,index) in dataInfo.array_show_basic">
                                            <td style="width: 200px; background-color: #F2F2F2">@{{ getTitleInfo(item) }}</td>
                                            <td>@{{ getContentInfo(item) }}</td>
                                        </tr>
                                    </tbody>
                                </table>
                                {{-- <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 class="row" style="margin-top: 16px; margin-left: 0;margin-right: 0; display: flex;">
                                <div class="title_regis col-md-5"
                                    style="font-size: 20px; flex:1; display: flex; flex-direction: column; justify-content: end;">
                                    <span style="letter-spacing: 1px;">友だち情報</span>
                                </div>
                                <div>
                                    <button class="btn btn-sns-line btn-sns-line-secondary btn-sns-line-my-page"
                                        v-on:click="showModalSettingInfo('collect_info_setting');"
                                        style="box-shadow: 0px 2px 0px #00000080;">
                                        <span>表示設定</span>
                                    </button>
                                </div>
                            </div>
                            {{-- <div id="btn_save_custom_info" class="col-sm-6" style="display: none" v-show="isEdit">
                                    <button class="btn btn-sns-line btn-sns-line-success" v-on:click="saveInfo()"
                                        style="font-size: 12px;font-weight: 600;float: right;text-align:center;width: 140px;color: white;">保存</button>
                                </div> --}}


                            <div style="margin-bottom: 92px; display: none" id="show_real_info_custom">
                                <table class="tbl_info_df with-hover">
                                    <tbody>
                                        <tr v-for="(info_id,indexId) in dataInfo.array_show_custom">
                                            <td style="width: 200px; background-color: #7D9195; color: white">
                                                <div v-if="info_id == -1">システム表示名</div>
                                                <div v-if="info_id == -2">携帯電話</div>
                                                <div v-if="info_id == -3">メールアドレス</div>
                                                <div v-if="info_id == -4">生年月日</div>
                                                <div v-if="info_id == -6">都道府県名</div>
                                                <div v-if="info_id == -7">郵便番号</div>
                                                <div v-if="info_id == -8">市区町村名</div>
                                                <div v-if="info_id == -9">町名/番地</div>
                                                <div v-if="info_id == -10">建物名・部屋番号</div>
                                                <div v-for="(info,index) in infoCustom" v-if="info.id == info_id">
                                                    <div>@{{ info.title }}</div>
                                                </div>
                                            </td>
                                            <td v-on:click="toggleEdit(info_id)">
                                                <div v-if="info_id == -1">
                                                    <div v-if="isEdit != info_id" class="title-bg">
                                                        @{{ infoBasic.name_system }}
                                                    </div>
                                                    <input v-else v-on:keydown.enter="saveInfo()" type="text"
                                                        class="form-control h-input" name="value"
                                                        v-model="infoBasic.name_system" v-on:blur="restoreOldInputData()">
                                                </div>
                                                <div v-if="info_id == -2">
                                                    <input v-if="isEdit == info_id" v-on:keydown.enter="saveInfo()"
                                                        type="number" class="form-control h-input phone_number_input"
                                                        name="value" v-model="infoBasic.phone"
                                                        v-on:blur="restoreOldInputData()">
                                                    <div v-else class="title-bg">
                                                        @{{ infoBasic.phone }}
                                                    </div>

                                                </div>
                                                <div v-if="info_id == -3">
                                                    <input v-if="isEdit == info_id" v-on:keydown.enter="saveInfo()"
                                                        type="text" class="form-control h-input" name="value"
                                                        v-model="infoBasic.email" v-on:blur="restoreOldInputData()">
                                                    <div v-else class="title-bg">
                                                        @{{ infoBasic.email }}
                                                    </div>

                                                </div>
                                                <div v-if="info_id == -4">
                                                    <div class="vdp-datepicker">
                                                        <div v-show="isEdit != info_id" class="title-bg">
                                                            @{{ formatDate(infoBasic.birthday) }}
                                                        </div>
                                                        <div v-show="isEdit == info_id" class="input-group box-date"
                                                            style="position: relative">
                                                            <input class="input-cal datepickerBirthday date-1 "
                                                                v-model="infoBasic.birthday" type="text"
                                                                placeholder="">
                                                            <span class="ic-cal-ip">
                                                                <i class="far fa-calendar"></i>
                                                            </span>

                                                        </div>
                                                    </div>
                                                </div>
                                                <div v-if="info_id == -6">
                                                    <div v-if="isEdit != info_id" class="title-bg"
                                                        style="min-width: 200px">
                                                        @{{ infoBasic.province }}
                                                    </div>
                                                    <select v-else class="form-control h-input" v-on:change="saveInfo()"
                                                        v-on:blur="restoreOldInputData()" v-model="infoBasic.province">
                                                        <option value="-">-</option>
                                                        <option v-for="i in infoBasic.list_province"
                                                            :value="i">
                                                            @{{ i }}</option>
                                                    </select>
                                                </div>

                                                <div v-if="info_id == -7">
                                                    <div v-if="isEdit != info_id" class="title-bg">
                                                        @{{ infoBasic.zip_code }}
                                                    </div>
                                                    <input v-else v-on:keydown.enter="saveInfo()" type="text"
                                                           class="form-control h-input" name="value"
                                                           v-model="infoBasic.zip_code" v-on:blur="restoreOldInputData()">
                                                </div>
                                                <div v-if="info_id == -8">
                                                    <div v-if="isEdit != info_id" class="title-bg">
                                                        @{{ infoBasic.district }}
                                                    </div>
                                                    <input v-else v-on:keydown.enter="saveInfo()" type="text"
                                                           class="form-control h-input" name="value"
                                                           v-model="infoBasic.district" v-on:blur="restoreOldInputData()">
                                                </div>
                                                <div v-if="info_id == -9">
                                                    <div v-if="isEdit != info_id" class="title-bg">
                                                        @{{ infoBasic.township }}
                                                    </div>
                                                    <input v-else v-on:keydown.enter="saveInfo()" type="text"
                                                           class="form-control h-input" name="value"
                                                           v-model="infoBasic.township" v-on:blur="restoreOldInputData()">
                                                </div>
                                                <div v-if="info_id == -10">
                                                    <div v-if="isEdit != info_id" class="title-bg">
                                                        @{{ infoBasic.building }}
                                                    </div>
                                                    <input v-else v-on:keydown.enter="saveInfo()" type="text"
                                                           class="form-control h-input" name="value"
                                                           v-model="infoBasic.building" v-on:blur="restoreOldInputData()">
                                                </div>

                                                <div v-for="(info,index) in infoCustom" v-if="info.id == info_id">

                                                    <div v-if="info.type_data == 1" class="">
                                                        <select v-if="isEdit == info_id" class="form-control h-input"
                                                            v-on:change="saveInfo()" 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 v-else class="title-bg" style="min-width: 200px">
                                                            @{{ info.newValue != '' && info.newValue != 'clear_data_option' ? info.newValue : info.default_value }}
                                                        </div>
                                                    </div>

                                                    <div v-if="info.type_data == 2" class="">
                                                        <div class="title-bg" v-if="isEdit != info_id">
                                                            @{{ info.newValue != '' ? info.newValue : info.default_value }}
                                                        </div>
                                                        <input type="text" class="form-control h-input"
                                                            v-if="isEdit == info_id" v-on:blur="restoreOldInputData()"
                                                            name="value" v-model="info.newValue"
                                                            v-on:keydown.enter="saveInfo()">
                                                    </div>
                                                    <div v-if="info.type_data == 3" class="">
                                                        <div v-show="isEdit != info_id">
                                                            @{{ info.newValue != '' ? formatDate(info.newValue) : formatDate(info.default_value) }}
                                                        </div>
                                                        <div class="vdp-datepicker" v-show="isEdit == info_id">
                                                            <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" 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="">
                                                        <div
                                                            style="display: flex; align-items: center; justify-content: space-between;">
                                                            <div class="img-container">
                                                                <img :id="'preview_profile' + index"
                                                                    :src="(info.newValue != '' && info.newValue != null) ?
                                                                    '