@extends('org.layout.adminPanel')
@section('title', 'Projects')
@section('section')
    @php
        $with = [
            'subdomain' => $subdomain,
            'id' => $id,
        ];
        $dep_id = encode($item->parent->mainParent->dep_id);
        $project_id = encode($item->parent->project_id);
        $folder_id = encode($item->folder_id);
    @endphp
    @if (isset($registered_in) && !empty($registered_in))
        <a href="{{ route('org.item.view', ['subdomain' => $subdomain, 'id' => $registered_in]) }}" class="link">Back</a>
    @else
        <a href="{{ route('org.folder.view', ['subdomain' => $subdomain, 'dep_id' => $dep_id, 'project_id' => $project_id, 'id' => $folder_id]) }}"
            class="link">Back</a>
    @endif
    /
    {{ $item->name }} / Assign
@endsection
@section('css')
    {{-- css --}}
    <link rel="stylesheet" href="{{ asset(CSS) }}/datatable.css">
    <link rel="stylesheet" href="{{ asset(CSS) }}/datatable.responsive.css">
@endsection
@section('content')
    {{-- content --}}
    <div class="container-fluid pb-5">
        <div class="container">
            <a href="{{ route('org.item.assign.form', $with) }}">
                <div class="d-flex create-area text-center primary-area">
                    + Assign New Reviewer
                </div>
            </a>
            <br>
            <div class="table-wrapper">
                <table id="folderManager" class="display responsive nowrap" style="width:100%">
                    <thead>
                        <tr>
                            <th>#</th>
                            <th>First name</th>
                            <th>Last name</th>
                            <th>Role</th>
                            <th>Action</th>
                        </tr>
                    </thead>
                </table>
            </div>
        </div>
    </div>

    <div class="modal fade" id="remvoeUserModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" style="max-width:380px;">
            <div class="modal-content">
                <div class="modal-body">
                    <div class="d-flex justify-content-center position-relative">
                        <i class="bi bi-person-dash" style="font-size: 48px;"></i>
                    </div>
                    <div>
                        <p class="fs-5 m-0 text-center">Are you sure to unassign<br>"<b class="fs-5"
                                data-set="user-name">department</b>" from <b class="fs-5"
                                data-set="section-name">department</b>?</p>
                        <br>
                    </div>
                    <form action="{{ route('org.item.unassign', compact('subdomain')) }}" method="post">
                        @csrf
                        <input type="hidden" name="user_id" id="unassignUserId" value="">
                        <input type="hidden" name="section_id" id="unassignSectionId" value="">
                        <div class="d-flex justify-content-center align-items-center gap-2 flex-wrap mx-auto"
                            style="max-width: 350px;">
                            <input type="submit" class="button btn-primary flex-grow-1" style="width" id="trash-button"
                                value="Yes, unassign">
                            <button type="button" class="button btn-secondary flex-grow-1"
                                data-bs-dismiss="modal">Cancel</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
@endsection
@section('js')
    {{-- js --}}
    <script src="{{ asset(JS) }}/datatable.js"></script>
    <script src="{{ asset(JS) }}/datatable.responsive.js"></script>
    <script>
        $(document).ready(function() {
            $('#folderManager').DataTable({
                responsive: true,
                processing: true,
                serverSide: true,
                ajax: "{{ route('org.item.assign.fetch', ['subdomain' => $subdomain, 'id' => $id]) }}",
                language: {
                    emptyTable: `<div>
                                        <i class="bi bi-person-lines-fill not-found-icon"></i>
                                        <p>Nothing found, Assign new reviewer</p>
                                    </div>`,
                    processing: `<x-pre-loader :uibLoader="['class'=>'pre-loader']" />`
                },
                columns: [{
                        data: "DT_RowIndex",
                        name: "id"
                    },
                    {
                        data: "first_name",
                        name: "first_name"
                    },
                    {
                        data: "last_name",
                        name: "last_name"
                    },
                    {
                        data: "role",
                        name: "assign.role"
                    },
                    {
                        data: "action",
                        name: "action",
                        sortable: false,
                        searchable: false
                    }
                ],
            });
        });
        const remvoeUserModal = new bootstrap.Modal($("#remvoeUserModal"));

        function showUnassignPopup(e, data) {
            $("[data-set='user-name']").text(data.name);
            $("[data-set='section-name']").text(data.section_name);
            $("#unassignUserId").val(data.id);
            $("#unassignSectionId").val(data.section_id);
            remvoeUserModal.toggle();
        }
    </script>
@endsection