@extends('layout.admin.main')
@push('css')
<link rel="stylesheet" href="/css/admin/employees/change_owner_bot.css?v={{config('sns-line.version')}}">
<link rel="stylesheet" href="/css/admin/employees/component-header.css?v={{config('sns-line.version')}}">
<link rel="stylesheet" href="/css/base/main.css?v={{config("sns-line.version")}}">
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/toastify-js/src/toastify.min.css">


@endpush
@section('content')
<div id="change-bot-owner" v-cloak>
    <div class="header">
        <h2 style="font-size: 24px !important; color: #222222; font-weight: 600; padding: 10px 10px 10px 0">主管理者を変更する</h2>
        <button class="btn-header">
            <img src="{{ asset('images/icon_material-library-books.png') }}" alt="" style="margin-right: 6px; font-weight: 600;">
            <span style="font-size: 14px; font-weight: 600;">マニュアル</span>
        </button>
    </div>
    <div class="content-body" style="padding-top: 37px;">
        <div class="notification">
            <p class="f16-w600" style="color: #F44336;">注意事項</p>
            <p class="f14-w300" style="margin-top: 16px;">・有料プランをご利用いただいている場合でも、お支払い方法は変更されません。<br>
                　必要に応じて<a href="">クレジットカード情報の変更</a> などをお願いいたします。</p>
            <p class="f14-w300" style="margin-top: 16px;">・主管理者権限の移動完了後は、元々主管理者だった方の操作権限は副管理人となります。</p>
        </div>
        <p class="f14-w300" style="color: #666666; margin-top: 32px;">① 主管理者権限を移行したいアカウントを選択してください 。</p>
        <div class="select-bot" style="margin-top: 40px;">
            <input type="checkbox" v-model="selectInviteAllBot" name="" class="custom-checkbox" id="checkAll">
            <label for="checkAll" class="label-checkbox"></label>
            <label for="checkAll" class="label-option">全てを選択／解除</label>
        </div>

        <div class="select-bot" style="margin-top: 40px;"
             v-for="(bot, index) in bot_role"
        >
            <input type="checkbox"
                   name=""
                   :value="bot.id"
                   v-model="selected"
                   class="custom-checkbox"
                   :id="'item-bot' + bot.id">
            <label :for="'item-bot' + bot.id" class="label-checkbox"></label>
            <label :for="'item-bot' + bot.id" class="label-option">@{{ bot.view_name }}</label>
        </div>


        <p class="f14-w300" style="margin-top: 48px;">② 主管理者権限移行用URLを発行して、移行したい方に共有してください。<br>
            　 URLは、24時間有効で招待後は無効となります。</p>

        <button class="button-url f14-w600" style="width: 256px;"
            @click="generateLinkChangeBotOwner"
        >主管理者権限移行用URLを発行する</button>

        <div style="position: relative;margin-bottom: 64px; width: 40%;     margin-top: 15px;">
            <div style="position: relative; display: inline-block" >
                <div class="input-link">
                    @{{ link }}
                </div>
                <svg class="btn-copy-link"
                     @click="copyTextToClipboard(link)"
                     xmlns="http://www.w3.org/2000/svg" width="13" height="14" viewBox="0 0 13 14" fill="none">
                    <path d="M9 1H1V9.66667" stroke="#5799DB" stroke-linecap="round" stroke-linejoin="round"/>
                    <path d="M3.66669 3.66675H11.6667V11.6667C11.6667 12.0204 11.5262 12.3595 11.2762 12.6096C11.0261 12.8596 10.687 13.0001 10.3334 13.0001H5.00002C4.6464 13.0001 4.30726 12.8596 4.05721 12.6096C3.80716 12.3595 3.66669 12.0204 3.66669 11.6667V3.66675Z" stroke="#5799DB" stroke-linecap="round" stroke-linejoin="round"/>
                </svg>
            </div>
        </div>

        <a href="/admin/employees-management" class="a-custom f14-w300">スタッフ管理に戻る</a>
    <div>
</div>
@endsection
@push('script')
{{--    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>--}}
{{--    <script src="/js/form_answer/jquery.ui.datepicker-ja.js"></script>--}}
{{--    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>--}}
    <script src="https://unpkg.com/vue@2.6.12/dist/vue.js"></script>
{{--    <script src="/js/vue-paginate.js"></script>--}}
{{--    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>--}}
{{--    <script src="/plugins/vuejs/vue-resource@1.3.4.js"></script>--}}
            <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/toastify-js"></script>
    <script src="/js/admin/employees/change_owner_bot.js?v={{config('sns-line.version')}}"></script>
@endpush