@php
    use App\Models\User;
    // Define the roles to exclude
    $rolesToExclude = [];
    $loggedInUser = backpack_user();

    $permissionsToExclude = ['hide from member commission'];

    // Modify the query to exclude users with the specified permissions
    $users = User::whereDoesntHave('permissions', function ($query) use ($permissionsToExclude) {
        $query->whereIn('name', $permissionsToExclude);
    })
        ->orderBy('name', 'asc')
        ->get();

    $project = \App\Models\Project::with([
        'lead' => function ($query) {
            $query->with('sales');
        },
    ])->find(request()->route('id'));

    $memberCommissions = \App\Models\ProjectMemberCommission::with('user')
        ->where('project_id', $project->id)
        ->get();
    $pushMemberCommission = '';

    // Extract the user_ids from memberCommissions to filter out users already assigned
    $existingUserIds = $memberCommissions->pluck('user_id')->toArray();

    // Query users again to exclude the existing ones based on memberCommissions
    $users = User::with('roles')
        ->whereDoesntHave('permissions', function ($query) use ($permissionsToExclude) {
            $query->whereIn('name', $permissionsToExclude);
        })
        ->orderBy('name', 'asc')
        ->get();

    $totalUsers = $memberCommissions->count();

    function usersWithoutCurrent($users, $current, $except = false)
    {
        $html = '';
        foreach ($users as $user) {
            if ($user->id != $except) {
                $html .=
                    '<option value="' .
                    $user->id .
                    '" ' .
                    ($current == $user->id ? 'selected' : '') .
                    '>' .
                    $user->name .
                    '</option>';
            }
        }
        return $html;
    }

    if ($memberCommissions->count() > 0) {
        foreach ($memberCommissions as $memberCommission) {
            if ($memberCommission->is_owner) {
                $pushMemberCommission .=
                    '
                    <section id="user-commission-list" class="owner">
                        <input name="memberCommissions[]" type="hidden" value="1"/>
                        <input name="memberCommissionIsOwner[]" type="hidden" value="1"/>
                        <div class="row">
                            <div class="col-6 pr-0">
                                <label class="form-label">Member (Sales in charge)</label>
                                <input class="form-control" value="' .
                    $memberCommission->user->name .
                    '" readonly>
                                <input name="memberCommissionUserId[]" id="commission-user-owner-id" type="hidden" value="' .
                    $memberCommission->user_id .
                    '">
                            </div>
                            <div class="col-5 pr-0">
                                <label class="form-label">Commission (%)</label>
                                <input type="number" class="form-control" id="commission-percentage" name="memberCommissionPercentage[]" value="' .
                    $memberCommission->commission .
                    '" min="0" max="100" ' .
                    ($memberCommissions->count() > 1 ? '' : '') .
                    '>
                            </div>
                            <div class="col-1">
                                <label class="form-label text-white">.</label>
                                <button class="btn btn-danger btn-sm w-100 mt-1" type="button" disabled>X</button>
                            </div>
                        </div>
                    </section>';
            } else {
                $pushMemberCommission .=
                    '
                    <section id="user-commission-list" class="other mt-3">
                        <input name="memberCommissions[]" type="hidden" value="1"/>
                        <input name="memberCommissionIsOwner[]" type="hidden" value="0"/>
                        <div class="row">
                            <div class="col-6 pr-0">
                                <label class="form-label">Member</label>
                                <select class="form-control" name="memberCommissionUserId[]" id="commission-user-id" required>
                                    ' .
                    usersWithoutCurrent($users, $memberCommission->user_id, $project->sales->id) .
                    '
                                </select>
                            </div>
                            <div class="col-5 pr-0">
                                <label class="form-label">Commission (%)</label>
                                <input type="number" class="form-control" id="commission-percentage" min="0" max="100" value="' .
                    $memberCommission->commission .
                    '" name="memberCommissionPercentage[]" required>
                            </div>
                            <div class="col-1">
                                <label class="form-label text-white">.</label>
                                <button class="btn btn-danger btn-sm w-100 mt-1" id="remove-user-commission" type="button">X</button>
                            </div>
                        </div>
                    </section>
                ';
            }
        }
    } else {
    }
@endphp

<div class="card">
    <div class="card-header">
        <h5 class="float-left mt-2 mb-0">Team & Commissions</h5>
    </div>
    <div class="card-body">
        <div id="alert-percentage" style="display:none">
            <div class="alert alert-danger">
                <strong>The percentage on all user commission is added up each other and the total is must be
                    100%</strong>
            </div>
        </div>
        <div id="project-commission">
            <section></section>
        </div>
    </div>
    <div class="card-footer">
        <button class="btn btn-primary btn-sm" id="add-user-commission" type="button"><i class="la la-plus"></i> Add New
            User</button>
    </div>
</div>

<script>
    var projectCommissionUsers = {!! json_encode($users) !!};
    var pushToUserCommission = '';
    var projectLeadId = document.getElementById('lead-id')?.value;

    $(document).ready(function() {

        $('div#project-commission').append(`{!! $pushMemberCommission !!}`);

        UCCheckDisabledOnCommission();
        UCCheckPercentage();

        $(document).on('click', '#remove-user-commission', function() {
            var r = confirm("Are you sure?");
            if (r == true) {
                $(this).closest('section#user-commission-list').remove();
            }
            UCCheckDisabledOnCommission();
            UCCheckPercentage();
        });

        $(document).on('click', '#add-user-commission', function() {
            console.log('add');
            document.getElementById('lead-id')
            pushToUserCommission += `
            <section id="user-commission-list" class="other mt-3">
                <input name="memberCommissions[]" type="hidden" value="1"/>
                <input name="memberCommissionIsOwner[]" type="hidden" value="0"/>
                <div class="row">
                    <div class="col-6 pr-0">
                        <label class="form-label">Member</label>
                        <select class="form-control" name="memberCommissionUserId[]" id="commission-user-id" required>
                            ${UCUserSelection(projectCommissionUsers)}
                        </select>
                    </div>
                    <div class="col-5 pr-0">
                        <label class="form-label">Commission (%)</label>
                        <input type="number" class="form-control" id="commission-percentage" min="0" max="100" value="0" name="memberCommissionPercentage[]" required>
                    </div>
                    <div class="col-1">
                        <label class="form-label text-white">.</label>
                        <button class="btn btn-danger btn-sm w-100 mt-1" id="remove-user-commission" type="button">X</button>
                    </div>
                </div>
            </section>
            `;
            $("div#project-commission section:last").after(`${pushToUserCommission}`);
            pushToUserCommission = '';
            UCCheckDisabledOnCommission();
            UCCheckPercentage();
        });

        $(document).on('change keypress keyup', 'input#commission-percentage', function(e) {
            UCCheckPercentage();
        });

        $("select#lead-id").on('change', function(e) {
            projectLeadId = document.getElementById('lead-id')?.value;
            UCRemoveCurrentList();
            UCCheckDisabledOnCommission();
            UCCheckPercentage();
            UCGetUserByLeadId(projectLeadId);
        });

    });


    function UCCheckDisabledOnCommission() {

        let element = document.querySelectorAll(
            `div#project-commission section#user-commission-list #commission-percentage`);

        if (element.length > 0) {
            if (element.length == 1) {
                // element[0].setAttribute("readonly", "readonly");
                element[0].value = 100;
            } else {
                for (let i = 0; i < element.length; i++) {
                    element[i].removeAttribute("readonly");
                }
            }
        }
    }

    function UCCheckPercentage() {

        let element = document.querySelectorAll(
            `div#project-commission section#user-commission-list #commission-percentage`);
        let elementTotal = 0;

        for (let i = 0; i < element.length; i++) {
            if (!element[i].value) {
                continue;
            }
            elementTotal += parseInt(element[i].value);
        }

        {{--  if (elementTotal != 100) {
            document.getElementById("btn-submit").setAttribute("disabled", "disabled");
            document.getElementById("btnGroupDrop1").setAttribute("disabled", "disabled");
            document.getElementById("alert-percentage").style.display = "block";
        } else {
            document.getElementById("btn-submit").removeAttribute("disabled");
            document.getElementById("btnGroupDrop1").removeAttribute("disabled");
            document.getElementById("alert-percentage").style.display = "none";
        }  --}}
    }

    function UCGetUserByLeadId(leadId) {
        let userRoute = '{{ route('ajax.user.lead.show', ':leadId') }}';
        userRoute = userRoute.replace(':leadId', leadId);

        $.ajax({
            url: userRoute,
            type: 'GET',
            success: function(res) {
                $("#commission-user-id-ownerner").empty();
                var select = document.getElementById('commission-user-id-ownerner');
                var opt = document.createElement('option');
                opt.value = res.sales.id;
                opt.innerHTML = res.sales.name;
                select.appendChild(opt);
                $("[name='client_name']").val(res.client_name);
                $("#client-email").val(res.email);
                $("#client-contact").val(res.contact_number);
                $("[name='ic_number']").val(res.ic_number);
                $("[name='road_no']").val(res.road_no);
                $("[name='road_name']").val(res.road_name);
                $("[name='block_no']").val(res.block_no);
                $("[name='residence']").val(res.residence);
                $("[name='postal_code']").val(res.postal_code);
                $("select#client-county-code").val(res.country_code).change();
                $("select#country-name").val(res.country_name).change();
                $("select[name='company_id']").val(res.company_id).change();
                $("select[name='source_id']").val(res.source_id).change();
                $("select[name='property_type_id']").val(res.property_type_id).change();
                $("select[name='country_name']").val(res.country_name).change();
            }
        });
    }

    function UCUserSelection(users, excepts = false) {
        var ownerId = document.getElementById('commission-user-owner-id');
        let data = users.map(function(user) {
            return user.id != ownerId?.value ? `<option value="${user.id}">${user.name}</option>` : ``;
        }).join(" ");
        return data;
    }

    function UCRemoveCurrentList() {
        let element = document.querySelectorAll(`div#project-commission section#user-commission-list.other`);
        let owner;
        for (let i = 0; i < element.length; i++) {
            element[i].remove();
        }
    }
</script>