@extends('layouts.app')
@section('urlContent')
    {!! view('components.breadcrumbs', [
        'b_items' => [
            'Personellerim' => '/operation/mypersonels',
        ],
    ]) !!}
@endsection
@section('content')
    <div class="container-app relative">
        <div class="flex gap-6 items-center justify-between whitespace-nowrap">
            <div class="flex gap-6 items-center">
                <div>
                    <button data-dropdown-toggle="jobFilter"
                        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-lg focus:outline-none"
                        type="button" id="jobButton">
                        <i class="fa-solid fa-filter w-3 h-3 text-gray-300 mr-2.5"></i>
                        Görev Filtresi
                        <svg class="w-2.5 h-2.5 ml-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>
                    <!-- filter job dropdown -->
                    <div id="jobFilter"
                        class="filter-dropdown-all z-10 hidden overflow-auto max-h-80 w-48 bg-theme_secondary_white divide-y divide-gray-100 rounded-lg shadow absolute mt-2">
                        <ul class="p-3 space-y-1 text-sm text-gray-600">
                            <li>
                                <div class="flex items-center p-2 rounded hover:bg-gray-200">
                                    <button
                                        class="filter-role inline-flex justify-start w-full ml-2 text-sm cursor-pointer font-medium rounded"
                                        data-role="0">
                                        Tümü
                                    </button>
                                </div>
                            </li>
                            @foreach ($roles as $role)
                                <li>
                                    <div class="flex items-center p-2 rounded hover:bg-gray-200">
                                        <button
                                            class="filter-role inline-flex justify-start w-full ml-2 text-sm cursor-pointer font-medium rounded"
                                            data-role="{{ $role->id }}">
                                            {{ $role->title }}
                                        </button>
                                    </div>
                                </li>
                            @endforeach
                        </ul>
                    </div>
                </div>
                <div>
                    <button data-dropdown-toggle="paymentFilter"
                        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-lg focus:outline-none"
                        type="button" id="paymentButton">
                        <i class="fa-solid fa-filter w-3 h-3 text-gray-300 mr-2.5"></i>
                        Ödeme Vadesi
                        <svg class="w-2.5 h-2.5 ml-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>
                    <!-- filter payment dropdown -->
                    <div id="paymentFilter"
                        class="filter-dropdown-all z-10 hidden overflow-auto max-h-80 w-48 bg-theme_secondary_white divide-y divide-gray-100 rounded-lg shadow absolute mt-2">
                        <ul class="p-3 space-y-1 text-sm text-gray-600">
                            <li>
                                <div class="flex items-center p-2 rounded hover:bg-gray-200">
                                    <button
                                        class="filter-payment inline-flex justify-start w-full ml-2 text-sm cursor-pointer font-medium rounded"
                                        data-payment="0">
                                        Tümü
                                    </button>
                                </div>
                            </li>
                            <li>
                                <div class="flex items-center p-2 rounded hover:bg-gray-200">
                                    <button
                                        class="filter-payment inline-flex justify-start w-full ml-2 text-sm cursor-pointer font-medium rounded"
                                        data-payment="daily">
                                        Günlük
                                    </button>
                                </div>
                            </li>
                            <li>
                                <div class="flex items-center p-2 rounded hover:bg-gray-200">
                                    <button
                                        class="filter-payment inline-flex justify-start w-full ml-2 text-sm cursor-pointer font-medium rounded"
                                        data-payment="weekly">
                                        Haftalık
                                    </button>
                                </div>
                            </li>
                            <li>
                                <div class="flex items-center p-2 rounded hover:bg-gray-200">
                                    <button
                                        class="filter-payment inline-flex justify-start w-full ml-2 text-sm cursor-pointer font-medium rounded"
                                        data-payment="twoWeekly">
                                        15 Günlük
                                    </button>
                                </div>
                            </li>
                            <li>
                                <div class="flex items-center p-2 rounded hover:bg-gray-200">
                                    <button
                                        class="filter-payment inline-flex justify-start w-full ml-2 text-sm cursor-pointer font-medium rounded"
                                        data-payment="monthly">
                                        Aylık
                                    </button>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
                <div>
                    <button data-dropdown-toggle="sgkFilter"
                        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-lg focus:outline-none"
                        type="button" id="sgkButton">
                        <i class="fa-solid fa-filter w-3 h-3 text-gray-300 mr-2.5"></i>
                        Sgk Durumu
                        <svg class="w-2.5 h-2.5 ml-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>
                    <!-- filter payment dropdown -->
                    <div id="sgkFilter"
                        class="filter-dropdown-all z-10 hidden overflow-auto max-h-80 w-48 bg-theme_secondary_white divide-y divide-gray-100 rounded-lg shadow absolute mt-2">
                        <ul class="p-3 space-y-1 text-sm text-gray-600">
                            <li>
                                <div class="flex items-center p-2 rounded hover:bg-gray-200">
                                    <button
                                        class="inline-flex justify-start w-full ml-2 text-sm cursor-pointer font-medium rounded"
                                        data-sgk="0">
                                        Tümü
                                    </button>
                                </div>
                            </li>
                            <li>
                                <div class="flex items-center p-2 rounded hover:bg-gray-200">
                                    <button
                                        class="inline-flex justify-start w-full ml-2 text-sm cursor-pointer font-medium rounded"
                                        data-sgk="1">
                                        Var
                                    </button>
                                </div>
                            </li>
                            <li>
                                <div class="flex items-center p-2 rounded hover:bg-gray-200">
                                    <button
                                        class="inline-flex justify-start w-full ml-2 text-sm cursor-pointer font-medium rounded"
                                        data-sgk="2">
                                        Yok
                                    </button>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="flex">
                @php
                    $category = request()->category;
                    if ($category == 'active' || $category == null) {
                        $currentCategory = 'Aktif Personeller';
                    } elseif ($category == 'passive') {
                        $currentCategory = 'Pasif Personeller';
                    } elseif ($category == 'waiting_exit') {
                        $currentCategory = 'Çıkış Bekleyen Personeller';
                    } elseif ($category == 'exited') {
                        $currentCategory = 'Çıkış Yapmış Personeller';
                    }
                @endphp
                <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">{{ $currentCategory }}<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-fit h-44 overflow-auto bg-teheme_third_white">
                        <ul class="py-2 text-sm" aria-labelledby="dropdown-button">
                            <li>
                                <button type="button" data-category="active"
                                    class="inline-flex w-full px-4 py-2 text-gray-700 hover:text-gray-200 hover:bg-theme_black">Aktif
                                    Personeller</button>
                            </li>
                            <li>
                                <button type="button" data-category="passive"
                                    class="inline-flex w-full px-4 py-2 text-gray-700 hover:text-gray-200 hover:bg-theme_black">Pasif
                                    Personeller</button>
                            </li>
                            <li>
                                <button type="button" data-category="waiting_exit"
                                    class="inline-flex w-full px-4 py-2 text-gray-700 hover:text-gray-200 hover:bg-theme_black">Çıkış
                                    Bekleyen Personeller</button>
                            </li>
                            <li>
                                <button type="button" data-category="exited"
                                    class="inline-flex w-full px-4 py-2 text-gray-700 hover:text-gray-200 hover:bg-theme_black">Çıkış
                                    Yapmış Personeller</button>
                            </li>
                        </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="Kullanıcı Arayın..." 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>
        <ol class="flex flex-col gap-4 overflow-y-auto h-[calc(100vh-240px)] mt-4 text-sm leading-6 w-full">

            @foreach ($data as $item)
                <li class="relative flex space-x-3 2xl:space-x-6 py-6 bg-theme_secondary_black rounded-3xl px-6">
                    <img class="w-14 h-14 rounded-full object-cover showImage cursor-pointer"
                        src="{{ $item->user->profile_img
                            ? getCdnFile($item->user->profile_img)
                            : ($item->user->personelUser && $item->user->personelUser->profile_img
                                ? getCdnFile($item->user->personelUser->profile_img)
                                : getDefaultImage()) }}">
                    <div class="w-full">
                        <div class="flex-auto">
                            <div class="flex gap-6">
                                <div class="flex items-center gap-2">
                                    @php
                                        if ($item->user->is_active == 1) {
                                            $color = 'bg-green-500';
                                        } else {
                                            $color = 'bg-red-500';
                                        }
                                    @endphp
                                    <span class="inline-flex w-2 h-2 {{ $color }} border-white rounded-full"></span>
                                    <h3 class="font-semibold text-gray-300 capitalize userFullName">
                                        {{ $item->user?->fullName }}
                                    </h3>
                                    @php
                                        $birthdate = new DateTime($item->user->personelUser->birth_date);
                                        $today = new DateTime('today');
                                        $age = $birthdate->diff($today)->y;
                                    @endphp
                                    <span class="text-gray-300">{{ '( ' . $age . ' )' }}</span>
                                </div>
                                @if (
                                    $item->user &&
                                        $item->user->personelUser &&
                                        in_array('Engelli', json_decode($item->user->personelUser->working_status) ?? []) &&
                                        $item->user->personelUser->disability_rate)
                                    <p
                                        class="text-gray-300 bg-red-700 rounded-xl px-2 text-xs inline-flex items-center justify-center capitalize">
                                        % {{ $item->user->personelUser->disability_rate }} Engelli
                                    </p>
                                @endif
                            </div>
                            <dl class="mt-6 xl:mt-2 flex flex-col text-gray-400 xl:flex-row">
                                <div class="flex items-center space-x-3">
                                    <dt class="card-list-icon-area">
                                        <img class="w-5 fill-gray-400"
                                            src="{{ $item->user->roles[0]->icon ? getCdnFile($item->user->roles[0]->icon) : asset('assets/icons/job.svg') }}"
                                            alt="">
                                    </dt>
                                    <p class="text-gray-300 capitalize flex">
                                        {{ $item->user->roles[0]->title }}
                                    </p>
                                </div>
                                <div class="card-list">
                                    <dt class="card-list-icon-area">
                                        <i class="fa-solid fa-phone"></i>
                                    </dt>
                                    <p class="text-gray-300 capitalize whitespace-nowrap">
                                        {{ $item->phone }}
                                    </p>
                                </div>
                                <div class="card-list">
                                    <dt class="card-list-icon-area">
                                        <i class="fa-solid fa-city"></i>
                                    </dt>
                                    <p class="text-gray-300 capitalize whitespace-nowrap">
                                        {{ $item->district }}
                                    </p>
                                </div>
                                <div class="card-list">
                                    <dt class="card-list-icon-area">
                                        <i class="fa-solid fa-star cursor-pointer text-yellow-500 text-lg"></i>
                                    </dt>
                                    <p class="text-gray-300 capitalize whitespace-nowrap">
                                        @php
                                            $avgRate = $item->personelReview->avg('rate');
                                        @endphp
                                        @if (!$avgRate == null)
                                            {{ $avgRate }}
                                        @else
                                            Yorum Yok
                                        @endif
                                    </p>
                                </div>
                                <div data-popover-target-second="{{ $item->id }}" data-popover-placement="right"
                                    class="relative card-list">
                                    <dt class="card-list-icon-area">
                                        <i class="fa-solid fa-building"></i>
                                    </dt>
                                    @php
                                        $companies = $item->user->favoritedOffices;
                                    @endphp
                                    <div class="text-gray-300 capitalize">
                                        @if (count($companies) > 0)
                                            <div>
                                                {{ count($companies) }} Firmaya Atanmış
                                            </div>
                                            <div popover-target-content="{{ $item->id }}" role="tooltip"
                                                class="absolute left-0 z-[100] top-[30px] invisible inline-block w-64 max-w-xl text-sm font-light text-gray-300 transition-opacity duration-300 bg-theme_black border border-gray-200 rounded-lg shadow-sm opacity-0">
                                                <div class="flex flex-col gap-1 px-3 py-2 font-semibold">
                                                    @foreach ($companies as $company)
                                                        @if ($company->type == 'department')
                                                            <p class="bg-green-600 p-2 rounded-lg text-white">
                                                                <span
                                                                    class="mr-1">{{ $company->company?->user_departman?->name }}</span>
                                                            </p>
                                                        @endif
                                                    @endforeach
                                                </div>
                                                <div data-popper-arrow></div>
                                            </div>
                                        @else
                                            Atama Yok
                                        @endif
                                    </div>
                                </div>

                                @if ($item->working_type != 'wage')
                                    <div class="card-list">
                                        <dt class="card-list-icon-area">
                                            <i class="fa-solid fa-money-bill"></i>
                                        </dt>
                                        <p class="text-gray-300 capitalize whitespace-nowrap">
                                            @php
                                                $termText = 'Belirtilmedi';
                                                $term = $item->payment_term;
                                                if ($term == 'daily') {
                                                    $termText = 'Günlük';
                                                } elseif ($term == 'weekly') {
                                                    $termText = 'Haftalık';
                                                } elseif ($term == 'twoWeekly') {
                                                    $termText = '15 Günlük';
                                                } elseif ($term == 'monthly') {
                                                    $termText = 'Aylık';
                                                }
                                            @endphp
                                            @if ($termText == 'Belirtilmedi')
                                                {{ $termText }}
                                            @else
                                                {{ $termText }} Ödeme
                                            @endif
                                        </p>
                                    </div>
                                @endif
                                @if ($item->working_type)
                                    <div class="card-list">
                                        <dt class="card-list-icon-area">
                                            <i class="fa-solid fa-money-bill"></i>
                                        </dt>
                                        <p class="text-gray-300 capitalize whitespace-nowrap">
                                            @if ($item->working_type == 'wage')
                                                Maaşlı
                                            @elseif ($item->working_type == 'daily')
                                                Part Time
                                            @elseif ($item->working_type == 'hourly')
                                                Saatlikçi
                                            @endif
                                        </p>
                                    </div>
                                @endif
                                @if ($item->user->hrPersonelUser->sgk_entry)
                                    @php
                                        $path = Str::substr($item->user->hrPersonelUser->sgk_entry, -3);
                                    @endphp
                                    <div class="card-list">
                                        <button type="button"
                                            value="{{ getCdnFile($item->user->hrPersonelUser->sgk_entry) }}"
                                            class="@if ($path == 'png') imageFile @else pdfFile @endif inline-flex items-center p-1 rounded gap-2 font-medium text-white ">
                                            <i class="fa-solid fa-eye"></i>
                                            <p>SGK Girişi</p>
                                        </button>
                                    </div>
                                @endif
                            </dl>
                        </div>
                    </div>
                    <div
                        class="flex flex-col xl:flex-row gap-2 3xl:gap-6 justify-center items-center text-gray-300 capitalize">
                        <button class="absolute top-5 right-5 px-3 py-1 rounded bg-blue-700 processButton">
                            <i class="fa-solid fa-ellipsis-vertical"></i>
                        </button>
                        <div
                            class="process z-50 w-44 absolute top-0 right-12 hidden space-y-2 bg-theme_black border-2 border-theme_secondary_black rounded-lg p-4">
                            <button value="{{ $item->user->id }}"
                                class="addNewFavorite w-full inline-flex whitespace-nowrap items-center px-2 py-1 rounded gap-2 font-medium text-white bg-green-500">
                                <i class="fa-solid fa-plus"></i>
                                Atama Yap
                            </button>
                            <button value="{{ $item->user->id }}"
                                class="addBlackList w-full inline-flex whitespace-nowrap items-center px-2 py-1 rounded gap-2 font-medium text-white bg-red-700">
                                <i class="fa-solid fa-cancel"></i>
                                Kara Liste
                            </button>
                            <button value="{{ $item->user->id }}"
                                class="newAdditionalFeeRequest w-full inline-flex whitespace-nowrap items-center px-2 py-1 rounded gap-2 font-medium text-white bg-purple-500">
                                <i class="fa-solid fa-money-bill"></i>
                                Ek Ücret Talebi
                            </button>
                            <button
                                class="exitRequest inline-flex w-full items-center whitespace-nowrap px-2 py-1 rounded gap-2 font-medium text-white bg-red-500"
                                value="{{ $item->user->id }}">
                                <i class="fa-solid fa-circle-xmark"></i>
                                Çıkış Talebi
                            </button>
                            @if ($item->user->is_active == true)
                                <form id="chagnestatusToPassive{{ $item->user->id }}"
                                    action="{{ route('operation.changeStatusUser', ['user' => $item->user->id]) }}"
                                    method="post">
                                    @csrf
                                    <button form="chagnestatusToPassive{{ $item->user->id }}" type="submit"
                                        class="inline-flex w-full items-center whitespace-nowrap px-2 py-1 rounded gap-2 font-medium text-white bg-pink-600">
                                        <i class="fa-solid fa-user-minus"></i>
                                        Pasif Yap
                                    </button>
                                </form>
                            @endif
                            @if ($item->user->is_active == false && !$item->user->exitedPersonel)
                                <form id="chagnestatusToActive{{ $item->user->id }}"
                                    action="{{ route('operation.changeStatusUser', ['user' => $item->user->id]) }}"
                                    method="post">
                                    @csrf
                                    <button form="chagnestatusToActive{{ $item->user->id }}" type="submit"
                                        class="inline-flex w-full items-center whitespace-nowrap px-2 py-1 rounded gap-2 font-medium text-white bg-green-800">
                                        <i class="fa-solid fa-user-plus"></i>
                                        Aktif Yap
                                    </button>
                                </form>
                            @endif
                            @if ($item->user->exitedPersonel)
                                <form action="{{ route('operation.getBackToWork') }}" method="post">
                                    @csrf
                                    <input type="hidden" name="personel_user_id" value="{{ $item->user->id }}">
                                    <button
                                        class="inline-flex w-full items-center whitespace-nowrap px-2 py-1 rounded gap-2 font-medium text-white bg-green-800">
                                        <i class="fa-solid fa-user-plus"></i>
                                        İşe Geri Al
                                    </button>
                                </form>
                            @endif
                        </div>
                    </div>
                </li>
            @endforeach

            @if (count($data) <= 0)
                <x-noData>
                    <x-slot name="message">
                        Hiç Veri Bulunamadı
                    </x-slot>
                </x-noData>
            @endif
        </ol>
        <div class="pt-4">
            {{ $data->links('pagination::tailwind') }}
        </div>
    </div>
    @include('components.showImage')
    @include('components.operation.addPersonelsToBlacklist')
    @include('components.operation.addPersonelToOfficesPopup')
    @include('components.favoriteUsers')
    @include('components.operation.newAdditionalFewRequest')
    @include('components.operation.exitRequestPopup')
    @include('components.pdfViewer')
    @if (session('error'))
        @include('components.error-modal')
    @endif
    @if ($errors->any())
        @include('components.error-modal-second')
    @endif
    @if (session('success'))
        @include('components.success-modal')
    @endif
@endsection
@section('javascript')
    <script>
        $('.processButton').click(function(e) {
            e.stopPropagation();
            $('.process').not($(this).closest('div').find('.process')).hide();
            var div = $(this).closest('div');
            var dropDown = div.find('.process');
            dropDown.fadeToggle('fast');
        });

        $(document).on('click', function(e) {
            if (!$(e.target).hasClass("processButton") && $(".process").has(e.target).length === 0) {
                $(".process").fadeOut('fast');
            }
        });

        $(document).ready(function() {
            //AKTIF PASIF FILTRESI
            $('.filter-links').click(function() {
                var status = $(this).data('status');
                filterTableByStatus(status);
            });

            function filterTableByStatus(status) {
                $('.personelRow').each(function() {
                    var rowData = $(this).data('status');
                    if (status === 2 || rowData === status) {
                        $(this).show();
                    } else {
                        $(this).hide();
                    }
                });
                var countedData = document.getElementById('countedDatas');
                var visibleRows = document.querySelectorAll('.personelRow[style=""]');
                countedData.textContent = visibleRows.length;
            }

            // GOREVE GORE FILTRELEYEN KOD
            $('.filter-role').click(function() {
                var role = $(this).data('role');
                filterTableByJob(role);
            });

            function filterTableByJob(role) {
                var countedData = document.getElementById('countedDatas');
                $('.personelRow').each(function() {
                    var rowData = $(this).data('role');
                    if (role === 0 || rowData === role) {
                        $(this).show();
                    } else {
                        $(this).hide();
                    }
                });
                var visibleRows = document.querySelectorAll('.personelRow[style=""]');
                countedData.textContent = visibleRows.length;
            }

            // ODEMEYE GORE FILTRELEYEN KOD
            $('.filter-payment').click(function() {
                var payment = $(this).data('payment');
                filterTableByPayment(payment);
            });

            function filterTableByPayment(payment) {
                $('.personelRow').each(function() {
                    var rowData = $(this).data('payment');
                    if (payment === 0 || rowData === payment) {
                        $(this).show();
                    } else {
                        $(this).hide();
                    }
                });
                var countedData = document.getElementById('countedDatas');
                var visibleRows = document.querySelectorAll('.personelRow[style=""]');
                countedData.textContent = visibleRows.length;
            }
        });

        // POPUPS CODES
        // offices active passive filter
        $(document).ready(function() {
            $('.filter-companies').click(function() {
                var status = $(this).data('status');
                filterTable(status);
            });

            function filterTable(status) {
                $('.officeRow').each(function() {
                    var rowData = $(this).data('status');
                    if (status === 2 || rowData === status) {
                        $(this).show();
                    } else {
                        $(this).hide();
                    }
                });
            }
        });

        // offices search input
        document.getElementById('search_offices').addEventListener('input', function() {
            var searchText = this.value.toLocaleLowerCase('tr-TR');

            var officeRows = document.querySelectorAll('.officeRow');

            officeRows.forEach(function(row) {
                var rowData = row.querySelector('h3, p').textContent.toLocaleLowerCase('tr-TR');

                if (rowData.includes(searchText)) {
                    row.style.display = '';
                } else {
                    row.style.display = 'none';
                }
            });
        });

        $('.favoriteUsersPopup').hide();
        $('.addNewFavorite').click(function() {
            $('#favorite_user_id').empty();
            var row = $(this).closest('.personelRow');
            var userName = row.find('.userFullName');
            var userNameContent = userName.text();
            var user_id = $(this).val();

            $('.popupUserName').text(userNameContent);
            $('#favorite_user_id').val(user_id);
            $('.favoriteUsersPopup').fadeIn('slow');
        });

        $('.close-popup').click(function() {
            $('.favoriteUsersPopup').fadeOut('slow');
        })

        $('.closeAcceptPopup').click(function() {
            $('.acceptPopup').hide();
        })

        $('.selectedOffice').click(function() {
            var type = $(this).data('type');
            var id = $(this).val();
            var idInput = $('#id');
            var typeInput = $('#type');
            var officeName = $(this).find('.officeName');
            var officeNameContent = officeName.text();

            if (type == 'department') {
                $('.officeType').text('Departmanına');
            } else if (type == 'branch') {
                $('.officeType').text('Şubesine');
            } else if (type == 'head') {
                $('.officeType').text('Şirketine');
            }

            $('.popupOfficeName').text(officeNameContent)
            typeInput.val(type);
            idInput.val(id);
            $('.acceptPopup').show();
        });

        $('.addBlackList').click(function() {
            var row = $(this).closest('.personelRow');
            var userName = row.find('.userFullName');
            var userNameContent = userName.text();
            var val = $(this).val();

            $('.popupUserName').text(userNameContent);
            $('.blackListPopup').show();
            $('#black_list_user_id').val(val);
        });

        $('.closeBlackListPopup').click(function() {
            $('.blackListPopup').hide();
        });

        $('.newAdditionalFeeRequest').click(function() {
            var row = $(this).closest('.personelRow');
            var userName = row.find('.userFullName');
            var userNameContent = userName.text();
            var val = $(this).val();

            $('.popupUserName').text(userNameContent);
            $('.AdditionalFeeRequestPopup').show();
            $('#additional_few_request_user_id').val(val);
        });

        $('.closeAdditionalFeeRequestPopup').click(function() {
            $('.AdditionalFeeRequestPopup').hide();
        });

        $('.exitRequest').click(function() {
            var row = $(this).closest('.personelRow');
            var userName = row.find('.userFullName');
            var userNameContent = userName.text();
            var val = $(this).val();

            $('.popupUserName').text(userNameContent);
            $('.exitRequestPopup').show();
            $('#exit_request_user_id').val(val);
        });

        $('.closeExitRequestPopup').click(function() {
            $('.exitRequestPopup').hide();
        })

        $('.exit_type').click(function() {
            var type = $(this).val();
            if (type == 1) {
                $('#expelling').show();
            } else {
                $('#expelling').hide();
            }
        });

        $('.imageFile').click(function() {
            $('#filePath').empty();
            $('#filePath').append(
                '<img class="w-full rounded-lg h-full object-contain" src="' + $(this).val() + '">'
            );
            $('#pdf-popup').fadeIn('slow');
        })

        $('.pdfFile').click(function() {
            $('#filePath').empty();
            $('#filePath').append(
                '<iframe src="' + $(this).val() +
                '" style="width:100%; height:500px; border-radius:8px;" frameborder="0"></iframe>'
            );
            $('#pdf-popup').fadeIn('slow');
        })

        $('.close-pdf-popup').click(function() {
            $('#pdf-popup').fadeOut('slow');
        })

        $('#searchButton').click(function() {
            var text = $('#searchUsers').val();
            navigate('searchUsers=' + text);
        });

        $('[data-category]').click(function() {
            var category = $(this).data('category');
            navigate('category=' + category);
        })

        $('[data-role]').click(function() {
            var role = $(this).data('role');
            navigate('role=' + role);
        })

        $('[data-payment]').click(function() {
            var payment = $(this).data('payment');
            navigate('payment=' + payment);
        })

        $('[data-sgk]').click(function() {
            var sgk = $(this).data('sgk');
            navigate('sgk=' + sgk);
        })

        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 + '=')) {
                // Parametre değeri boş olsa bile güncelleme yapılmalı
                var regex = new RegExp(paramName + '=[^&]*');
                currentUrl = currentUrl.replace(regex, 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;
        }


        $(document).ready(function() {
            var currentUrl = window.location.href;

            if (currentUrl.includes('searchUsers')) {
                var searchVal = getParameterByName('searchUsers', currentUrl);

                $('#searchUsers').val(searchVal);
            }
        });

        function getParameterByName(name, url) {
            name = name.replace(/[\[\]]/g, '\\$&');
            var regex = new RegExp('[?&]' + name + '(=([^&#]*)|&|#|$)'),
                results = regex.exec(url);
            if (!results) return null;
            if (!results[2]) return '';
            return decodeURIComponent(results[2].replace(/\+/g, ' '));
        }
    </script>
@endsection