@extends("common.layout")

@section('content')
<form class="default" name="update-permission" method="post" action="{{ route('user.permission.store') }}">
    @csrf

    <h1>
        Permissions
        @if($User->id == 1)
        <div class="fixed-btns">
            <button class="btn btn-primary" type="submit">확인</button>
        </div>
        @endif
    </h1>

    @if($User->id != 1)
    <div class="alert alert-danger" role="alert">
        Developer Only!
    </div>
    @endif

    <section>
        <header>
            Permissions
            <a href="javascript:;" onclick="addPerm()"><i class="bi bi-plus-circle-dotted"></i></a>
        </header>
        <main>
            <ul class="permissions form" id="perm-form">
            @foreach ($permissions as $permission)
                <li class="input-group">
                    <input class="form-control form-control-sm" type="text" name="permissions[{{ $permission->id }}]" value="{{ $permission->name }}">
                    <button type="button" class="btn btn-sm btn-outline-secondary remove-btn"><i class="bi bi-dash-circle-fill"></i></button>
                </li>
            @endforeach
            </ul>
        </main>
    </section>
</form>
@endsection

@push('script')
    <script>
        const addPerm = () => {
            const item = `<li class="input-group"><input class="form-control form-control-sm" type="text" name="permissions[]"></li>`;
            document.querySelector('#perm-form').insertAdjacentHTML('beforeend', item);
        };

        document.addEventListener('click', (event) => {
            const removeBtn = event.target.closest('.remove-btn');
            if (removeBtn) {
                event.preventDefault();
                const li = removeBtn.closest('li');
                if (li) {
                    li.remove();
                }
            }
        });
    </script>
@endpush