@php
    $user = auth()->user();
@endphp
<div>
    <div>
        @if ($user->can('view deactivated profile employee'))
            <div class="w-full lg:w-max">
                <div
                    class="tabs overflow-x-scroll no-scrollbar">
                    <button wire:click="defaultStatus"
                        class="tabs-btn-box activeStatus {{ $liveStatus == null ? 'active' : '' }} min-w-[94px]" data-val="all">{{__('forms.lbl_all')}} </button>
                    <button wire:click="active"
                        class="tabs-btn-box activeStatus {{ $liveStatus == 1 ? 'active' : '' }} min-w-[94px]" data-val="1">{{__('forms.lbl_active')}}</button>
                    <button wire:click="inactive"
                        class="tabs-btn-box activeStatus {{ $liveStatus == "0" ? 'active' : '' }} min-w-[94px]" data-val="0">{{__('forms.lbl_inactive')}}</button>
                </div>
            </div>
        @else
        <div class="mr-2 hide">
            <button
                class="tabs-btn-box activeStatus active min-w-[94px]" data-val="1">{{__('forms.lbl_active')}}</button>
        </div>
        @endif


        <div class="mt-5 flex flex-wrap gap-4 mb-3">

            <div class="search-bar w-full lg:w-auto lg:max-h-10">
                <input type="text" id="search" class="form-input search-input w-full lg:w-[320px]"
                    name="term"
                    placeholder="{{ __('forms.lbl_search') }} ..."
                    wire:model.live.debounce="term"
                />
                <x-svg-icon icon="icon-search" />
            </div>

            <div class="w-full lg:w-auto" wire:ignore>
                <div class="multi-select-dropdown">
                    <div class="multi-select-box text-sm-regular">{{__('forms.filter_by_location')}}</div>
                    <div class="multi-select-options-content !z-[200]" data-name="location">
                        <div class="search-bar w-full p-2">
                            <input type="text" data-multisearch="1" class="form-input w-full multisearch"
                                name="query"
                                placeholder="{{ __('forms.lbl_search') }} ..."
                            />
                            <x-svg-icon icon="icon-search" />
                        </div>
                        @if (count($locations) > 0)
                            @foreach ($locations as $key => $value)
                                <div class="multi-select-option" >
                                    <div class="flex gap-2">
                                        <input name="location[]" wire:model.live="location" type="checkbox" value="{{$key}}">
                                        <span>{{$value}}</span>
                                    </div>
                                </div>
                            @endforeach
                        @endif
                    </div>
                    <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-custom-grey-500">
                        <x-svg-icon icon="icon-chevron-down" width="20" height="20" />
                    </div>
                </div>
            </div>

            <div class="relative inline-block text-left w-full lg:w-1/5" wire:ignore>
                <div class="multi-select-dropdown">
                    <div class="multi-select-box text-sm-regular">{{__('forms.filter_by_department')}}</div>
                    <div class="multi-select-options-content !z-[200]"  data-name="department">
                        <div class="search-bar w-full p-2">
                            <input type="text" data-multisearch="1" class="form-input w-full multisearch"
                                name="query"
                                placeholder="{{ __('forms.lbl_search') }} ..."
                            />
                            <x-svg-icon icon="icon-search" />
                        </div>
                        @if (count($departments) > 0)
                            @foreach ($departments as $key => $value)
                                <div class="multi-select-option">
                                    <div class="flex gap-2">
                                        <input name="department[]" wire:model.live="department" type="checkbox" value="{{$key}}">
                                        <span>{{$value}}</span>
                                    </div>
                                </div>
                            @endforeach
                        @endif
                    </div>
                    <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-custom-grey-500">
                        <x-svg-icon icon="icon-chevron-down" width="20" height="20" />
                    </div>
                </div>
            </div>


            <div class="relative inline-block text-left w-full lg:w-1/5" wire:ignore>
                <div class="multi-select-dropdown">
                    <div class="multi-select-box text-sm-regular">{{__('forms.filter_by_postion')}}</div>
                    <div class="multi-select-options-content !z-[200]"  data-name="position">
                        <div class="search-bar w-full p-2">
                            <input type="text" data-multisearch="1" class="form-input w-full multisearch"
                                name="query"
                                placeholder="{{ __('forms.lbl_search') }} ..."
                            />
                            <x-svg-icon icon="icon-search" />
                        </div>
                        @if (count($positions) > 0)
                            @foreach ($positions as $key => $value)
                                <div class="multi-select-option">
                                    <div class="flex gap-2">
                                    <input name="position[]" wire:model.live="position" type="checkbox" value="{{$key}}">
                                    <span>{{$value}}</span>
                                </div>
                                </div>
                            @endforeach
                        @endif
                    </div>
                    <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-custom-grey-500">
                        <x-svg-icon icon="icon-chevron-down" width="20" height="20" />
                    </div>
                </div>
            </div>

            <div class="w-full lg:w-auto self-center grow">
                <div class="flex justify-end lg:w-auto items-center gap-0">
                    <x-svg-icon class="cursor-pointer px-2 py-2 text-sm text-sm-regular text-custom-grey-700 bg-custom-grey-300 border border-gray-300 rounded-s-sm" icon="icon-grid" width="16" height="16" />
                    <x-svg-icon class="cursor-pointer listGrid px-2 py-2 text-sm text-sm-regular text-custom-grey-700 bg-white border border-gray-200 rounded-e-sm" icon="icon-list" width="16" height="16" />
                </div>
            </div>
        </div>

        <div
            class="flex items-center gap-2 mb-[24px] bg-gray-50 rounded-lg p-4 overflow-x-scroll no-scrollbar
                {{ ($liveStatus == null || !$user->can('view deactivated profile employee')) && empty($location) && empty($department) && empty($position) ? 'hidden' : '' }}">

            @if($liveStatus != null && $user->can('view deactivated profile employee'))
                <span class="btn-filter-tag text-sm-semibold min-w-max">
                    {{ ($liveStatus == 1) ? __('forms.lbl_active') : __('forms.lbl_inactive') }}
                    <button class="btn-remove" wire:click="remove(0, 'filter')" type="button">
                        <x-svg-icon icon="icon-close" width="16" height="16" />
                    </button>
                </span>
            @endif

            @if (count($location) > 0)
                @foreach ($location as $value)
                    <span class="btn-filter-tag text-sm-semibold min-w-max">
                        {{ $locations[$value] }}
                        <button wire:click="remove({{ $value }}, 'location')" type="button">
                            <x-svg-icon icon="icon-close" width="16" height="16" />
                        </button>
                    </span>
                @endforeach
            @endif

            @if (count($department) > 0)
                @foreach ($department as $value)
                    <span class="btn-filter-tag text-sm-semibold min-w-max">
                        {{ $departments[$value] }}
                        <button wire:click="remove({{ $value }}, 'department')" type="button">
                            <x-svg-icon icon="icon-close" width="16" height="16" />
                        </button>
                    </span>
                @endforeach
            @endif

            @if (count($position) > 0)
                @foreach ($position as $value)
                    <span class="btn-filter-tag text-sm-semibold min-w-max">
                        {{ $positions[$value] }}
                        <button wire:click="remove({{ $value }}, 'position')" type="button">
                            <x-svg-icon icon="icon-close" width="16" height="16" />
                        </button>
                    </span>
                @endforeach
            @endif
        </div>

        <div class="content-wrapper-team mt-4">
            <div class="grid grid-cols-1 lg:grid-cols-3 gap-x-4 gap-y-[17px] pb-2">
                @if (count($users) > 0)
                    @php
                        extract(getUserCreatePermissions($user));
                    @endphp
                    @foreach ($users as $usersData)
                        <div class="border border-custom-grey-200 rounded-lg relative">
                            <div class="p-5 pb-[10px]">
                                @if ($user->can('access_employee_files', $usersData))
                                    <div class="absolute top-[11px] right-[11px] text-custom-orange-500 cursor-pointer">
                                        <button href="javascript:;" data-toggle="modal"
                                            data-target="#userModal-{{ $usersData->id }}">
                                            <x-svg-icon icon="icon-threedot" />
                                        </button>
                                        @include('layouts.partials.userModal')
                                    </div>
                                @endif
                                <img class="h-[100px] w-[100px] object-cover rounded-full"
                                    src="{{ getMediaUrl($usersData, 'photograph', 'thumb') }}" />
                                <div class="mt-2">
                                    <h1 class="text-md-semibold text-custom-grey-900">
                                        <a href="{{ route('users.profile.show', $usersData->id) }}">
                                            {{ $usersData->display_name }}</a>
                                    </h1>
                                    @php
                                        $positions = $usersData->positions ?? collect();
                                        $first = $positions->pluck('name')->first();
                                        $rest = $positions->pluck('name')->skip(1);
                                    @endphp

                                    @if ($first)
                                        <div class="relative group inline-flex items-center space-x-1">
                                            <span>{{ $first }}</span>

                                            @if ($rest->count())
                                                <!-- Tooltip content -->
                                                <div
                                                    class="absolute bottom-full mb-2 w-[250px] p-4 bg-white text-xs rounded-xl shadow-lg opacity-0 group-hover:opacity-100 transition-opacity border border-gray-200 z-10"
                                                >
                                                    <h1 class="text-sm font-semibold text-gray-800">{{ __('forms.other_position') }}</h1>
                                                    <hr class="my-1">

                                                    @foreach ($rest as $name)
                                                        <p class="text-xs font-medium text-gray-700">
                                                            <span>{{ $name }}</span>
                                                        </p>
                                                    @endforeach
                                                </div>

                                                <x-svg-icon icon="icon-info" width="16" height="16" class="text-orange-500 cursor-pointer group-hover:opacity-100 transition-opacity ml-2"/>
                                            @endif
                                        </div>
                                    @endif

                                </div>
                            </div>
                            <div class="flex flex-col gap-2 p-5 pt-[14px] bg-custom-blue-25">
                                <div class="flex items-center gap-2 max-w-full sm:max-w-[300px]">
                                    <button type="button"
                                        class="text-custom-blue-900 text-sm-medium"
                                        onclick="navigator.clipboard.writeText('{{ $usersData->email }}').then(() => PDToast('Copied!', 'success'))">
                                        <x-svg-icon icon="icon-copy" width="16" height="16" />
                                    </button>
                                    <a class='text-custom-blue-900 text-sm-medium flex-1 min-w-0' onclick="Livewire.dispatch('openLiveModal', { actionType: 'composeFor', modelId:{{ $usersData->id }} })"
                                        href='javascript:;'>
                                        <div class="flex gap-2 items-start">
                                            <x-svg-icon icon="icon-email-sm" class="p-1 rounded-full bg-base-white" />
                                            <span class="truncate sm:hover:overflow-visible">{{ $usersData->email }}</span>
                                        </div>
                                    </a>
                                </div>
                                @php
                                    $phone =
                                        isset($usersData->work_telephone) && $usersData->work_telephone != '' && $usersData->work_telephone != '-'
                                            ? $usersData->work_telephone
                                            : (isset($usersData->personal_telephone) && $usersData->personal_telephone != '' && $usersData->personal_telephone != '-'
                                                ? $usersData->personal_telephone
                                                : '');
                                @endphp
                                @if ($phone != '')
                                    <a class='text-custom-blue-900 text-sm-medium' href='tel:{{ $phone }}'>
                                        <div class="flex gap-2">
                                            <x-svg-icon icon="icon-phone-sm" class="p-1 rounded-full bg-base-white" />
                                            <span>{{ $phone }}</span>
                                        </div>
                                    </a>
                                @else
                                    <div class="flex gap-2"><span> &nbsp; </span></div>
                                @endif
                            </div>
                        </div>
                    @endforeach
                @else
                    <div class=" flex-row flex-wrap text-sm-left align-items-left">
                        <p class="text-muted text-center">{{ trans('label.lbl_nothing_found') }}</p>
                    </div>
                @endif
            </div>
            {{ $users->links('livewire.livewire-pagination') }}
        </div>
    </div>
    <div wire:loading>
        @include('livewire.livewire-loader')
    </div>
    @php
        $users = $users->getCollection()->sortBy('display_name');
    @endphp
    <livewire:emails::livewire.email-modal :modalId="'modal-email'" :users="$users" />

</div>

@script
    <script>
        $(document).ready(function() {
            $("body").on('click', ".multi-select-option", function (e) {

                let selectedOptions = $(e.currentTarget).parent()
                    .find("input[type='checkbox']:checked")
                    .map(function () {
                        return $(this).val();
                    })
                    .get()

                @this.set($(this).parent().data('name'), selectedOptions);
            });

            $('body').on('click', '.tabs-btn-box', function () {
                // Reset all tabs and contents for the second set filter
                $(".tabs-btn-box").removeClass("active");

                // Set new active state for the clicked tab in the filter set
                $(this).addClass("active");

            });
        });
    </script>
@endscript