@php
    use App\Models\User;
    // Get the logged-in user
    $loggedInUser = backpack_user();

    // Define the permission to exclude
    $permissionToExclude = ['hide from member commission'];

    $users = User::whereDoesntHave('permissions', function ($query) use ($permissionToExclude) {
        $query->whereIn('name', $permissionToExclude);
    })
        ->orderBy('name', 'asc')
        ->get();

    // Function to generate user options for the select dropdown
    function createUserOptions($users, $current = null, $except = null)
    {
        $html = '<option value="" selected disabled>Select a user</option>'; // Add a default null option
        foreach ($users as $user) {
            // Exclude the specified user IDs
            if ($user->id != $current && $user->id != $except) {
                $html .= '<option value="' . $user->id . '">' . $user->name . '</option>';
            }
        }
        return $html;
    }
@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 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>
                        <select class="form-control" name="memberCommissionUserId[]" id="commission-user-id" required>
                            {!! createUserOptions($users) !!}
                        </select>
                    </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="0" min="0" max="100">
                    </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>
        </div>
    </div>
    <div class="card-footer">
        <button class="btn btn-primary btn-sm" id="add-user-commission" type="button">Add New User</button>
    </div>
</div>

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

    $(document).ready(function() {

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

        $.ajax({
            url: userRoute,
            type: 'GET',
            success: function(res) {
                $("#commission-user-owner-id").empty();
                $("#commission-user-owner-name").empty();
                var ownerId = document.getElementById('commission-user-owner-id');
                var ownerName = document.getElementById('commission-user-owner-name');
                ownerId.value = res.sales.id;
                ownerName.value = res.sales.name;
            }
        });

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

        $(document).on('click', '#add-user-commission', function() {

            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();
            UCGetUserByLeadId(projectLeadId);
            UCCheckDisabledOnCommission();
            UCCheckPercentage();
        });

    });


    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-owner-id").empty();
                $("#commission-user-owner-name").empty();
                var ownerId = document.getElementById('commission-user-owner-id');
                var ownerName = document.getElementById('commission-user-owner-name');
                ownerId.value = res.sales.id;
                ownerName.value = res.sales.name;
                $("[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 = '<option value="" selected disabled>Select a user</option>'; // Add default null option
        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>