@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 !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="name_staff_invite">
            <p style="color: #222222; margin-bottom: 10px; font-size: 16px; font-weight: 600">スタッフ名を変更</p>
            <p class="f14-w300">変更したいスタッフ名を入力して保存をクリックしてください。</p>

            <div style="background-color: #F5F6F7; border-radius: 4px; padding: 8px 10px; color:#222222; width: 360px;margin-top: 20px;font-size: 14px;">
                <span style=" font-weight: 600; font-size: 12px">現在スタッフ名：</span>{{ $staffBot->staff_name }}
            </div>

            <input type="text"
                id="name-staft"
                v-model="staff_name"
                placeholder="新しいスタッフ名を入力してください">

        </div>

        <div class="list_bot_invite" style="margin-bottom: 40px;">
            <div style="color: #222222; font-size: 16px; font-weight: 600; ">アカウント権限を変更</div>

            <div class="f14-w300" style="margin-top: 10px; color: #666666">権限を変更したいアカウントにチェックを入れて、権限内容を選択後、保存をクリックしてください。</div>
            <div>
                <div class="select-bot">
                    <div class="select-bot-item">
                        <input type="checkbox" id="checkAll"
                            v-model="selectInviteAllBot"
                            value="1"
                            @change="changeSelectedAll"
                            class="custom-checkbox">
                        <label for="checkAll" class="label-checkbox"></label>
                        <label for="checkAll" class="f16-w300">全てを選択／解除</label>
                    </div>
                    <select class="form-control my_class input_border"
                        v-model="role_invite_all"
                        :disabled="!selectInviteAllBot"
                        @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" width="32px" height="32px" style="border-radius: 50%; object-fit: contain; margin-right: 15px;" />
                        <label :for="'item' + index" class="f16-w300 label-text">@{{ item.view_name }}</label>
                    </div>
                    <select class="form-control my_class input_border"
                        :disabled="item.selected != 1 || selectInviteAllBot == 1"
                        :class="{'unseleted': item.selected != 1}"
                        v-model="item.role_id">
                        <option
                            v-for="(role, indexRole) in roles"
                            :value="role.id">@{{ role.name }}</option>
                    </select>
                </div>
            </div>
        </div>

        <button class="btn btn-staff-common"
            @click="editListBotOfStaff">
            保存する
        </button>
        <div style="margin-top: 30px">
            <a href="/admin/employees-management" class="a-custom f14-w300">スタッフ管理に戻る</a>
        </div>
        <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);
            var staffBot = @json($staffBot);
        </script>
        <script src="/js/admin/employees/edit_staft.js?v={{config('sns-line.version')}}"></script>
        @endpush