@extends('layout.admin.main')
@section('title', 'スタッフ管理（スタッフ追加）')
@push('css')
<link rel="stylesheet" href="/css/admin/employees/invite-staft.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="invite" v-cloak>
    <div class="header">
        <h2 style="font-size: 24px; color: #222222; font-weight: 700; 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="name_staff_invite">
            <p class="f14-w300 color-text font-[700]">① 追加するスタッフ名を入力してください <span style="color: #F44336;">*</span></p>
            <input type="text" id="name-staft"
                v-model="staff_name"
                placeholder="新しいスタッフ名を入力してください">
        </div>
        <div class="list_bot_invite">
            <p class="f14-w300 color-text">② 操作権限を付与したいアカウントにチェックを入れて、権限内容選択してください。</p>
            <p class="f14-w300" style="margin-top: 16px; color: #F44336">※ フリープラン場合、スタッフの追加はできません。</p>
            <div style="margin-top: 48px !important;">
                <div class="select-bot">
                    <div class="select-bot-item">
                        <input type="checkbox" id="checkAll"
                               v-model="selectInviteAllBot"
                               @change="changeSelectedAll"
                               value="1"
                               class="custom-checkbox">
                        <label for="checkAll" class="label-checkbox"></label>
                        <label for="checkAll" class="color-text f16-w300">全てを選択／解除</label>
                    </div>
                    <select class="form-control my_class input_border" 
                        :disabled="!selectInviteAllBot"
                            v-model="role_invite_all"
                            @change="changeRoleInviteAll"
                        :class="{'unseleted': !selectInviteAllBot}"
                    >
                        <option
                                v-for="(role, indexRole) in roles"
                                :value="role.id"
                        >@{{ role.name }}</option>
                    </select>
                </div>
    
                <div class="select-bot"
                    v-for="(item, index) in bot_role"
                >
                    <div class="select-bot-item">
                        <input type="checkbox"
                               value="1"
                               v-model="item.selected"
                               name="bot"
                               :id="'item' + index"
                               class="custom-checkbox">
                        <label :for="'item' + index" class="label-checkbox"></label>
                        <img @error="setAltImg" :src="item.bot_image ? item.bot_image : '/images/blank_avatar.png'" width="32px" height="32px" style="border-radius: 50%; object-fit: contain; margin-right: 15px;"/>
                        <label :for="'item' + index" class="color-text f16-w300 label-text">@{{ item.view_name }}</label>
                    </div>
                    <select class="form-control my_class input_border"
                            :disabled="item.selected == 0 || selectInviteAllBot == 1"
                            :class="{'unseleted': item.selected == 0}"
                            v-model="item.role_id"
                    >
                        <option
                                v-for="(role, indexRole) in roles"
                                :value="role.id"
                        >@{{ role.name }}</option>
                    </select>
                </div>
            </div>
        </div>

        <div class="list_bot_invite" style="margin-bottom: 40px;">
            <p class="f14-w300 color-text">③ 招待用URLを発行して、招待したい方に共有してください。<br>
            　 URLは、24時間有効で招待後は無効となります。</p>
            <button class="button-url f14-w600"
                @click="generateLinkInviteStaff"
            >招待用URLを発行</button>
            <div style=" margin-top: 16px">
                <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>
            <div style="font-size: 14px;">
                招待を受けるユーザーは上記URLから<br/>
                <span style="color: #5799DB; font-weight: bold;">既存のエルメアカウントでログイン</span>するか<br/>
                <span style="color: #5799DB; font-weight: bold">新規エルメアカウント登録</span>を行なってください。
            </div>
        </div>
        <a href="/admin/employees-management" class="a-custom f14-w300">スタッフ管理に戻る</a>
    <div>
</div>
@endsection
@push('script')

    <script src="https://unpkg.com/vue@2.6.12/dist/vue.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/toastify-js"></script>


    <script>
        var roles = @json($roles);
    </script>
    <script src="/js/admin/employees/invite_staft.js?v={{config('sns-line.version')}}"></script>
@endpush