@extends('layouts.app')

@section('contents')
    <section id="basic-vertical-layouts">
        <div class="row">
            <div class="col-12">
                <div class="card">
                    <div class="card-header">
                        <h4 class="card-title">เพิ่มสิทธิประเภทผู้ใช้ใหม่</h4>
                    </div>
                    <div class="card-body">
                        {{ MyNotify::get() }}
                        <form class="form form-vertical" method="post" action="{{ route('setting.roles.store') }}">
                            @csrf
                            <div class="row">
                                <div class="col-12">
                                    <div class="mb-1">
                                        <label class="form-label" for="name">ชื่อประเภท</label>
                                        <input type="text" id="name" class="form-control" name="name"
                                            placeholder="กรอกชื่อประเภท" />
                                    </div>
                                </div>
                                <hr />
                                @foreach ($permissions as $value)
                                    <div class="col-12">
                                        <div class="mb-1">
                                            <label class="form-label" for="{{ $value->id }}">{{ $value->name }}</label>
                                            @foreach ($value->subPermissions as $item)
                                                <div class="form-check form-check-inline">
                                                    <input class="form-check-input" type="checkbox"
                                                        id="{{ $item->permission }}" value="{{ $item->permission }}"
                                                        name="roles[]"
                                                        {{ is_array(old('roles')) && in_array($item->permission, old('roles')) ? ' checked' : '' }} />
                                                    <label class="form-check-label" for="{{ $item->permission }}">
                                                        {{ $item->name }}
                                                    </label>
                                                </div>
                                            @endforeach
                                        </div>
                                    </div>
                                    <hr />
                                @endforeach
                                <div class="col-12">
                                    <button type="submit" class="btn btn-primary me-1"
                                        onclick="return confirm('แน่ใจหรือไม่?')">บันทึก</button>
                                    <button type="reset" class="btn btn-outline-secondary">Reset</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection

@section('page.js')
    <script>
        new Vue({
            el: '#app',
            data: {
                user: {
                    name: '',
                    username: '',
                    role_id: '',
                },
                url_update: ''

            },
            methods: {
                editUser(id, name, username, role_id) {
                    this.url_update = '{{ url('/setting/users') }}' + '/' + id;
                    this.user.name = name;
                    this.user.username = username;
                    this.user.role_id = role_id;
                }
            },
        });
    </script>
@endsection