@extends('org.layout.adminPanel')
@section('title', 'Assign user')
@section('section')
    @php
        $goBack = isset($backUrl) ? $backUrl : url()->previous();
    @endphp
    <a href="{{ $goBack }}" style="text-decoration: none; color:var(--primary);" class="link">Back</a>
    / User / Assign / Form
@endsection
@section('css')
    {{-- css --}}
    <style>
        .hr::before {
            content: attr("aria-label");
            text-align: center;
            left: 50%;
            transform: translate(-50%, -50%);
            padding-inline: 1em;
        }
        .selectbox{
            margin-bottom: 1em;
            padding: .5em .7em;
            border: 1px solid var(--border-color);
            outline: transparent;
            border-radius: .4em;
        }
    </style>
@endsection
@section('content')
    @isset($orgmsg)
        <script>
            alert("{{ $orgmsg }}");
        </script>
    @endisset
    {{-- content --}}
    <div class="container-fluid pt-3 pb-5">
        <div class="container">
            <div class="form-wrapper-3 mx-auto">
                <div class="row mb-5">
                    <div class="col-12">
                        <h2>User info</h2>
                        <table>
                            <tr>
                                <td>Name</td>
                                <td width="20">
                                    <center>:</center>
                                </td>
                                <td>Jaypal Sapara</td>
                            </tr>
                            <tr>
                                <td>Email</td>
                                <td>
                                    <center>:</center>
                                </td>
                                <td>jaypal.arvaan@gmail.com</td>
                            </tr>
                            <tr>
                                <td>Role</td>
                                <td>
                                    <center>:</center>
                                </td>
                                <td>Department manager</td>
                            </tr>
                        </table>
                    </div>
                </div>
                <div class="row mb-5">
                    <div class="col-12">
                        <h2>Department</h2>
                        <div>
                            <select name="department" class="selectbox makeSelect2" style="width:100%;"
                                onchange="subDepartment(this)">
                                <option value="" selected>Select department</option>
                                @foreach ($dep as $data)
                                    <option value="{{ encode($data->id) }}">{{ $data->name }}</option>
                                @endforeach
                            </select>
                            <div id="subDepartmentArea">
                            </div>
                        </div>
                        <br>
                        <div class="fieldset mb-4 d-flex flex-wrap" aria-label="Departman section">
                            <div class="checkboxContainer d-flex align-items-center mx-2 my-1">
                                <input type="checkbox" class="me-2" name="" id="c1"> <label
                                    for="c1">Add/Manage project manager</label>
                            </div>
                            <div class="checkboxContainer d-flex align-items-center mx-2 my-1">
                                <input type="checkbox" class="me-2" name="" id="c2"> <label
                                    for="c2">Add/Edit projects</label>
                            </div>
                            <div class="checkboxContainer d-flex align-items-center mx-2 my-1">
                                <input type="checkbox" class="me-2" name="" id="c3"> <label
                                    for="c3">Archive projects</label>
                            </div>
                            <div class="checkboxContainer d-flex align-items-center mx-2 my-1">
                                <input type="checkbox" class="me-2" name="" id="c4" data-view-only> <label
                                    for="c4">View only</label>
                            </div>
                        </div>
                    </div>
                </div>
                {{-- <div class="row mb-5">
                    <div class="col-12">
                        <h2>Project</h2>
                        <div>
                            <select name="project" class="makeSelect2" style="width:100%;" id="project">
                                <option value="1">1</option>
                                <option value="2">2</option>
                                <option value="3">3</option>
                            </select>
                        </div>
                        <br>
                        <div class="fieldset mb-4 d-flex flex-wrap" aria-label="Project section">
                            <div class="checkboxContainer d-flex align-items-center mx-2 my-1">
                                <input type="checkbox" class="me-2" name="" id="c5"> <label
                                    for="c5">Add/Manage governance Teams</label>
                            </div>
                            <div class="checkboxContainer d-flex align-items-center mx-2 my-1">
                                <input type="checkbox" class="me-2" name="" id="c6"> <label
                                    for="c6">Add/Edit Folders</label>
                            </div>
                            <div class="checkboxContainer d-flex align-items-center mx-2 my-1">
                                <input type="checkbox" class="me-2" name="" id="c7"> <label
                                    for="c7">Archive Folders</label>
                            </div>
                            <div class="checkboxContainer d-flex align-items-center mx-2 my-1">
                                <input type="checkbox" class="me-2" name="" id="c8" data-view-only>
                                <label for="c8">View only</label>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row mb-5">
                    <div class="col-12">
                        <h2>Folder</h2>
                        <div>
                            <select name="project" class="makeSelect2" style="width:100%;" id="folder">
                                <option value="1">1</option>
                                <option value="2">2</option>
                                <option value="3">3</option>
                            </select>
                        </div>
                        <br>
                        <div class="fieldset mb-4 d-flex flex-wrap" aria-label="Governance team section">
                            <div class="checkboxContainer d-flex align-items-center mx-2 my-1">
                                <input type="checkbox" class="me-2" name="" id="c9"> <label
                                    for="c9">Add/Manage reviewer</label>
                            </div>
                            <div class="checkboxContainer d-flex align-items-center mx-2 my-1">
                                <input type="checkbox" class="me-2" name="" id="c10"> <label
                                    for="c10">Add/Edit items</label>
                            </div>
                            <div class="checkboxContainer d-flex align-items-center mx-2 my-1">
                                <input type="checkbox" class="me-2" name="" id="c11"> <label
                                    for="c11">Archive items</label>
                            </div>
                            <div class="checkboxContainer d-flex align-items-center mx-2 my-1">
                                <input type="checkbox" class="me-2" name="" id="c12"> <label
                                    for="c12">Add/Manage sub-folder</label>
                            </div>
                            <div class="checkboxContainer d-flex align-items-center mx-2 my-1">
                                <input type="checkbox" class="me-2" name="" id="c13" data-view-only>
                                <label for="c13">View only</label>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row mb-5">
                    <div class="col-12">
                        <h2>Items</h2>
                        <div>
                            <select name="items" class="makeSelect2" style="width:100%;" id="items">
                                <option value="1">1</option>
                                <option value="2">2</option>
                                <option value="3">3</option>
                            </select>
                        </div>
                        <br>
                        <div class="fieldset mb-4 d-flex flex-wrap" aria-label="Reviewer section">
                            <div class="checkboxContainer d-flex align-items-center mx-2 my-1">
                                <input type="checkbox" class="me-2" name="" id="c14"> <label
                                    for="c14">Reviewing an item</label>
                            </div>
                            <div class="checkboxContainer d-flex align-items-center mx-2 my-1">
                                <input type="checkbox" class="me-2" name="" id="c15"> <label
                                    for="c15">Commenting on an item</label>
                            </div>
                            <div class="checkboxContainer d-flex align-items-center mx-2 my-1">
                                <input type="checkbox" class="me-2" name="" id="c16"> <label
                                    for="c16">Can view all reviewer level item notes</label>
                            </div>
                            <div class="checkboxContainer d-flex align-items-center mx-2 my-1">
                                <input type="checkbox" class="me-2" name="" id="c17" data-view-only>
                                <label for="c17">View only</label>
                            </div>
                        </div>
                    </div>
                </div> --}}
            </div>
        </div>
    </div>
@endsection
@section('js')
    {{-- js --}}
    <script>
        $(document).ready(function() {
            const viewOnlys = document.querySelectorAll("[data-view-only]");
            viewOnlys.forEach(viewonly => {
                viewonly.addEventListener("change", e => {
                    if (!e.target.checked) return;
                    let fieldset = e.target.closest(".fieldset");
                    let checkbox = [...fieldset.querySelectorAll("[type='checkbox']")];
                    checkbox.filter(box => (box.dataset.viewOnly != '') ? box.checked = false : '');
                });
            });
            const permissions = [...document.querySelectorAll("input[type='checkbox']")];
            permissions.filter(box => box.dataset.viewOnly != '').forEach(perm => {
                perm.addEventListener("change", e => {
                    if (!e.target.checked) return;
                    let fieldset = e.target.closest(".fieldset");
                    let checkbox = fieldset.querySelector("[data-view-only]");
                    checkbox.checked = false;
                });
            });
            // get sub department
            // user
            // $(".makeSelect2").select2();
        });

        function subDepartment(e) {

            let parent = e.closest(`#subDepartmentArea`);
            let is_delete = false;
            if (parent == null)
                document.querySelector("#subDepartmentArea").innerHTML = "";
            else
                [...parent.children].forEach(child => {
                    if (is_delete) child.remove();
                    if (e == child) is_delete = true;
                });

            $.ajax({
                type: "get",
                url: `{{ route('org.user.fetch.subdepartment', compact('subdomain')) }}`,
                data: {
                    id: e.value,
                    where: `{{ $where }}`,
                    where_id: `{{ $where_id }}`,
                },
                success: function(response) {
                    if (response.data.length < 1) return;
                    $("#subDepartmentArea").append(getSubDepartment(response.data));
                }
            });
        }

        function getSubDepartment(data) {
            let options = "";
            data.forEach(item => {
                options += `<option value="${item.id}">${item.name}</option>`;
            });
            let format = `
            <select name="department" class="selectbox makeSelect2" style="width:100%;" onchange="subDepartment(this)">
                                <option value="" selected>Select department</option>
                               ${options}
            </select>`;
            return format;
        }
    </script>
@endsection