@extends("common.layout")

@section("header")
<script src="https://cdn.jsdelivr.net/npm/@tarekraafat/autocomplete.js@10.2.7/dist/autoComplete.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tarekraafat/autocomplete.js@10.2.7/dist/css/autoComplete.01.min.css">
@endsection

@section("content")

<form name="user-roles" method="post" action="{{ $role->id ? route('user.role.store', ['id'=>$role->id]):route('user.role.store') }}">
    @csrf

    <h1>
        <div><a href="{{ route('user.role') }}"><i class="bi bi-arrow-left-circle"></i></a> {{ $role->name }}</div>
        
        <div class="fixed-btns">
            <button type="submit" class="btn btn-primary">확인</button>
        </div>
    </h1>

    <div class="layout-2-cols">
        <section>
            <header>Permission</header>
            <main>
                @if ($role->name == 'root')
                    All Permissions
                @else
                    @php
                        $role_perms = [];
                        foreach ($role->permissions as $p) {
                            $role_perms[] = $p->id;
                        }
                    @endphp

                    <ul class="permissions">
                    @foreach ($permissions as $permission)
                        <li>
                            <input class="form-check-input" type="checkbox" name="permissions[]" value="{{ $permission->id }}" @checked(in_array($permission->id, $role_perms))> 
                            <label class="form-check-label">{{ $permission->name }}</label>
                        </li>
                    @endforeach
                    </ul>
                @endif
            </main>
        </section>

        <section>
            <header>Users</header>
            <main>
                <label>
                    <input type="text" id="member-selector" class="member-selector" placeholder="Search User" data-target="users">
                </label>

                <ul class="member-selector-holder" id="users-holder">
                    @foreach ($role->users->sortBy('name') as $user)
                    <li>
                        <a href="{{ route('user.detail', ['id'=>$user->id]) }}">{{ $user->name }}</a>
                        <input type="hidden" name="users[]" value="{{ $user->id }}">
                        <button type="button" class="btn remove-btn"><i class="bi bi-dash-circle-fill"></i></button>
                    </li>
                    @endforeach
                </ul>
            </main>
        </section>
    </div>
</form>
@endsection

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

    const autoCompleteJS = new autoComplete({ 
        selector: "#member-selector",
        placeHolder: "Search for User...",
        data: {
            src: async (query) => {
                try {
                    const source = await fetch('{{ route('api.user.search') }}?keyword='+query);
                    const data = await source.json();

                    return data;
                } catch (error) {
                    return error;
                }
            }
        },
        resultItem: {
            highlight: true,
        },
        debounce: 300,
        threshold: 2
     });

    document.querySelector("#member-selector").addEventListener("selection", function (event) {
        const selectedValue = event.detail.selection.value;
        const match = selectedValue.match(/\[(\d+)\]\s*(.*?)\s*\((.*?)\)/);

        if (match) {
            const id = match[1];
            const name = match[2];
            const edm_id = match[3];
            const li = document.createElement('li');

            console.log("Extracted - id:", id, "name:", name, "edm_id:", edm_id);

            li.innerHTML = `
                ${escapeHTML(name)}
                <input type="hidden" name="users[]" value="${escapeHTML(id)}">
                <button type="button" class="btn remove-btn">
                    <i class="bi bi-dash-circle-fill"></i>
                </button>
            `;
            document.querySelector("#users-holder").appendChild(li);
        }
    });

    // Helper function to escape HTML special characters
    function escapeHTML(str) {
        return str.replace(/[&<>'"]/g, 
            tag => ({
                '&': '&amp;',
                '<': '&lt;',
                '>': '&gt;',
                "'": '&#39;',
                '"': '&quot;'
            }[tag] || tag)
        );
    }
</script>
@endpush