@extends('layouts.app', ['redirectPage' => 'socialTracking', 'redirect_url'=>'social-strategy'])
@section('PageHeading', 'Connect My Accounts')
@section('bodyClass', 'user-management')
@section('sidebar', 'true')
@section('content')
<div class="container_fluid">
    <div class="box_content">
        <div class="box_overlayout">
            <div class="box_innerlayout">
                <div class="task_card">
                    <div class="row align-items-center">
                        <div class="col-md-6 col-lg-7 d-flex align-items-center">
                            <div class="training_img">
                                <img class="rounded-circle" src="{{Helper::getStudioLogo($studio->logo)}}"
                                    alt="{{$studio->name}}">
                            </div>
                            <div class="task_card_header">
                                <h5>{{$studio->name}}</h5>
                                <p class="d-none d-md-block">{{$studio->address}}</p>
                            </div>
                        </div>
                        <div class="col-md-6 col-lg-5">
                            <div class="d-none d-md-block float-end text-nowrap">
                                <div class="btn-group">
                                    <button class="change_btn stud-btn">
                                        <img src="{{ asset('images/pipe.svg') }}" alt="pipe">
                                        Change Studio</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <br/>
                <div class="account-layout">
                    <div class="account-header">
                        <div class="account-subheader">
                            Connect
                        </div>
                    </div>
                    <div class="{{ (isset($mbStatus) && $mbStatus->mb_active_status == 1 && $mindbodyStatus->mb_connect_status != 2) ? 'account-instaitem' : 'account-item' }}">
                        <div class="row align-items-center">
                            <div class="col-md-8">
                                <div class="account-subitem d-md-flex align-items-center">
                                    <div class="d-flex">
                                    <img src="{{ asset('images/mindbody-logo.svg') }}" alt="Mindbody Icon" />
                                    <p> Mindbody Account </p>
                                    </div>
                                    @if(isset($mindbodyStatus))
                                        @if ($mindbodyStatus->mb_active_status == 0 && $mindbodyStatus->mb_account_type == 1 && $mindbodyStatus->mb_connect_status != 2)
                                            <button class="btn-theme btn-small white mt-2 mt-md-0 ms-md-3">
                                                <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                    <path d="M4.5 1.5V6H4.5075L4.5 6.0075L7.5 9L4.5 12L4.5075 12.0075H4.5V16.5H13.5V12.0075H13.4925L13.5 12L10.5 9L13.5 6.0075L13.4925 6H13.5V1.5H4.5ZM12 12.375V15H6V12.375L9 9.375L12 12.375ZM9 8.625L6 5.625V3H12V5.625L9 8.625Z" fill="#000000"/>
                                                </svg>
                                                Activation Pending 
                                            </button>
                                        @elseif ($mindbodyStatus->mb_active_status == 0 && ($mindbodyStatus->mb_account_type == 2  || $mindbodyStatus->mb_account_type == 3) && $mindbodyStatus->mb_connect_status != 2)
                                            <button class="btn-theme btn-small white mt-2 mt-md-0 ms-md-3">
                                                <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                    <path d="M4.5 1.5V6H4.5075L4.5 6.0075L7.5 9L4.5 12L4.5075 12.0075H4.5V16.5H13.5V12.0075H13.4925L13.5 12L10.5 9L13.5 6.0075L13.4925 6H13.5V1.5H4.5ZM12 12.375V15H6V12.375L9 9.375L12 12.375ZM9 8.625L6 5.625V3H12V5.625L9 8.625Z" fill="#000000"/>
                                                </svg>
                                                Activation Pending! <span class="d-none d-inline">Please add User Name and Password of Mindbody!</span>
                                            </button>
                                        @elseif ($mindbodyStatus->mb_active_status == 1 && $mindbodyStatus->username == null && $mindbodyStatus->mb_connect_status != 2)
                                            <button class="btn-theme btn-small green mt-2 mt-md-0 ms-md-3">
                                                <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                    <path d="M9 1.5C4.86 1.5 1.5 4.86 1.5 9C1.5 13.14 4.86 16.5 9 16.5C13.14 16.5 16.5 13.14 16.5 9C16.5 4.86 13.14 1.5 9 1.5ZM7.5 12.75L3.75 9L4.8075 7.9425L7.5 10.6275L13.1925 4.935L14.25 6L7.5 12.75Z" fill="#000000"/>
                                                </svg>
                                                Connected! <span class="d-none d-inline">Please add User Name and Password of Mindbody!</span>
                                            </button>
                                        @elseif ($mindbodyStatus->mb_connect_status == 1)
                                            <button class="btn-theme btn-small green mt-2 mt-md-0 ms-md-3">
                                                <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                    <path d="M9 1.5C4.86 1.5 1.5 4.86 1.5 9C1.5 13.14 4.86 16.5 9 16.5C13.14 16.5 16.5 13.14 16.5 9C16.5 4.86 13.14 1.5 9 1.5ZM7.5 12.75L3.75 9L4.8075 7.9425L7.5 10.6275L13.1925 4.935L14.25 6L7.5 12.75Z" fill="#000000"/>
                                                </svg>
                                                Connected
                                            </button>
                                        @elseif ($mindbodyStatus->mb_connect_status == 2)
                                            <button class="btn-theme btn-small green mt-2 mt-md-0 ms-md-3" style="background-color:#fff;">
                                            <svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg" class="theme-tooltip theme-tooltip-right">
                                                <rect width="22" height="22" rx="11" fill="#F79175"></rect>
                                                <g clip-path="url(#clip0_6088_78543)">
                                                <path d="M3 3H19V19H3V3Z" fill="#F79175"></path>
                                                <path d="M11.0007 4.33301C7.32065 4.33301 4.33398 7.31967 4.33398 10.9997C4.33398 14.6797 7.32065 17.6663 11.0007 17.6663C14.6807 17.6663 17.6673 14.6797 17.6673 10.9997C17.6673 7.31967 14.6807 4.33301 11.0007 4.33301ZM11.0007 16.333C8.05398 16.333 5.66732 13.9463 5.66732 10.9997C5.66732 9.76634 6.08732 8.63301 6.79398 7.73301L14.2673 15.2063C13.3673 15.913 12.234 16.333 11.0007 16.333ZM15.2073 14.2663L7.73398 6.79301C8.63398 6.08634 9.76732 5.66634 11.0007 5.66634C13.9473 5.66634 16.334 8.05301 16.334 10.9997C16.334 12.233 15.914 13.3663 15.2073 14.2663Z" fill="#000000"></path>
                                                </g>
                                                <defs>
                                                <clipPath id="clip0_6088_78543">
                                                <rect width="16" height="16" fill="white" transform="translate(3 3)"></rect>
                                                </clipPath>
                                                </defs>
                                            </svg>
                                                Disconnected
                                            </button>
                                        @endif
                                    @endif
                                </div>
                            </div>

                            <div class="col-md-4">
                                @if(!array_key_exists(3,$myAccount))
                                <div class="float-end my_btn_end">
                                    <button class="my_btn plus_btn btn-action"
                                        onclick="getModalPopup('{{ route('connect-accounts.get_credentials_form',['studioID'=>$studioID,'id'=>3])}}')">
                                        <svg width="18" height="18" viewBox="0 0 18 18" fill="none"
                                            xmlns="http://www.w3.org/2000/svg">
                                            <path
                                                d="M17.25 10.1786H10.1786V17.25H7.82143V10.1786H0.75V7.82143H7.82143V0.75H10.1786V7.82143H17.25V10.1786Z"
                                                fill="#000000" />
                                        </svg>
                                    </button>
                                </div>
                                @else
                                <div class="action-btns mt-3 mt-md-0">
                                    <button class="btn-theme light btn-small btn-action" data-toggle="modal"
                                        onclick="getModalPopup('{{ route('connect-accounts.get_credentials_form',['studioID'=>$studioID,'id'=>3])}}')">
                                        <svg width="13" height="13" viewBox="0 0 13 13" fill="none"
                                            xmlns="http://www.w3.org/2000/svg">
                                            <path
                                                d="M11.7031 2.83998L10.8367 3.70643L9.04377 1.91354L9.91022 1.04709C9.97496 0.982351 10.0784 0.982351 10.1431 1.04709L11.7031 2.60709C11.7679 2.67183 11.7679 2.77524 11.7031 2.83998ZM2.54289 12.0002H0.75V10.2073L7.62333 3.33398L9.41623 5.12687L2.54289 12.0002Z"
                                                fill="#000000" stroke="#000000" />
                                        </svg>
                                        Edit
                                    </button>
                                    <button class="btn-theme dark btn-small account-edit btn-action" id="copy_btn_3"
                                        onclick="getCopyMsg('{{route('social-tracking.getMyAccountToken',['studioID'=>$studioID,'id'=>3])}}', 3)">
                                        <svg width="14" height="15" viewBox="0 0 14 15" fill="none"
                                            xmlns="http://www.w3.org/2000/svg">
                                            <path
                                                d="M1.91668 1.00033H1.41668V1.50033V10.3337H1.08334V1.50033C1.08334 1.04313 1.45949 0.666992 1.91668 0.666992H9.41668V1.00033H1.91668ZM3.75668 4.16735V4.16699C3.75668 3.70653 4.12941 3.33366 4.58334 3.33366H8.08334V3.83366V7.50033V8.00033H8.58334H12.25H12.75V13.5003C12.75 13.9575 12.3739 14.3337 11.9167 14.3337H4.57668C4.12274 14.3337 3.75001 13.9608 3.75001 13.5003L3.75668 4.16735ZM8.9369 3.48011L8.79045 3.33366H9.0429L12.75 7.04077V7.29322L12.6036 7.14677L8.9369 3.48011Z"
                                                fill="white" stroke="white" />
                                        </svg>
                                        <span>Copy Password</span>
                                    </button>
                                </div>
                                @endif
                            </div>
                        </div>
                    </div>
                </div>
                <div class="account-layout">
                    <div class="account-header">
                        <div class="account-subheader d-flex align-items-center justify-content-between">
                            Login Credentials
                            <div class="accordion_edit btn-action-st"
                                onclick="getModalPopup('{{ route('social-tracking.getOtherAccountForm',['studioID'=>$studioID,'id'=>1])}}')">
                                <svg width="18" height="18" viewBox="0 0 18 18" fill="none"
                                    xmlns="http://www.w3.org/2000/svg">
                                    <path
                                        d="M17.25 10.1786H10.1786V17.25H7.82143V10.1786H0.75V7.82143H7.82143V0.75H10.1786V7.82143H17.25V10.1786Z"
                                        fill="{{session()->has('impersonated_by')? '#AEBCD7':'white'}}"></path>
                                </svg>
                                <span>Add Another Account</span>
                            </div>
                        </div>
                    </div>
                    <div class="{{ (!array_key_exists(1,$myAccount)) ? 'account-item' : 'account-instaitem' }}">
                        <div class="row align-items-center">
                            <div class="col-md-8">
                                <div class="float-start account-subitem d-flex align-items-center">
                                    <svg width="16" height="26" viewBox="0 0 16 26" fill="none"
                                        xmlns="http://www.w3.org/2000/svg">
                                        <path
                                            d="M11.1167 0.0722656C9.37894 0.0722656 7.71239 0.762573 6.48364 1.99133C5.25489 3.22008 4.56458 4.88663 4.56458 6.62435V10.2723H1.05833C0.882287 10.2723 0.739578 10.415 0.739578 10.591V15.4077C0.739578 15.5837 0.882287 15.7264 1.05833 15.7264H4.56458V25.6077C4.56458 25.7837 4.70729 25.9264 4.88333 25.9264H9.7C9.87604 25.9264 10.0187 25.7837 10.0187 25.6077V15.7264H13.5561C13.7023 15.7264 13.8298 15.6269 13.8653 15.485L15.0695 10.6683C15.1197 10.4671 14.9676 10.2723 14.7602 10.2723H10.0187V6.62435C10.0187 6.33316 10.1344 6.0539 10.3403 5.84801C10.5462 5.64211 10.8255 5.52643 11.1167 5.52643H14.8C14.976 5.52643 15.1187 5.38372 15.1187 5.20768V0.391016C15.1187 0.214975 14.976 0.0722656 14.8 0.0722656H11.1167Z"
                                            fill="{{session()->has('impersonated_by')? '#AEBCD7':'#1A356A'}}" />
                                    </svg>
                                    <p> Facebook Account </p>
                                </div>
                            </div>
                            <div class="col-md-4">
                                @if(!array_key_exists(1,$myAccount))
                                <div class="float-end my_btn_end">
                                    <button class="my_btn plus_btn"
                                        onclick="getModalPopup('{{ route('social-tracking.getCredentialsForm',['studioID'=>$studioID,'id'=>1])}}')">
                                        <svg width="18" height="18" viewBox="0 0 18 18" fill="none"
                                            xmlns="http://www.w3.org/2000/svg">
                                            <path
                                                d="M17.25 10.1786H10.1786V17.25H7.82143V10.1786H0.75V7.82143H7.82143V0.75H10.1786V7.82143H17.25V10.1786Z"
                                                fill="{{session()->has('impersonated_by')? '#AEBCD7':'#1A356A'}}" />
                                        </svg>
                                    </button>
                                </div>
                                @else
                                <div class="action-btns mt-3 mt-md-0">
                                    <button class="btn-theme light btn-small btn-action" data-toggle="modal"
                                        onclick="getModalPopup('{{ route('social-tracking.getCredentialsForm',['studioID'=>$studioID,'id'=>1])}}')">
                                        <img src="{{ asset('/images/edit_black.svg')}}" alt="edit">Edit
                                    </button>
                                    <button class="btn-theme dark btn-small account-edit btn-action" id="copy_btn_1"
                                        onclick="getCopyMsg('{{route('social-tracking.getMyAccountToken',['studioID'=>$studioID,'id'=>1])}}', 1)">
                                        <svg width="14" height="15" viewBox="0 0 14 15" fill="none"
                                            xmlns="http://www.w3.org/2000/svg">
                                            <path
                                                d="M1.91668 1.00033H1.41668V1.50033V10.3337H1.08334V1.50033C1.08334 1.04313 1.45949 0.666992 1.91668 0.666992H9.41668V1.00033H1.91668ZM3.75668 4.16735V4.16699C3.75668 3.70653 4.12941 3.33366 4.58334 3.33366H8.08334V3.83366V7.50033V8.00033H8.58334H12.25H12.75V13.5003C12.75 13.9575 12.3739 14.3337 11.9167 14.3337H4.57668C4.12274 14.3337 3.75001 13.9608 3.75001 13.5003L3.75668 4.16735ZM8.9369 3.48011L8.79045 3.33366H9.0429L12.75 7.04077V7.29322L12.6036 7.14677L8.9369 3.48011Z"
                                                fill="white" stroke="white" />
                                        </svg>
                                        <span>Copy Password</span>
                                    </button>
                                </div>
                                @endif
                            </div>
                        </div>
                    </div>
                    <div class="{{ (!array_key_exists(2,$myAccount)) ? 'account-item' : 'account-instaitem' }}">
                        <div class="row align-items-center">
                            <div class="col-md-8">
                                <div class="float-start account-subitem d-flex align-items-center">
                                    <svg width="28" height="28" viewBox="0 0 28 28" fill="none"
                                        xmlns="http://www.w3.org/2000/svg">
                                        <path
                                            d="M14 9.39496C11.4572 9.39496 9.39583 11.4563 9.39583 13.9991C9.39583 16.5419 11.4572 18.6033 14 18.6033C16.5428 18.6033 18.6042 16.5419 18.6042 13.9991C18.6042 11.4563 16.5428 9.39496 14 9.39496Z"
                                            fill="#000000" />
                                        <path fill-rule="evenodd" clip-rule="evenodd"
                                            d="M6.59018 1.36454C11.475 0.81859 16.525 0.81859 21.4099 1.36454C24.0993 1.66512 26.2684 3.78414 26.5841 6.48297C27.1682 11.4767 27.1682 16.5215 26.5841 21.5153C26.2684 24.2141 24.0993 26.3331 21.4099 26.6337C16.525 27.1797 11.475 27.1797 6.59018 26.6337C3.90078 26.3331 1.73159 24.2141 1.41594 21.5153C0.831874 16.5215 0.831874 11.4767 1.41594 6.48297C1.73159 3.78414 3.90078 1.66512 6.59018 1.36454ZM21.0833 5.49913C20.3009 5.49913 19.6667 6.13339 19.6667 6.9158C19.6667 7.6982 20.3009 8.33246 21.0833 8.33246C21.8657 8.33246 22.5 7.6982 22.5 6.9158C22.5 6.13339 21.8657 5.49913 21.0833 5.49913ZM7.27083 13.9991C7.27083 10.2827 10.2836 7.26996 14 7.26996C17.7164 7.26996 20.7292 10.2827 20.7292 13.9991C20.7292 17.7155 17.7164 20.7283 14 20.7283C10.2836 20.7283 7.27083 17.7155 7.27083 13.9991Z"
                                            fill="{{session()->has('impersonated_by')? '#AEBCD7':'#1A356A'}}" />
                                    </svg>
                                    <p> Instagram Account </p>
                                </div>
                            </div>

                            <div class="col-md-4">
                                @if(!array_key_exists(2,$myAccount))
                                <div class="float-end my_btn_end">
                                    <button class="my_btn plus_btn"
                                        onclick="getModalPopup('{{ route('social-tracking.getCredentialsForm',['studioID'=>$studioID,'id'=>2])}}')">
                                        <svg width="18" height="18" viewBox="0 0 18 18" fill="none"
                                            xmlns="http://www.w3.org/2000/svg">
                                            <path
                                                d="M17.25 10.1786H10.1786V17.25H7.82143V10.1786H0.75V7.82143H7.82143V0.75H10.1786V7.82143H17.25V10.1786Z"
                                                fill="{{session()->has('impersonated_by')? '#AEBCD7':'#1A356A'}}" />
                                        </svg>
                                    </button>
                                </div>
                                @else
                                <div class="action-btns mt-3 mt-md-0">
                                    <button class="btn-theme light btn-small btn-action" data-toggle="modal"
                                        onclick="getModalPopup('{{ route('social-tracking.getCredentialsForm',['studioID'=>$studioID,'id'=>2])}}')">
                                        <img src="{{ asset('/images/edit_black.svg')}}" alt="edit">Edit
                                    </button>
                                    <button class="btn-theme dark btn-small account-edit btn-action" id="copy_btn_2"
                                        onclick="getCopyMsg('{{route('social-tracking.getMyAccountToken',['studioID'=>$studioID,'id'=>2])}}', 2)">
                                        <svg width="14" height="15" viewBox="0 0 14 15" fill="none"
                                            xmlns="http://www.w3.org/2000/svg">
                                            <path
                                                d="M1.91668 1.00033H1.41668V1.50033V10.3337H1.08334V1.50033C1.08334 1.04313 1.45949 0.666992 1.91668 0.666992H9.41668V1.00033H1.91668ZM3.75668 4.16735V4.16699C3.75668 3.70653 4.12941 3.33366 4.58334 3.33366H8.08334V3.83366V7.50033V8.00033H8.58334H12.25H12.75V13.5003C12.75 13.9575 12.3739 14.3337 11.9167 14.3337H4.57668C4.12274 14.3337 3.75001 13.9608 3.75001 13.5003L3.75668 4.16735ZM8.9369 3.48011L8.79045 3.33366H9.0429L12.75 7.04077V7.29322L12.6036 7.14677L8.9369 3.48011Z"
                                                fill="white" stroke="white" />
                                        </svg>
                                        <span>Copy Password</span>
                                    </button>
                                </div>
                                @endif
                            </div>

                        </div>
                    </div>
                    <div class="{{ (!array_key_exists(5,$myAccount)) ? 'account-item' : 'account-instaitem' }}">
                        <div class="row align-items-center">
                            <div class="col-md-8">
                                <div class="float-start account-subitem d-flex align-items-center">
                                    <svg width="30" height="24" viewBox="0 0 30 24" fill="none"
                                        xmlns="http://www.w3.org/2000/svg">
                                        <path fill-rule="evenodd" clip-rule="evenodd"
                                            d="M7.5082 0.625276C12.4928 0.179596 17.5072 0.179596 22.4918 0.625276L24.6413 0.817472C26.7839 1.00904 28.515 2.64582 28.8261 4.77426C29.5267 9.56589 29.5267 14.4339 28.8261 19.2256C28.515 21.354 26.7839 22.9908 24.6413 23.1824L22.4918 23.3746C17.5072 23.8202 12.4928 23.8202 7.5082 23.3746L5.35863 23.1824C3.21611 22.9908 1.48501 21.354 1.17384 19.2256C0.473305 14.4339 0.473305 9.56589 1.17384 4.77426C1.48501 2.64582 3.21611 1.00904 5.35863 0.817472L7.5082 0.625276ZM6.29537 4.68942C5.9661 4.51212 5.56786 4.52098 5.2468 4.71274C4.92574 4.90451 4.72914 5.25094 4.72914 5.62492V19.0832C4.72914 19.6701 5.20483 20.1457 5.79164 20.1457C6.37844 20.1457 6.85414 19.6701 6.85414 19.0832V7.40377L14.4962 11.5187C14.8107 11.6881 15.1892 11.6881 15.5037 11.5187L23.1458 7.40377V19.0832C23.1458 19.6701 23.6215 20.1457 24.2083 20.1457C24.7951 20.1457 25.2708 19.6701 25.2708 19.0832V5.62492C25.2708 5.25094 25.0742 4.90451 24.7531 4.71274C24.4321 4.52098 24.0338 4.51212 23.7046 4.68942L15 9.37651L6.29537 4.68942Z"
                                            fill="{{session()->has('impersonated_by')? '#AEBCD7':'#1A356A'}}" />
                                    </svg>
                                    <p> Gmail Account </p>
                                </div>
                            </div>
                            <div class="col-md-4">
                                @if(!array_key_exists(5,$myAccount))
                                <div class="float-end my_btn_end">
                                    <button class="my_btn plus_btn "
                                        onclick="getModalPopup('{{ route('social-tracking.getCredentialsForm',['studioID'=>$studioID,'id'=>5])}}')">
                                        <svg width="18" height="18" viewBox="0 0 18 18" fill="none"
                                            xmlns="http://www.w3.org/2000/svg">
                                            <path
                                                d="M17.25 10.1786H10.1786V17.25H7.82143V10.1786H0.75V7.82143H7.82143V0.75H10.1786V7.82143H17.25V10.1786Z"
                                                fill="{{session()->has('impersonated_by')? '#AEBCD7':'#1A356A'}}" />
                                        </svg>
                                    </button>
                                </div>
                                @else
                                <div class="action-btns mt-3 mt-md-0">
                                    <button class="btn-theme light btn-small btn-action" data-toggle="modal"
                                        onclick="getModalPopup('{{ route('social-tracking.getCredentialsForm',['studioID'=>$studioID,'id'=>5])}}')">
                                        <img src="{{ asset('/images/edit_black.svg')}}" alt="edit">Edit
                                    </button>
                                    <button class="btn-theme dark btn-small account-edit btn-action" id="copy_btn_5"
                                        onclick="getCopyMsg('{{route('social-tracking.getMyAccountToken',['studioID'=>$studioID,'id'=>5])}}', 5)">
                                        <svg width="14" height="15" viewBox="0 0 14 15" fill="none"
                                            xmlns="http://www.w3.org/2000/svg">
                                            <path
                                                d="M1.91668 1.00033H1.41668V1.50033V10.3337H1.08334V1.50033C1.08334 1.04313 1.45949 0.666992 1.91668 0.666992H9.41668V1.00033H1.91668ZM3.75668 4.16735V4.16699C3.75668 3.70653 4.12941 3.33366 4.58334 3.33366H8.08334V3.83366V7.50033V8.00033H8.58334H12.25H12.75V13.5003C12.75 13.9575 12.3739 14.3337 11.9167 14.3337H4.57668C4.12274 14.3337 3.75001 13.9608 3.75001 13.5003L3.75668 4.16735ZM8.9369 3.48011L8.79045 3.33366H9.0429L12.75 7.04077V7.29322L12.6036 7.14677L8.9369 3.48011Z"
                                                fill="white" stroke="white" />
                                        </svg>
                                        <span>Copy Password</span>
                                    </button>
                                </div>
                                @endif
                            </div>
                        </div>
                    </div>
                    <div class="{{ (!array_key_exists(6,$myAccount)) ? 'account-item' : 'account-instaitem' }}">
                        <div class="row align-items-center">
                            <div class="col-md-8">
                                <div class="float-start account-subitem d-flex align-items-center">
                                    <svg width="30" height="30" viewBox="0 0 30 30" fill="none"
                                        xmlns="http://www.w3.org/2000/svg">
                                        <path
                                            d="M15.0007 0.833008C7.18065 0.833008 0.833984 7.17967 0.833984 14.9997C0.833984 22.8197 7.18065 29.1663 15.0007 29.1663C22.8207 29.1663 29.1673 22.8197 29.1673 14.9997C29.1673 7.17967 22.8207 0.833008 15.0007 0.833008ZM15.0007 5.08301C17.3523 5.08301 19.2507 6.98134 19.2507 9.33301C19.2507 11.6847 17.3523 13.583 15.0007 13.583C12.649 13.583 10.7507 11.6847 10.7507 9.33301C10.7507 6.98134 12.649 5.08301 15.0007 5.08301ZM15.0007 25.1997C11.459 25.1997 8.32815 23.3863 6.50065 20.638C6.54315 17.8188 12.1673 16.2747 15.0007 16.2747C17.8198 16.2747 23.4582 17.8188 23.5007 20.638C21.6732 23.3863 18.5423 25.1997 15.0007 25.1997Z"
                                            fill="{{session()->has('impersonated_by')? '#AEBCD7':'#1A356A'}}" />
                                    </svg>
                                    <p> Loyalsnap </p>
                                </div>
                            </div>
                            <div class="col-md-4">
                                @if(!array_key_exists(6,$myAccount))
                                <div class="float-end my_btn_end">
                                    <button class="my_btn plus_btn"
                                        onclick="getModalPopup('{{ route('social-tracking.getCredentialsForm',['studioID'=>$studioID,'id'=>6])}}')">
                                        <svg width="18" height="18" viewBox="0 0 18 18" fill="none"
                                            xmlns="http://www.w3.org/2000/svg">
                                            <path
                                                d="M17.25 10.1786H10.1786V17.25H7.82143V10.1786H0.75V7.82143H7.82143V0.75H10.1786V7.82143H17.25V10.1786Z"
                                                fill="{{session()->has('impersonated_by')? '#AEBCD7':'#1A356A'}}" />
                                        </svg>
                                    </button>
                                </div>
                                @else
                                <div class="action-btns mt-3 mt-md-0">
                                    <button class="btn-theme light btn-small btn-action" data-toggle="modal"
                                        onclick="getModalPopup('{{ route('social-tracking.getCredentialsForm',['studioID'=>$studioID,'id'=>6])}}')">
                                        <img src="{{ asset('/images/edit_black.svg')}}" alt="edit">Edit
                                    </button>
                                    <button class="btn-theme dark btn-small account-edit btn-action" id="copy_btn_6"
                                        onclick="getCopyMsg('{{route('social-tracking.getMyAccountToken',['studioID'=>$studioID,'id'=>6])}}', 6)">
                                        <svg width="14" height="15" viewBox="0 0 14 15" fill="none"
                                            xmlns="http://www.w3.org/2000/svg">
                                            <path
                                                d="M1.91668 1.00033H1.41668V1.50033V10.3337H1.08334V1.50033C1.08334 1.04313 1.45949 0.666992 1.91668 0.666992H9.41668V1.00033H1.91668ZM3.75668 4.16735V4.16699C3.75668 3.70653 4.12941 3.33366 4.58334 3.33366H8.08334V3.83366V7.50033V8.00033H8.58334H12.25H12.75V13.5003C12.75 13.9575 12.3739 14.3337 11.9167 14.3337H4.57668C4.12274 14.3337 3.75001 13.9608 3.75001 13.5003L3.75668 4.16735ZM8.9369 3.48011L8.79045 3.33366H9.0429L12.75 7.04077V7.29322L12.6036 7.14677L8.9369 3.48011Z"
                                                fill="white" stroke="white" />
                                        </svg>
                                        <span>Copy Password</span>
                                    </button>
                                </div>
                                @endif
                            </div>

                        </div>
                    </div>
                    @foreach($otherAccount as $newAccount)
                    <div class="{{ (!array_key_exists(4,$myAccount)) ? 'account-item' : 'account-instaitem' }}">
                        <div class="row align-items-center">
                            <div class="col-md-8">
                                <div class="float-start account-subitem d-flex align-items-center">
                                    <svg width="30" height="30" viewBox="0 0 30 30" fill="none"
                                        xmlns="http://www.w3.org/2000/svg">
                                        <path
                                            d="M15.0007 0.833008C7.18065 0.833008 0.833984 7.17967 0.833984 14.9997C0.833984 22.8197 7.18065 29.1663 15.0007 29.1663C22.8207 29.1663 29.1673 22.8197 29.1673 14.9997C29.1673 7.17967 22.8207 0.833008 15.0007 0.833008ZM15.0007 5.08301C17.3523 5.08301 19.2507 6.98134 19.2507 9.33301C19.2507 11.6847 17.3523 13.583 15.0007 13.583C12.649 13.583 10.7507 11.6847 10.7507 9.33301C10.7507 6.98134 12.649 5.08301 15.0007 5.08301ZM15.0007 25.1997C11.459 25.1997 8.32815 23.3863 6.50065 20.638C6.54315 17.8188 12.1673 16.2747 15.0007 16.2747C17.8198 16.2747 23.4582 17.8188 23.5007 20.638C21.6732 23.3863 18.5423 25.1997 15.0007 25.1997Z"
                                            fill="{{session()->has('impersonated_by')? '#AEBCD7':'#1A356A'}}" />
                                    </svg>
                                    <p> {{$newAccount->platform_name}} </p>
                                </div>
                            </div>
                            <div class="col-md-4">
                                @if(!array_key_exists(4,$myAccount))
                                <div class="float-end my_btn_end">
                                    <button class="my_btn plus_btn btn-action"
                                        onclick="getModalPopup('{{ route('social-tracking.getOtherAccountForm',['studioID'=>$studioID,'id'=>$newAccount->id])}}')">
                                        <svg width="18" height="18" viewBox="0 0 18 18" fill="none"
                                            xmlns="http://www.w3.org/2000/svg">
                                            <path
                                                d="M17.25 10.1786H10.1786V17.25H7.82143V10.1786H0.75V7.82143H7.82143V0.75H10.1786V7.82143H17.25V10.1786Z"
                                                fill="{{session()->has('impersonated_by')? '#AEBCD7':'#1A356A'}}" />
                                        </svg>
                                    </button>
                                </div>
                                @else
                                <div class="action-btns mt-3 mt-md-0">
                                    <button class="btn-theme light btn-small btn-action" data-toggle="modal"
                                        onclick="getModalPopup('{{ route('social-tracking.editOtherAccountForm',['studioID'=>$studioID,'id'=>$newAccount->id])}}')">
                                        <img src="{{ asset('/images/edit_black.svg')}}" alt="edit">Edit
                                    </button>
                                    <button class="btn-theme dark btn-small account-edit btn-action"
                                        id='copy_btn_'
                                        onclick="getCopyMsg('{{route('social-tracking.getMyOtherAccountToken',['studioID'=>$studioID,'id'=>$newAccount->id ])}}', {{ $newAccount->id}})">
                                        <svg width="14" height="15" viewBox="0 0 14 15" fill="none"
                                            xmlns="http://www.w3.org/2000/svg">
                                            <path
                                                d="M1.91668 1.00033H1.41668V1.50033V10.3337H1.08334V1.50033C1.08334 1.04313 1.45949 0.666992 1.91668 0.666992H9.41668V1.00033H1.91668ZM3.75668 4.16735V4.16699C3.75668 3.70653 4.12941 3.33366 4.58334 3.33366H8.08334V3.83366V7.50033V8.00033H8.58334H12.25H12.75V13.5003C12.75 13.9575 12.3739 14.3337 11.9167 14.3337H4.57668C4.12274 14.3337 3.75001 13.9608 3.75001 13.5003L3.75668 4.16735ZM8.9369 3.48011L8.79045 3.33366H9.0429L12.75 7.04077V7.29322L12.6036 7.14677L8.9369 3.48011Z"
                                                fill="white" stroke="white" />
                                        </svg>
                                        <span>Copy Password</span>
                                    </button>
                                </div>
                                @endif
                            </div>
                        </div>
                    </div>
                    @endforeach

                </div>
            </div>
        </div>
    </div>
    @endsection
    @push('scripts')
    <script>
        
    var msgText = ''; 
    
function getCopyMsg(url, id) {    
    $.ajax({
        type: "POST",
        url: url,
        dataType: 'json',
        async: false,
        data: {
            _token: '{{ csrf_token() }}'
        },
        success: function(response) { 
            msgText = response[0];
            
        },
        error: function(error) {
            // Or handle the errors in your own way
            console.log(error);
        }
    });
    copyToClipboard(msgText,id);
}

function copyToClipboard(string,id) {    
  let textarea;
  let result;

  try {
    textarea = document.createElement('textarea');
    textarea.setAttribute('readonly', true);
    textarea.setAttribute('contenteditable', true);
    textarea.style.position = 'fixed'; // prevent scroll from jumping to the bottom when focus is set.
    textarea.value = string;

    document.body.appendChild(textarea);

    textarea.focus();
    textarea.select();

    const range = document.createRange();
    range.selectNodeContents(textarea);

    const sel = window.getSelection();
    sel.removeAllRanges();
    sel.addRange(range);

    textarea.setSelectionRange(0, textarea.value.length);
    result = document.execCommand('copy');
  } catch (err) {
    console.error(err);
    result = null;
  } finally {
    document.body.removeChild(textarea);
  }
  $('#copy_btn_' + id).html('Copied');
    setTimeout(
        function() {
            var cpy_icon =
                '<svg width="14" height="15" viewBox="0 0 14 15" fill="none" xmlns="http://www.w3.org/2000/svg">' +
                '<path d="M9.86654 0.166992H1.86654C1.1332 0.166992 0.533203 0.766992 0.533203 1.50033V10.8337H1.86654V1.50033H9.86654V0.166992ZM9.19987 2.83366L13.1999 6.83366V13.5003C13.1999 14.2337 12.5999 14.8337 11.8665 14.8337H4.52654C3.7932 14.8337 3.19987 14.2337 3.19987 13.5003L3.20654 4.16699C3.20654 3.43366 3.79987 2.83366 4.5332 2.83366H9.19987ZM8.5332 7.50033H12.1999L8.5332 3.83366V7.50033Z" />' +
                '</svg>';
            $('#copy_btn_' + id).html(cpy_icon + ' Copy Message');
        }, 5000);
  return true;
}
    </script>
    @endpush