@extends('org.layout.adminPanel')
@section('title', 'Organisation')
@section('section')
    @php
        $user = !empty($assign_to) ? $assign_to->user : '';
        $permission = !empty($assign_to) ? $assign_to->permissions->toArray() : [];
    @endphp
    <a href="{{ route('org.view', compact('subdomain')) }}" style="text-decoration: none; color:var(--primary);"
        class="link">Organisation</a>
    /
    {{ $org->name }}
    / Assign
@endsection
@section('css')
    {{-- css --}}
    <link rel="stylesheet" href="{{ asset(CSS) }}/datatable.css">
    <link rel="stylesheet" href="{{ asset(ADMINCSS) }}/layout/customDatatable.css">
    <link rel="stylesheet" href="{{ asset(SELECTBOXCSS) }}">
    <style>
        .selectBox-wrapper {
            padding: .6em .8em;
        }
    </style>
@endsection
@section('content')
    {{-- content --}}
    <div class="container-fluid pb-5">
        <div class="container">
            <div class="text-center py-2">
                <h2>{{ $org->name }} - Admin</h2>
                <p>Organisation Admin</p>
            </div>
            <div class="form-wrapper mx-auto mb-3">
                @if (!empty(Session::get('err')))
                    <div class="alert alert-danger alert-dismissible fade show" role="alert">
                        <strong>Not assign:</strong> <br>{{ Session::get('err') }}
                        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                    </div>
                @endif
                <form action="{{ route('org.assign.store', compact('subdomain')) }}" method="post">
                    @csrf
                    {{-- hidden --}}
                    <input type="hidden" name="org_id" value="{{ encode($org->id) }}">
                    <input type="hidden" name="is_assign" value="{{ !empty($assign_to) ? encode($assign_to->id) : '' }}">
                    <input type="hidden" name="is_record" value="{{ !empty($assign_to) ? 'EDIT' : '' }}">
                    {{-- search --}}
                    {{-- <div class="searchWrapper">
                        <div class="searchContainer">
                            <button class="search-box" type="button" id="userSearchButton">
                                <i class="bi bi-search"></i>
                            </button>
                            <input type="text" id="searchinput" placeholder="Search by email">
                        </div>
                        <div class="searchResultContainer d-none">
                            <ul class="record-list m-0" id="searchList">
                            </ul>
                        </div>
                    </div>
                    <br>
                    <div class="position-relative d-flex align-items-center justify-content-center">
                        <div class="hr position-absolute"></div>
                        <h5 class="position-absolute m-0 bg-light px-3">OR</h5>
                    </div>
                    <br> --}}
                    {{-- end --}}
                    @if (empty($assign_to))
                        <div class="searchWrapper">
                            <div class="searchContainer">
                                <button class="search-box" type="button" id="userSearchButton">
                                    <i class="bi bi-search"></i>
                                </button>
                                <input type="text" id="searchinput" placeholder="Search by email">
                            </div>
                            <div class="searchResultContainer d-none">
                                <ul class="record-list m-0" id="searchList">
                                </ul>
                            </div>
                        </div>
                        <center>
                            <i><small>Type and click magnifying glass to search for existing user</small></i>
                        </center>
                        <br>
                        <p class="text-center m-0">or add new user</p>
                        <br>
                    @endif
                    <div class="mb-3">
                        <label for="firstname" class="form-label">First name</label>
                        <input type="text" class="form-control" id="firstname" name="firstname"
                            value="{{ $user->first_name ?? '' }}{{ old('firstname') }}"
                            {{ !empty($assign_to) ? 'disabled' : '' }}>
                    </div>
                    @error('firstname')
                        <div class="alert alert-danger p-0 px-2" role="alert">
                            {{ $message }}
                        </div>
                    @enderror
                    <div class="mb-3">
                        <label for="lastname" class="form-label">Last name</label>
                        <input type="text" class="form-control" id="lastname" name="lastname"
                            value="{{ $user->last_name ?? '' }}{{ old('lastname') }}"
                            {{ !empty($assign_to) ? 'disabled' : '' }}>
                    </div>
                    @error('lastname')
                        <div class="alert alert-danger p-0 px-2" role="alert">
                            {{ $message }}
                        </div>
                    @enderror
                    <div class="mb-3">
                        <label for="email" class="form-label">Email</label>
                        <input type="email" class="form-control" id="email" name="email"
                            value="{{ $user->email ?? '' }}{{ old('email') }}"
                            {{ !empty($assign_to) ? 'disabled' : '' }}>
                    </div>
                    @error('email')
                        <div class="alert alert-danger p-0 px-2" role="alert">
                            {{ $message }}
                        </div>
                    @enderror
                    <x-permission-panel :role="\App\Models\User::$ORG_ADMIN" :permission="$permission" />
                    <div class="d-flex justify-content-end">
                        <button type="submit" class="button btn-primary">{{ $btn ?? 'Save' }}</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection
@section('js')
    {{-- js --}}
    <script src="{{ asset(JS) }}/datatable.js"></script>
    <script src="{{ asset(SELECTBOXJS) }}"></script>
    @if (empty($assign_to))
        <script>
            const userSearchURL = "{{ route('org.search.user', compact('subdomain')) }}";
            const org_id = "{{ encode($org->id) }}";
            const preloader = `<x-pre-loader :uibLoader="['size'=>'24px']" />`;
        </script>
        <script src="{{ asset(ADMINJS) }}/layout/searchbar.js"></script>
    @endif
    {{-- <script>
        // load user list
        let searchWrapper = document.querySelector(`.searchWrapper`);
        const searchPreLoader = document.querySelectorAll(`.search-pre-loader`);
        let userListOffset = 0;


        const lastRecordObserver = new IntersectionObserver(entry => {
            let lastRecord = entry[0];
            if (lastRecord.isIntersecting) {
                searchUser(function(data) {
                    lastRecordObserver.unobserve(lastRecord.target);
                    if (data.list.length > 0) {
                        lastRecordObserver.observe(document.querySelector(
                            `.record-list li:last-child`));
                    }
                });
            }
        });

        $("#userSearchButton").on("click", function(e) {
            userListOffset = 0;
            $("#searchList").html("");
            $("#userSearchButton").attr("disabled", true);
            $(".searchResultContainer").removeClass("d-none");
            searchUser(function(data) {
                $("#userSearchButton").attr("disabled", false);
                if (data.list?.length > 3) {
                    lastRecordObserver.observe(document.querySelector(`.record-list li:last-child`));
                }
                if ($("#searchList").children().length < 1) {
                    $(".searchResultContainer").addClass("d-none");
                }
            });
        });
        $("#searchinput").on("focus", function() {
            if ($("#searchList").children().length > 0) {
                $(".searchResultContainer").removeClass("d-none");
            }
        });

        function searchUser(callback, obj = null) {
            let searchValue = $("#searchinput").val();
            if (searchValue == "") return callback([]);
            if (searchValue.length < 3) return callback([]);
            $.ajax({
                type: "get",
                url: "{{ route('org.search.user', compact('subdomain')) }}",
                data: {
                    search: searchValue,
                    offset: userListOffset,
                    org_id: "{{ encode($org->id) }}"
                },
                beforeSend: function() {
                    let pre_loader = `<li class="no-event search-pre-loader">
                                    <center><div class="pre-loader" style="--size:24px;"></div></center>
                                </li>`;
                    $("#searchList").append(pre_loader);
                },
                success: function(result) {
                    if (result.userList.length < 1) return;
                    let html = ``;
                    result.userList.forEach(record => {
                        html += `<li onclick="fillRecord({
                                first_name:'${record.user.first_name || ''}',
                                last_name:'${record.user.last_name || ''}',
                                email:'${record.user.email}'

                            })">
                                    <small>${record.user.first_name || ''} ${record.user.last_name || ''}</small>
                                    <p class="m-0"><b>${record.user.email}</b></p>
                                </li>`;
                    });
                    $("#searchList .search-pre-loader").remove();
                    $("#searchList").append(html);
                }
            }).always(function(result) {
                userListOffset += 4;
                $("#searchList .search-pre-loader")?.remove();
                const data = {
                    list: result?.userList || [],
                    obj
                };
                callback(data);
            });
        }
        // fill record
        function fillRecord(data) {
            $(".searchResultContainer").addClass("d-none");
            $("#searchinput").val("");
            $("[name='firstname']").val(data.first_name);
            $("[name='lastname']").val(data.last_name);
            $("[name='email']").val(data.email);
        }
        // globle event
        document.addEventListener("click", function(e) {
            if (e.target.closest(".searchWrapper") == null) {
                $(".searchResultContainer").addClass("d-none");
            }
        });
    </script> --}}
@endsection