@extends('layouts.app')
@section('content')
    <div class="container-app">
        @if (env('APP_TYPE') == 'dev')
            <div class="flex">
                <label for="search-dropdown" class="mb-2 text-sm font-medium text-gray-900 sr-only dark:text-white">Your
                    Email</label>
                <button id="dropdown-button" data-dropdown-toggle="dropdown"
                    class="filter-button-all flex-shrink-0 z-10 inline-flex items-center py-2.5 px-4 text-sm font-medium text-center text-gray-900 bg-theme_black border-theme_secondary_black text-white/90 border rounded-s-lg focus:outline-none"
                    type="button">All categories <svg class="w-2.5 h-2.5 ms-2.5" aria-hidden="true"
                        xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 6">
                        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                            d="m1 1 4 4 4-4" />
                    </svg></button>
                <div class="hidden filter-dropdown-all" id="dropdown">
                    <div
                        class="z-10 absolute divide-y divide-gray-100 rounded-r-lg shadow w-44 h-44 overflow-auto bg-teheme_third_white">
                        <ul class="py-2 text-sm" aria-labelledby="dropdown-button">
                            @foreach ($roles as $item)
                                <li>
                                    <button type="button" data-role="{{ $item->name }}"
                                        class="inline-flex w-full px-4 py-2 text-gray-700 hover:text-gray-200 hover:bg-theme_black">{{ $item->title }}</button>
                                </li>
                            @endforeach
                        </ul>
                    </div>
                </div>
                <div class="relative w-full">
                    <input type="text" id="searchUsers"
                        class="block p-2.5 bg-theme_black border-theme_secondary_black text-white/90 w-full z-20 text-sm text-gray-900 rounded-e-lg border-s-2 border focus:ring-blue-500 focus:border-blue-500"
                        placeholder="Search Mockups, Logos, Design Templates..." required />
                    <button id="searchButton"
                        class="absolute top-0 end-0 p-2.5 text-sm font-medium h-full text-white bg-blue-700 rounded-e-lg border border-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">
                        <svg class="w-4 h-4" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none"
                            viewBox="0 0 20 20">
                            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                d="m19 19-4-4m0-7A7 7 0 1 1 1 8a7 7 0 0 1 14 0Z" />
                        </svg>
                        <span class="sr-only">Search</span>
                    </button>
                </div>
            </div>
            <div class="flex flex-col gap-4 w-full">
                <ol class="overflow-auto h-[calc(100vh-240px)] mt-4 text-sm leading-6 lg:col-span-7 xl:col-span-8 w-full">
                    @foreach ($users as $item)
                        <li class="relative flex space-x-6 py-6 bg-theme_secondary_black rounded-3xl p-8 mt-4"
                            style="">
                            @php
                                $imageUrl = null;
                                if ($item->profile_img) {
                                    $imageUrl = $item->profile_img;
                                } elseif ($item->personelUser) {
                                    $imageUrl = $item->personelUser->profile_img;
                                } elseif ($item->user_departman && $item->user_departman->customer_role == 'Company') {
                                    $imageUrl = $item->user_departman->customer_user->headOffice->office_logo;
                                } elseif ($item->user_departman && $item->user_departman->customer_role == 'Branch') {
                                    $imageUrl = $item->user_departman->customer_user->branch->headOffice->office_logo;
                                } elseif ($item->headOffice) {
                                    $imageUrl = $item->headOffice->office_logo;
                                } elseif ($item->branch) {
                                    $imageUrl = $item->branch->headOffice->office_logo;
                                } else {
                                    $imageUrl = 'resim yok';
                                }
                            @endphp
                            <img class="w-14 h-14 rounded-full object-cover showImage cursor-pointer"
                                src="{{ getCdnFile($imageUrl) }}">
                            <a href="{{ route('loginuserid', ['id' => $item->id]) }}" class="w-full">
                                <div class="flex-auto">
                                    <h3 class="pr-10 font-semibold xl:pr-0 text-gray-300 capitalize userFullName">
                                        {{ $item->full_name }}
                                    </h3>

                                    <div class="mt-2 flex items-center">
                                        <p class="text-gray-300">
                                            {{ isset($item->roles[0]) ? $item->roles[0]->name : 'no Role' }}
                                        </p>
                                    </div>
                                </div>
                            </a>
                            <div class="flex gap-6 items-center text-gray-300 capitalize">
                                <a href="{{ route('loginuserid', ['id' => $item->id]) }}"
                                    class="inline-flex whitespace-nowrap items-center px-2 py-1 rounded gap-2 font-medium text-white bg-blue-600">
                                    Giriş Yap
                                </a>
                            </div>
                        </li>
                    @endforeach
                </ol>
                <div class="">
                    {{ $users->links('pagination::tailwind') }}
                </div>
            </div>
        @endif
    </div>
@endsection
@section('javascript')
    <script>
        $('#searchButton').click(function() {
            var text = $('#searchUsers').val();
            navigate('searchUsers=' + text);
        });

        function navigate(queryString) {
            var currentUrl = window.location.href;

            // Parametre adı kontrolü
            var paramName = queryString.split('=')[0];

            // Eğer aynı parametre adı varsa, mevcut parametreyi güncelle
            if (currentUrl.includes(paramName + '=')) {
                currentUrl = currentUrl.replace(new RegExp(paramName + '=[^&]+'), queryString);
            } else {
                // Parametre adı yoksa, yeni parametreyi ekleyin
                var separator = currentUrl.includes('?') ? '&' : '?';
                currentUrl = currentUrl + separator + queryString;
            }

            // Yeni URL'ye yönlendir
            window.location.href = currentUrl;
        }

        $('[data-role]').click(function() {
            var role = $(this).data('role');
            navigate('role=' + role);
        })
    </script>
@endsection