@php($permissions = userPermissions())




@if (request()->is('admin*'))

    <div class='topSearchbar ' id="search-result">
        <p class='d-fixed bg-inherit text-center border p-1 h5'>Total Search Result : {{ $list->count() }} </p>

        <ul style='list-style:none;margin:0;padding:0'>
            @foreach ($list as $data)
                <li class="w-100 d-flex flex-column justify-content-between align-items-center border mb-2 py-1">

                    <div class="w-100 d-flex justify-content-between"
                        style="padding-left:6px !important; padding-right:6px !important;">

                        <div class="" style="width: 100% !important" id="userinfo-{{ $data->id }}">
                            <p> <strong> User-name : </strong>
                                <span
                                    style="text-transform: capitalize; letter-spacing: 0.025em;">{{ $data->clientsinfo->clients_name }}</span>
                            </p>

                            <p style="margin-top:-10px;"> <strong>Phone</strong> <span>:</span>
                                <span
                                    style="font-variant-numeric: slashed-zero;">{{ $data->clientsinfo->contact_no }}</span>
                            </p>
                            <p class='' style="margin-top:-10px;"> <strong class="text-dark">User Id:</strong>
                                {{ $data->userid }} </p>

                            <p class='text-danger' style="margin-top:-10px;"> <strong class="text-dark">Due:</strong>
                                @if ($data->customerAccount)
                                    {{ $data->customerAccount->dueAmount }}
                                @else
                                    0
                                @endif Tk
                            </p>
                        </div>

                        <div class="actionContainer d-none flex-column justify-content-between align-items-start shadow-sm border p-1 "
                            style="row-gap: 1.5px; max-height:130px; overflow-y:scroll; width:30% !important; display:none !important; "
                            id="topoverMenu-{{ $data->id }}">

                            @if (in_array('mac-customer_edit', $permissions))
                                <a href="{{ route('clients.edit', $data->id) }}" class="btn btn-xs  btn-edit">Edit</a>
                            @endif

                            @if (in_array('mac-customer_edit', $permissions))
                                <a href="{{ route('clients.show', $data->id) }}"
                                    class="btn btn-xs  btn-details">Details</a>
                            @endif


                            @if (in_array('changeBillCycle', $permissions))
                                <button type="button" class="btn btn-xs btn-bill-change clientBillCycleChange"
                                    data-toggle="modal" data-id="{{ $data->id }}"
                                    data-curdate={{ $data->billing_cycle }} data-target="#billCycleChange">
                                    B.Change
                                </button>
                            @endif


                            @if (in_array('changePackage', $permissions))
                                <a href="" data-clientid="{{ $data->id }}"
                                    class="btn  btn-xs btn-pac-change package_change_action_btn" data-toggle="modal"
                                    data-target="#package_change_modal" role="button">P.Change</a>
                            @endif


                            @if ($data->clients_status == 'disable')
                                {{-- @can('id-enable') --}}
                                @if (in_array('id-enable', $permissions))
                                    <a href="#" class="btn  btn-xs btn-dis idEnable"
                                        data-id="{{ $data->id }}" id="{{ $data->id }}">Enable</a>
                                @endif
                            @endif


                            @if ($data->clients_status != 'disable')
                                @if (in_array('id-disable', $permissions))
                                    <a href="#" class="btn  btn-xs btn-dis idDisable confirmDisable"
                                        data-id="{{ $data->id }}" id="{{ $data->id }}"
                                        role="button">Disable</a>
                                @endif
                            @endif


                            @if ($data->clients_status != 'deactive')
                                @if (in_array('customer-deactivated', $permissions))
                                    <a href="#" class="btn  btn-xs btn-dec id_deactive"
                                        data-id="{{ $data->id }}" id="deactive{{ $data->id }}">Deactive
                                    </a>
                                @endif
                            @endif

                            @if ($data->clients_status == 'deactive')
                                @if (in_array('customer-reactivate', $permissions))
                                    <a href="#" data-id="{{ $data->id }}" id="reactive{{ $data->id }}"
                                        class=" btn  btn-xs btn-dec id_reactive">Reactive
                                    </a>
                                @endif
                            @endif

                            @if (in_array('can-close', $permissions))
                                @if (request()->path() != 'admin/pending-customer')
                                    @if ($data->deleted_at == null)
                                        <a href="#" class="btn  btn-xs btn-close idClose"
                                            data-id="{{ $data->id }}">Close</a>
                                    @else
                                    @endif
                                @endif
                            @endif


                            @if (in_array('mac-customer_destroy', $permissions))
                                <button class="btn  btn-xs btn-dis idDestroy"
                                    data-id="{{ $data->id }}">Delete</button>
                            @endif

                        </div>

                    </div>

                    <div class="d-flex justify-content-between align-items-center w-100 border-top px-1"
                        style=" column-gap:3.5px; height:30px;">
                        <a href="{{ route('getPaymentHistory', ['id' => $data->id]) }}"
                            class='btn w-100 btn-xs border text-space' style="background: #65a30d; color:#FFFFFF;"> CID
                            {{ $data->id }}
                        </a>

                        @if (auth()->user()->hasRole('Admin|Billing Man'))
                            {{-- <a href="{{ route('getPaymentHistory', $data->id) }}"
                                class=' btn w-100 btn-xs  border text-space'
                                style="background: #0891b2 !important; color:#FFFFFF;">Payment</a> --}}
                            @if ($data->pop->bill_generate == 'yes')
                                <button data-package_rate="{{ $data->packages->package_rate ?? 0 }}"
                                    data-billing_type = "{{ getBillingType() }}" data-id="{{ $data->id }}" data-userid="{{ $data->userid }}"
                                    @if ($data->customerAccount != null) data-amount="{{ $data->customerAccount->dueAmount > 0 ? $data->customerAccount->dueAmount : 0 }}" @endif
                                    type="button" class="btn btn-danger ajaxPayment btn-xs btn-block text-nowrap"
                                    data-toggle="modal" data-target="#paymentModal">
                                    Payment
                                </button>
                            @else
                                @if (in_array('customer-recharge', $permissions))
                                    @if (checkSettings('reseller-client-dynamic-recharge') == 'enable' && in_array('dynamic-recharge', $permissions))
                                    @else
                                        @if ($data->client_approval == 'approved')
                                            <button data-id="{{ $data->id }}" type="button"
                                                class="btn btn-dark ajaxRecharge btn-xs btn-block text-nowrap">
                                                Rechage
                                            </button>
                                        @endif
                                    @endif
                                @endif
                            @endif
                        @endif


                        <a href="{{ route('send-sms-single', $data->id) }}"
                            class='  btn w-100 btn-xs border text-space' style="background: #f3f4f6;">
                            SMS </a>


                            @if (in_array('mac-customer_edit', $permissions))
                            <a href="{{ route('clients.edit', $data->id) }}" class="btn w-100 btn-xs  border text-space bg-primary">Edit</a>
                        @endif

                        <div class="">
                            <a class="btn w-100 btn-xs dropdown-toggle d-none" href="#" role="button"
                                id="overMenuLink-{{ $data->id }}" onclick="getActionInfo({{ $data->id }})"
                                style="background:
                        #15803d; color:#FFFFFF;">
                                Action
                            </a>
                        </div>
                    </div>

                </li>
            @endforeach
        </ul>


    </div>
@else
    <div></div>

@endif


<style>
    #search-result::-webkit-scrollbar {
        width: 6px;

    }


    #search-result::-webkit-scrollbar-track {
        background: #f1f1f1;

    }

    #search-result::-webkit-scrollbar-thumb {
        background: #888;

        border-radius: 2.5px;

    }

    #search-result::-webkit-scrollbar-thumb:hover {
        background: #555;

    }

    #search-result::-webkit-scrollbar {
        width: 6px;

    }

    .actionContainer::-webkit-scrollbar {
        width: 2px;

    }


    .actionContainer::-webkit-scrollbar-track {
        background: #f1f1f1;

    }

    .actionContainer::-webkit-scrollbar-thumb {
        background: #888;

        border-radius: 4.5px;

    }

    .actionContainer::-webkit-scrollbar-thumb:hover {
        background: #555;

    }

    .actionContainer::-webkit-scrollbar {
        width: 2px;

    }

    .actionContainer {
        overflow-x: hidden;
    }

    .actionContainer>a,
    .actionContainer>button {
        width: 100% !important;
        border: 0.75px solid gray;
        letter-spacing: 0.1em;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        color: #FFFFFF;
    }

    .btn-edit {
        background-color: rgb(21 128 61 / 0.8);
    }

    .btn-bill-change {
        background-color: rgb(126 34 206 / 0.8);
    }

    .btn-pac-change {
        background-color: rgb(77 124 15 / 0.8);
    }

    .btn-dis {
        background-color: rgb(190 18 60 / 0.8);
    }

    .btn-dec {
        background-color: rgb(2 6 23 / 0.8);
    }

    .btn-dec:hover {
        background-color: rgb(2 6 23 / 0.8);
        color: #FFFFFF;
    }

    .btn-del {
        background-color: rgb(185 28 28 / 0.8);
    }

    .btn-close {
        background-color: rgb(76 5 25 / 0.8);

    }

    .btn-details {
        background-color: rgb(76 15 25 / 0.8);
    }

    .btn-close:hover {
        background-color: rgb(76 5 25 / 0.8);
        color: #FFFFFF;
    }
</style>

<script>
    function getActionInfo(id) {
        const userInfo = document.getElementById(`userinfo-${id}`);
        const actionMenu = document.getElementById(`topoverMenu-${id}`);
        userInfo.style.width = "70%";
        actionMenu.style.display = "block";

    }

    window.addEventListener('click', function(event) {
        let searchResultDiv = document.getElementById('search-result');
        if (event.target !== searchResultDiv && !searchResultDiv.contains(event.target)) {
            searchResultDiv.style.display = 'none';

        }

    });
</script>