@extends('layouts.app')
@section('content')
    <div class="w-full p-12 text-white">
        <div class="flex justify-between mb-6 gap-6">
            <input type="hidden" id="demandId" value="{{ $demand->id }}">
            <div class="relative">
                <div id="information" class="absolute hidden top-10 left-0 z-10">
                    <div
                        class="w-max max-w-xl overflow-x-auto bg-theme_gray border-4 border-x-theme_secondary_gray rounded-lg grid text-theme_secondary_black">
                        <div class="grid grid-cols-2 border-b p-3 items-center gap-x-6">
                            <h1 class="w-max text-sm font-semibold">
                                Departman
                            </h1>
                            <p class="font-medium text-sm text-gray-600 capitalize">
                                {{ $demand?->tickets?->user?->user_departman?->name }}
                            </p>
                        </div>
                        <div class="grid grid-cols-2 border-b p-3 items-center gap-x-6">
                            <h1 class="w-max text-sm font-semibold">
                                Yetkili
                            </h1>
                            <p class="font-medium text-sm text-gray-600 capitalize">
                                {{ $demand?->tickets?->user->full_name }}
                            </p>
                        </div>
                        <div class="grid grid-cols-2 border-b p-3 items-center gap-x-6">
                            <h1 class="w-max text-sm font-semibold">
                                Müşteri Notu
                            </h1>
                            <p class="font-medium text-sm text-gray-600 capitalize">
                                {{ $demand->note ?? 'Herhangi bir not bulunamadı.' }}</p>
                        </div>
                        <div class="grid grid-cols-2 border-b p-3 items-center gap-x-6">
                            <h1 class="w-max text-sm font-semibold">
                                Talep
                            </h1>
                            <p class="font-medium text-sm text-gray-600 capitalize">{{ $demand->quantity }} adet
                                {{ $demand->categories->title }}</p>
                        </div>
                        <div class="grid grid-cols-2 border-b p-3 items-center gap-x-6">
                            <h1 class="w-max text-sm font-semibold">
                                Çalışma Tipi
                            </h1>
                            <p class="font-medium text-sm text-gray-600 capitalize">
                                @php
                                    $type = $demand?->tickets?->user->user_departman->payment_type;
                                    if ($type == 'hourly') {
                                        $text = 'Saatlik';
                                    } elseif ($type == 'daily') {
                                        $text = 'Günlük';
                                    } elseif ($type == 'monthly') {
                                        $text = 'Aylık';
                                    }
                                @endphp
                                {{ $text }}
                            </p>
                        </div>
                        @if ($firmPaymentType == 'firm')
                            @if ($demand?->tickets?->user->user_departman->customer_user->roles[0]->name == 'Company')
                                @if (
                                    $demand?->tickets?->user->user_departman->customer_user->customerPersonelCost
                                        ?->where('category_id', $demand->categories->id)->first()['category_cost_' . $demand?->tickets?->user->user_departman->payment_type]
                                )
                                    <div class="grid grid-cols-2 border-b p-3 items-center gap-x-6">
                                        <h1 class="w-max text-sm font-semibold">
                                            Hizmet Fiyatı
                                        </h1>
                                        <p class="font-medium text-sm text-gray-600 capitalize">
                                            {{ $demand?->tickets?->user->user_departman->customer_user->customerPersonelCost
                                                ?->where('category_id', $demand->categories->id)->first()['category_cost_' . $demand?->tickets?->user->user_departman->payment_type] }}
                                            ₺
                                        </p>
                                    </div>
                                @endif
                            @endif
                        @endif
                    </div>
                </div>
            </div>
            <h1 class="text-white font-bold text-2xl">
                {{ \Carbon\Carbon::parse($demand->tickets->date)->isoFormat('D MMMM Y dddd') }} Günü Saat
                {{ $demand->hour }}
            </h1>
        </div>
        <div class="flex justify-between gap-6">
            {{-- filters --}}
            <div
                class="p-6 w-72 border border-teheme_third_gray bg-theme_secondary_black rounded-xl h-[calc(100vh-240px)] overflow-y-auto">
                <h1 class="mb-4 text-sm font-semibold border-b border-teheme_third_gray pb-2">
                    Talep Detayı
                </h1>
                <div class="gap-3 divide-y divide-teheme_third_black">
                    <p class="text-sm capitalize pb-2">
                        {{ $demand?->tickets?->user?->user_departman?->name }}
                    </p>
                    <p class="text-sm capitalize py-2">
                        {{ $demand?->tickets?->user->full_name }}
                    </p>
                    <p class="text-sm capitalize py-2">
                        {{ $demand->note ?? 'Not yok.' }}
                    </p>
                    <p class="text-sm capitalize py-2">
                        {{ $demand->quantity }} adet
                        {{ $demand->categories->title }}
                    </p>
                    <p class="text-sm capitalize py-2">
                        @php
                            $type = $demand?->tickets?->user->user_departman->payment_type;
                            if ($type == 'hourly') {
                                $text = 'Saatlik';
                            } elseif ($type == 'daily') {
                                $text = 'Günlük';
                            } elseif ($type == 'monthly') {
                                $text = 'Aylık';
                            }
                        @endphp
                        {{ $text }}
                    </p>
                    @if ($firmPaymentType == 'firm')
                        @if ($demand?->tickets?->user->user_departman->customer_user->roles[0]->name == 'Company')
                            @if (
                                $demand?->tickets?->user->user_departman->customer_user->customerPersonelCost
                                    ?->where('category_id', $demand->categories->id)->first()['category_cost_' . $demand?->tickets?->user->user_departman->payment_type]
                            )
                                <p class="text-sm capitalize py-2">
                                    {{ $demand?->tickets?->user->user_departman->customer_user->customerPersonelCost
                                        ?->where('category_id', $demand->categories->id)->first()['category_cost_' . $demand?->tickets?->user->user_departman->payment_type] }}
                                </p>
                            @endif
                        @endif
                    @endif
                </div>
                <h1 class="mb-4 text-sm font-semibold border-b border-teheme_third_gray pb-2 mt-6">
                    Filtreler
                </h1>
                <div class="grid gap-3">
                    <div class="relative flex items-center w-full">
                        <input type="text" name="search" id="search" placeholder="İsim Arayın..."
                            class="text-gray-300 w-full bg-theme_black border border-gray-600 focus:outline-none font-medium rounded-lg text-sm pr-20 py-1.5">
                        <button type="button" id="searchButton"
                            class="button-3 absolute right-1 px-2 py-1 text-sm font-normal">Ara</button>
                        <button type="button" id="clearButton"
                            class="button-3 hidden bg-red-600 absolute right-12 px-2 py-1 text-sm font-normal">
                            <i class="fa-solid fa-xmark"></i>
                        </button>
                    </div>
                    {{-- <div class="flex gap-2 items-center">

                        <select id="paymentTerm" name="paymentTerm" class="input-2 w-full text-sm">
                            <option selected disabled>Ödeme Vadesi Seçiniz</option>
                            <option value="daily">Günlük</option>
                            <option value="weekly">Haftalık</option>
                            <option value="twoWeekly">15 Günlük</option>
                            <option value="monthly">Aylık</option>
                        </select>
                    </div>
                    <div class="flex gap-2 items-center">
                        <select id="genderSelect" name="gender" class="input-2 w-full text-sm">
                            <option selected disabled>Cinsiyet Seçiniz</option>
                            <option value="Erkek">Erkek</option>
                            <option value="Kadın">Kadın</option>
                        </select>
                    </div>
                    <div class="flex gap-2 items-center">
                        <select id="sgk" name="sgk" class="input-2 w-full text-sm">
                            <option selected disabled>SGK Durumu</option>
                            <option value="Çalışıyor">Çalışıyor</option>
                            <option value="Çalışmıyor">Çalışmıyor</option>
                        </select>
                    </div> --}}

                </div>
            </div>
            <div class="flex w-full bg-theme_secondary_black rounded-xl p-2 h-[calc(100vh-240px)]">
                <div class="flex flex-col w-1/2 p-6">
                    <h1 class="font-semibold mb-4">
                        Çalışan Seçin
                    </h1>
                    <div id="siftAddForm"
                        class="flex flex-col gap-2 h-[calc(100vh-200px)] border border-teheme_third_gray rounded-xl overflow-y-auto p-3">
                        @foreach ($favoritedUsers as $user)
                            @if ($user->user->personelUser)
                                @php
                                    if ($user->user->departments_added_to_favorites) {
                                        $checkFavori = false;
                                        foreach ($user->user->departments_added_to_favorites as $key => $favori) {
                                            if ($favori->customer_id = $user->user->customer) {
                                                $checkFavori = true;
                                            }
                                        }
                                    }
                                @endphp
                                <label for="{{ $user->user->id }}"
                                    class="bg-teheme_third_black flex gap-4 items-center cursor-pointer p-3 rounded-lg w-full h-max workers">
                                    <input type="checkbox" name="users[]" value="{{ $user->user->id }}"
                                        id="{{ $user->user->id }}"
                                        class="m-1 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 focus:ring-2">
                                    <img class="w-10 h-10 object-cover rounded-full userImg"
                                        src="{{ $user->user->profile_img ? getCdnFile($user->user->profile_img) : getCdnFile($user->user->personelUser->profile_img) }}">
                                    <span
                                        class="uppercase text-sm select-none userFullName">{{ $user->user->full_name }}</span>
                                    @if ($user->user->personelUser->disability_rate)
                                        <span class="text-xs select-none">%
                                            {{ $user->user->personelUser->disability_rate }}
                                            Engelli</span>
                                    @endif
                                    @php
                                        $checkSift = $user->user->userSifts;
                                    @endphp
                                    @if (!$checkSift->isEmpty())
                                        @php
                                            $checkSift = $checkSift
                                                ->where('demand_date', '>', today()->format('Y-m-d'))
                                                ->sortBy('demand_date')
                                                ->first();
                                        @endphp
                                        @if ($checkSift)
                                            @php
                                                $siftDate = $checkSift->demand_date;
                                                $siftHour = $checkSift->demand->hour;
                                            @endphp
                                            <span class="text-xs select-none bg-yellow-600 px-2 py-1 rounded-full ml-auto">
                                                {{ \Carbon\Carbon::parse($siftDate)->isoFormat('D MMMM Y') }} saat
                                                {{ $siftHour }}
                                            </span>
                                        @endif
                                    @endif
                                    @if ($checkFavori)
                                        <i class="fa-solid fa-star text-yellow-300"></i>
                                    @endif
                                </label>
                            @endif
                        @endforeach
                    </div>
                </div>
                <form class="flex flex-col w-1/2 p-6" method="POST" onsubmit="showLoading()"
                    action="{{ route('operation.create.sifts', ['demand' => $demand]) }}">
                    @csrf
                    <h1 class="font-semibold mb-4">
                        Seçilen Çalışanlar
                    </h1>
                    <div id="workersArea"
                        class="flex flex-col gap-2 h-[calc(100vh-200px)] border border-teheme_third_gray rounded-xl overflow-y-auto p-3">
                        @if (count($personels) > 0)
                            @foreach ($personels as $user)
                                <label for="{{ $user->user->id }}"
                                    class="flex justify-between items-center bg-teheme_third_black cursor-pointer p-3 rounded-lg w-full h-max">
                                    <div class="flex items-center gap-4 w-full" data-open="{{ $user->user->id }}"
                                        data-name="{{ $user->user->full_name }}">
                                        <img class="w-10 h-10 object-cover rounded-full userImg"
                                            src="{{ $user->user->profile_img ? getCdnFile($user->user->profile_img) : getCdnFile($user->user->personelUser->profile_img) }}">
                                        <span
                                            class="uppercase text-sm select-none userFullName line-clamp-1">{{ $user->user->full_name }}</span>
                                        @if ($user->user->personelUser->disability_rate)
                                            <span class="text-xs select-none">%
                                                {{ $user->user->personelUser->disability_rate }}
                                                Engelli</span>
                                        @endif
                                    </div>
                                    <div class="flex items-center gap-2 justify-end">
                                        @if ($user->status == '2')
                                            <span
                                                class="bg-yellow-600 px-2 py-1 rounded-full text-xs select-none">Bekleniyor</span>
                                        @elseif ($user->status == '1')
                                            <span
                                                class="bg-green-700 px-2 py-1 rounded-full text-xs select-none">Onaylandı</span>
                                        @elseif ($user->status == '3')
                                            <span class="bg-green-700 px-2 py-1 rounded-full text-xs select-none">Onaylandı,
                                                Sgk Girişi
                                                Bekleniyor
                                            </span>
                                        @else
                                            <span
                                                class="bg-red-700 px-2 py-1 rounded-full text-xs select-none">Onaylanmadı</span>
                                            @if ($user->reject_reason)
                                                <span
                                                    class="bg-yellow-600 px-2 py-1 rounded-full text-xs select-none capitalize line-clamp-1">{{ $user->reject_reason }}</span>
                                            @endif
                                        @endif
                                        <button form="deleteForm"
                                            class="bg-red-700 px-2 py-2 rounded-md text-xs select-none whitespace-nowrap"
                                            data-id="{{ $user->user->id }}">
                                            Geri Al
                                        </button>
                                    </div>
                                </label>
                            @endforeach
                        @endif
                    </div>
                    <button type="submit" class="button-2 mt-3">
                        Kaydet
                    </button>
                </form>
                <form id="deleteForm" action="{{ route('operation.delete.sift') }}" method="post"
                    onsubmit="showLoading()">
                    @csrf
                    <input type="hidden" name="demand_id" value="{{ $demand->id }}">
                    <input type="hidden" name="user_id" id="user_id_for_delete">
                </form>
            </div>
        </div>
    </div>
    <x-popup-modal id="jobApprove">
        <x-slot name="message">
            <span id="userFullName" class="font-semibold"></span> Adlı
            Kullanıcıya Yapmak istediğiniz işlemi seçiniz
        </x-slot>
        <x-slot name="content">
            <form action="{{ route('operation.changeDemandSiftStatus') }}" method="post" onsubmit="showLoading()">
                @csrf
                <input type="hidden" name="user_id" id="user_id">
                <input type="hidden" name="demand_id" id="demand_id" value="{{ $demand->id }}">
                <div class="flex justify-center items-center gap-4 mt-4">
                    <button value="0" name="status"
                        class="inline-flex justify-center gap-2 items-center w-32 p-2 rounded text-gray-300 focus:ring-red-900 focus:ring-4 font-semibold bg-red-700">
                        <i class="fa-solid fa-xmark"></i>
                        İşi Reddet
                    </button>
                    <button value="1" name="status"
                        class="inline-flex justify-center gap-2 items-center w-32 p-2 rounded text-gray-300 focus:ring-green-900 focus:ring-4 font-semibold bg-green-700">
                        <i class="fa-solid fa-check"></i>
                        İşi Kabul Et
                    </button>
                </div>
            </form>
        </x-slot>
    </x-popup-modal>
    @if ($errors->any())
        @include('components.error-modal-second')
    @elseif (session('success'))
        @include('components.success-modal')
    @elseif(session('error'))
        @include('components.error-modal')
    @endif
@endsection
@section('javascript')
    <script>
        $('[data-id]').click(function() {
            var id = $(this).data('id');
            $('#user_id_for_delete').val(id);
        });

        // $('#getWorkedBeforeWorkers').click(function() {
        //     var demandId = $('#demandId').val();

        //     $.ajax({
        //         type: "GET",
        //         url: "/operation/get/worked/before/users",
        //         data: {
        //             demandId: demandId
        //         },
        //         dataType: "JSON",
        //         success: function(response) {
        //             response.forEach(function(item) {
        //                 console.log(item);
        //                 var newWorker = `<label for="${item.pre_meeting.userId}" class="flex gap-4 items-center bg-teheme_third_black cursor-pointer p-3 rounded-lg w-full h-max workers">
    //                     <img class="w-10 h-10 object-cover rounded-full" src="${item.profile_img ? item.profile_img : item.personal_user.profile_img}">
    //                     <span class="uppercase text-sm">${item.pre_meeting.name}</span>
    //                 </label>`;
        //                 $("#workersArea").append(newWorker);
        //             })
        //         }
        //     });
        // });

        // $(document).ready(function() {
        //     var demandId = $('#demandId').val();
        //     $.ajax({
        //         type: "GET",
        //         url: "/operation/get/worked/before/users",
        //         data: {
        //             demandId: demandId
        //         },
        //         dataType: "JSON",
        //         success: function(response) {
        //             $('#oldWorkers').show();
        //         },
        //         error: function(response) {
        //             $('#oldWorkers').hide();
        //         }
        //     });
        // });

        $("#ratingStars i").click(function() {
            const ratingValue = $(this).attr("data-value");
            $("#ratingValue").val(ratingValue);

            $(this).prevAll().addBack().removeClass("fa-regular").addClass("fa-solid");

            $(this).nextAll().removeClass("fa-solid").addClass("fa-regular");
            getUsers();
        });

        // $(document).ready(function() {
        //     var demandId = $('#demandId').val();
        //     $.ajax({
        //         type: "GET",
        //         url: "/operation/demands/approvedPersonels/" + demandId,
        //         success: function(response) {
        //             response.forEach(function(item) {
        //                 console.log(item);
        //                 var disability_rate = null;
        //                 if (
        //                     item.personal_user &&
        //                     item.personal_user.working_status == 'Engelli' &&
        //                     item.personal_user.disability_rate
        //                 ) {
        //                     var disability_rate = item.personal_user.disability_rate;
        //                 }
        //                 if (disability_rate != null) {
        //                     var newWorker = `<label for="${item.pre_meeting.userId}" class="flex gap-4 items-center bg-teheme_third_black cursor-pointer p-3 rounded-lg w-full h-max workers">
    //                     <img class="w-10 h-10 object-cover rounded-full" src="${item.user ? item.user.profile_img : item.personal_user.profile_img}">
    //                     <span class="uppercase text-sm">${item.pre_meeting.name}</span>
    //                     <span class="text-xs select-none">% ${disability_rate} Engelli</span>
    //                     </label>`;
        //                 } else {
        //                     var newWorker = `<label for="${item.pre_meeting.userId}" class="flex gap-4 items-center bg-teheme_third_black cursor-pointer p-3 rounded-lg w-full h-max workers">
    //                     <img class="w-10 h-10 object-cover rounded-full" src="${item.user ? item.user.profile_img : item.personal_user.profile_img}">
    //                     <span class="uppercase text-sm">${item.pre_meeting.name}</span>
    //                     </label>`;
        //                 }
        //                 $("#workersArea").append(newWorker);
        //             })
        //         }
        //     });
        // });

        // function getUsers() {
        //     var city = $("#citySelect").val()
        //     var district = $("#districtSelect").val() ?? null
        //     var gender = $("#genderSelect").val() ?? null
        //     var category = '{{ $demand->category }}'
        //     var token = '{{ csrf_token() }}'
        //     var paymentTerm = $('#paymentTerm').val() ?? null
        //     var workingType = $('#workingType').val() ?? null
        //     // var min = $('#min_cost').val() ?? null
        //     // var max = $('#max_cost').val() ?? null
        //     var rate = $('#ratingValue').val() ?? 0
        //     var ticket_id = "{{ $demand->tickets->ticket_id }}"

        //     if (city) {
        //         var postdata = {
        //             city: city,
        //             district: district,
        //             category: category,
        //             _token: token,
        //             paymentTerm: paymentTerm,
        //             working_type: workingType,
        //             // min: min,
        //             // max: max,
        //             gender: gender,
        //             rate: rate,
        //             ticket_id: ticket_id
        //         }

        //         $("#siftAddForm").empty();
        //         $.ajax({
        //             url: '/operation/filtered/users',
        //             method: 'POST',
        //             data: postdata,
        //             success: function(response) {
        //                 console.log(response);
        //                 response.forEach(function(item) {
        //                     var disability_rate = null;
        //                     if (
        //                         item.personel_user &&
        //                         item.personel_user.working_status == 'Engelli' &&
        //                         item.personel_user.disability_rate
        //                     ) {
        //                         var disability_rate = item.personel_user.disability_rate;
        //                     }
        //                     if (item.hr_personel_user && item.hr_personel_user.sgk_entry == null) {
        //                         if ($("#workersArea").find(`[for="${item.id}"]`).length > 0) {
        //                             if (disability_rate != null) {
        //                                 var newInput =
        //                                     `<label for="${item.id}"
    //                                     class="flex gap-4 items-center bg-teheme_third_black cursor-pointer p-3 rounded-lg w-full h-max workers">
    //                                     <input type="checkbox" checked name="users[]" value="${item.id}" id="${item.id}"
    //                                     class="m-1 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 focus:ring-2">
    //                                     <img class="w-10 h-10 object-cover rounded-full userImg" src="${item.profile_img ? item.profile_img : item.personel_user.profile_img}">
    //                                     <span class="uppercase text-red-500 text-sm select-none">${item.full_name} </span>
    //                                     <span class="text-xs select-none">% ${disability_rate} Engelli</span>
    //                                     </label>`;
        //                             } else {
        //                                 `<label for="${item.id}"
    //                                     class="flex gap-4 items-center bg-teheme_third_black cursor-pointer p-3 rounded-lg w-full h-max workers">
    //                                     <input type="checkbox" checked name="users[]" value="${item.id}" id="${item.id}"
    //                                     class="m-1 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 focus:ring-2">
    //                                     <img class="w-10 h-10 object-cover rounded-full userImg" src="${item.profile_img ? item.profile_img : item.personel_user.profile_img}">
    //                                     <span class="uppercase text-red-500 text-sm select-none">${item.full_name} </span></label>`;
        //                             }
        //                         } else {
        //                             if (disability_rate != null) {
        //                                 var newInput =
        //                                     `<label for="${item.id}"
    //                                 class="flex gap-4 items-center bg-teheme_third_black cursor-pointer p-3 rounded-lg w-full h-max workers">
    //                                 <input type="checkbox" name="users[]" value="${item.id}" id="${item.id}"
    //                                 class="m-1 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 focus:ring-2">
    //                                 <img class="w-10 h-10 object-cover rounded-full userImg" src="${item.profile_img ? item.profile_img : item.personel_user.profile_img}">
    //                                 <span class="uppercase text-red-500 text-sm select-none">${item.full_name} </span>
    //                                 <span class="text-xs select-none">% ${disability_rate} Engelli</span>
    //                                 </label>`;
        //                             } else {
        //                                 var newInput =
        //                                     `<label for="${item.id}"
    //                                     class="flex gap-4 items-center bg-teheme_third_black cursor-pointer p-3 rounded-lg w-full h-max workers">
    //                                     <input type="checkbox" name="users[]" value="${item.id}" id="${item.id}"
    //                                     class="m-1 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 focus:ring-2">
    //                                     <img class="w-10 h-10 object-cover rounded-full userImg" src="${item.profile_img ? item.profile_img : item.personel_user.profile_img}">
    //                                     <span class="uppercase text-red-500 text-sm select-none">${item.full_name} </span></label>`;
        //                             }
        //                         }
        //                         $("#siftAddForm").append(newInput);
        //                     } else {
        //                         if ($("#workersArea").find(`[for="${item.id}"]`).length > 0) {
        //                             if (disability_rate != null) {
        //                                 var newInput = `<label for="${item.id}"
    //                                 class="flex gap-4 items-center bg-teheme_third_black  cursor-pointer p-3 rounded-lg w-full h-max workers">
    //                                 <input type="checkbox" checked name="users[]" value="${item.id}" id="${item.id}"
    //                                 class="m-1 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 focus:ring-2">
    //                                 <img class="w-10 h-10 object-cover rounded-full userImg" src="${item.profile_img ? item.profile_img : item.personel_user.profile_img}">
    //                                 <span class="uppercase text-sm select-none">${item.full_name} </span>
    //                                 <span class="text-xs select-none">% ${disability_rate} Engelli</span>
    //                                 </label>`;
        //                             } else {
        //                                 var newInput = `<label for="${item.id}"
    //                                 class="flex gap-4 items-center bg-teheme_third_black  cursor-pointer p-3 rounded-lg w-full h-max workers">
    //                                 <input type="checkbox" checked name="users[]" value="${item.id}" id="${item.id}"
    //                                 class="m-1 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 focus:ring-2">
    //                                 <img class="w-10 h-10 object-cover rounded-full userImg" src="${item.profile_img ? item.profile_img : item.personel_user.profile_img}">
    //                                 <span class="uppercase text-sm select-none">${item.full_name} </span>
    //                                 </label>`;
        //                             }
        //                         } else {
        //                             if (disability_rate != null) {
        //                                 var newInput = `<label for="${item.id}"
    //                                 class="flex gap-4 items-center bg-teheme_third_black  cursor-pointer p-3 rounded-lg w-full h-max workers">
    //                                 <input type="checkbox" name="users[]" value="${item.id}" id="${item.id}"
    //                                 class="m-1 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 focus:ring-2">
    //                                 <img class="w-10 h-10 object-cover rounded-full userImg" src="${item.profile_img ? item.profile_img : item.personel_user.profile_img}">
    //                                 <span class="uppercase text-sm select-none">${item.full_name} </span>
    //                                 <span class="text-xs select-none">% ${disability_rate} Engelli</span>
    //                                 </label>`;
        //                             } else {
        //                                 var newInput = `<label for="${item.id}"
    //                                 class="flex gap-4 items-center bg-teheme_third_black  cursor-pointer p-3 rounded-lg w-full h-max workers">
    //                                 <input type="checkbox" name="users[]" value="${item.id}" id="${item.id}"
    //                                 class="m-1 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 focus:ring-2">
    //                                 <img class="w-10 h-10 object-cover rounded-full userImg" src="${item.profile_img ? item.profile_img : item.personel_user.profile_img}">
    //                                 <span class="uppercase text-sm select-none">${item.full_name} </span>
    //                                 </label>`;
        //                             }
        //                         }
        //                         $("#siftAddForm").append(newInput);
        //                     }
        //                 });
        //             },
        //             error: function(response) {
        //                 console.log('error', response);
        //             }
        //         });
        //     } else {
        //         $("#siftAddForm").empty();
        //     }
        // }

        // $('#citySelect').on('change', function() {
        //     $('#districtSelect').empty();
        //     var city = $("#citySelect option:selected").text();
        //     $.ajax({
        //         url: '/operation/filtered/district/' + $('#citySelect')
        //             .val() + '/' + {{ $demand->id }} + '/',
        //         method: 'GET',
        //         success: function(response) {
        //             var d_select = $('#districtSelect');
        //             d_select.append('<option selected disabled>İlçe Seçin</option>');

        //             response.forEach(function(item) {
        //                 var yeniOption = $('<option>', {
        //                     text: item,
        //                     value: item
        //                 });
        //                 d_select.append(yeniOption);
        //             })
        //             getUsers();
        //         },
        //         error: function(response) {}
        //     });
        // });
        // $('#districtSelect').on('change', function() {
        //     $('#hrSelect').empty();
        //     $.ajax({
        //         url: 'randevu/api/get/hr',
        //         method: 'GET',
        //         data: {
        //             city: $("#citySelect").val(),
        //             district: $("#districtSelect").val()
        //         },
        //         success: function(response) {
        //             getUsers();
        //         },
        //         error: function(response) {
        //             console.log('error', response);
        //         }
        //     });
        // });
        // $('#paymentTerm').on('change', function() {
        //     $('#hrSelect').empty();
        //     getUsers();
        // });
        // $('#genderSelect').on('change', function() {
        //     $('#hrSelect').empty();
        //     getUsers();
        // });
        // $('#workingType').on('change', function() {
        //     $('#hrSelect').empty();
        //     getUsers();
        // });
        // $('#max_cost').on('change', function() {
        //     $('#hrSelect').empty();
        //     getUsers();
        // });
        // $('#min_cost').on('change', function() {
        //     $('#hrSelect').empty();
        //     getUsers();
        // });
        $("#siftAddForm").on('click', '.workers', function() {
            var checkbox = $(this).find('input[type="checkbox"]');

            if (checkbox.prop('checked')) {
                var userId = checkbox.val();
                var userName = $(this).find('.userFullName').text();
                var userImg = $(this).find('img').attr('src');

                var newInput = `<input type="hidden" name="users[]" value="${userId}">`;

                var newWorker = `<label for="${userId}" name="users[]" class="flex gap-4 items-center bg-teheme_third_black cursor-pointer p-3 rounded-lg w-full h-max workers">
                    <img class="w-10 h-10 object-cover rounded-full userImg" src="${userImg}">
                    <span class="uppercase text-sm select-none">${userName}</span>
                </label>`;

                $("#workersArea").append(newInput + newWorker);
            } else {
                var userId = checkbox.val();
                $("#workersArea").find(`input[value="${userId}"]`).remove();
                $("#workersArea").find(`label[for="${userId}"]`).remove();
            }
        });

        $('#favoriteButton').on('click', function() {
            $('#favoriteList').fadeIn();
        });

        $('.close-favorite-popup').on('click', function() {
            $('#favoriteList').fadeOut();
        });

        $('.addDemand').click(function() {
            var userId = $(this).val();

            var listItem = $(this).closest('li');

            var image = listItem.find('.userImage').val();
            var name = listItem.find('.userFullName').val();

            // Kontrol et: #workersArea içinde aynı userId'ye sahip bir öğe var mı?
            if ($("#workersArea").find(`[for="${userId}"]`).length === 0) {
                var newInput = `<input type="hidden" name="users[]" value="${userId}">`;

                var newWorker = `<label for="${userId}" class="flex gap-4 items-center bg-teheme_third_black cursor-pointer p-3 rounded-lg w-full h-max workers">
                        <img class="w-10 h-10 object-cover rounded-full" src="{{ Storage::url('${image}') }}">
                        <span class="uppercase text-sm">${name}</span>
                        </label>`;
                $("#workersArea").append(newInput + newWorker);

                $(this).text('Çıkar').removeClass('bg-blue-600').addClass('bg-red-600');
            } else {
                $("#workersArea").find(`[for="${userId}"]`).remove();
                $("#workersArea").find(`input[value="${userId}"]`).remove();
                $(this).text('Ekle').removeClass('bg-red-600').addClass('bg-blue-600');
            }
        });

        $('#moreInfo').click(function() {
            $('#information').fadeToggle();
        })

        $(document).on('click', function(e) {
            if (!$("#moreInfo").is(e.target) && $("#information").has(e.target).length === 0) {
                $("#information").fadeOut();
            }
        });

        // function resetFilter(filter) {
        //     $(filter).find('option:selected').each(function() {
        //         $(this).prop('selected', false);
        //     });
        //     $(filter).find('option:disabled').prop('selected', true);
        //     getUsers();
        // }

        $('[data-open]').click(function() {
            var userId = $(this).data('open');
            var full_name = $(this).data('name');
            $('#userFullName').text(full_name);
            $('#user_id').val(userId);
            $('#jobApprove').show();
        })

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

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

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

                $('#search').val(searchVal);
                $('#clearButton').show();
            }
        });

        $('#clearButton').click(function() {
            var newUrl = window.location.href.split('?')[0];
            $('#search').val('');
            window.history.replaceState({}, document.title, newUrl);
            location.reload();
        });


        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, ' '));
        }

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

            var paramName = queryString.split('=')[0];

            if (currentUrl.includes(paramName + '=')) {
                currentUrl = currentUrl.replace(new RegExp(paramName + '=[^&]+'), queryString);
            } else {
                var separator = currentUrl.includes('?') ? '&' : '?';
                currentUrl = currentUrl + separator + queryString;
            }

            window.location.href = currentUrl;
        }
    </script>
@endsection