@extends('layouts.app')
@php
    $id = request()->segment(3);
@endphp
@section('urlContent')
    {!! view('components.breadcrumbs', [
        'b_items' => [
            'Onay Bekleyen Talepler' => '/operation/waiting-approval',
            $demand?->tickets?->user->name . ' Talep Detayı' => '/operation/demands/' . $id,
        ],
    ]) !!}
@endsection
@section('content')
    <div class="w-full p-12 text-white">
        <div class="flex justify-end mb-6 gap-6">
            <input type="hidden" id="demandId" value="{{ $demand->id }}">

            <div class="relative">
                <button id="moreInfo"
                    class="inline-flex items-center px-2 py-1 rounded gap-2 font-medium text-white bg-blue-600">
                    <i class="fa-solid fa-info-circle"></i>
                    Talep Detayı
                </button>
                {{-- * Information Area --}}
                <div id="information" class="absolute hidden top-10 right-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')
                                <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
                    </div>
                </div>
            </div>
            <button id="favoriteButton"
                class="inline-flex items-center px-2 py-1 rounded gap-2 font-medium text-white bg-blue-600">
                <i class="fa-solid fa-user"></i>
                Atanan Personeller
            </button>
        </div>
        <div class="flex justify-between gap-6">
            {{-- filters --}}
            <div class="p-6 w-72 border border-teheme_third_gray rounded-xl">
                {{-- <h1 class="mb-2">
                    Filtreler
                </h1> --}}
                <div class="grid gap-3">
                    <div class="flex gap-2 items-center">
                        <button class="text-sm text-center hover:text-blue-500 text-gray-500"
                            onclick="resetFilter('#citySelect')">
                            <i class="fa-solid fa-rotate-left"></i>
                        </button>
                        <select id="citySelect" name="city" class="input-1 w-full text-sm">
                            <option value="0" selected disabled>İl Seçin</option>
                            @foreach ($cities as $city)
                                <option value="{{ $city }}">{{ $city }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="flex gap-2 items-center">
                        <button class="text-sm text-center hover:text-blue-500 text-gray-500"
                            onclick="resetFilter('#districtSelect')">
                            <i class="fa-solid fa-rotate-left"></i>
                        </button>
                        <select id="districtSelect" name="district" class="input-1 w-full text-sm">
                            <option selected disabled>İlçe Seçin</option>
                        </select>
                    </div>
                    <div class="flex gap-2 items-center">
                        <button class="text-sm text-center hover:text-blue-500 text-gray-500"
                            onclick="resetFilter('#paymentTerm')">
                            <i class="fa-solid fa-rotate-left"></i>
                        </button>
                        <select id="paymentTerm" name="paymentTerm" class="input-1 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">
                        <button class="text-sm text-center hover:text-blue-500 text-gray-500"
                            onclick="resetFilter('#genderSelect')">
                            <i class="fa-solid fa-rotate-left"></i>
                        </button>
                        <select id="genderSelect" name="gender" class="input-1 w-full text-sm">
                            <option selected disabled>Cinsiyet Seçiniz</option>
                            <option value="Kadın">Kadın</option>
                            <option value="Erkek">Erkek</option>
                        </select>
                    </div>
                    <div class="flex gap-2 items-center">
                        <button class="text-sm text-center hover:text-blue-500 text-gray-500"
                            onclick="resetFilter('#workingType')">
                            <i class="fa-solid fa-rotate-left"></i>
                        </button>
                        <select id="workingType" name="working_type" class="input-1 w-full text-sm">
                            <option selected disabled>Çalışma Durumu Seçiniz</option>
                            <option value="hourly">Saatlikçi</option>
                            <option value="daily">Günlükçü</option>
                            <option value="wage">Maaşlı</option>
                        </select>
                    </div>
                    {{-- <div>
                        <div class="mb-2 text-center text-sm text-gray-400">
                            Fiyat Araligi
                        </div>
                        <div class="flex gap-2">
                            <input id="min_cost" type="text" name="min_cost" class="text-sm input-1 w-1/2"
                                placeholder="min">
                            <input id="max_cost" type="text" name="max_cost" class="text-sm input-1 w-1/2"
                                placeholder="max">
                        </div>
                    </div> --}}
                    <div class="flex justify-center">
                        <input type="hidden" name="rate" id="ratingValue" />
                        <div id="ratingStars" class="flex gap-1">
                            <i class="fa-regular fa-star cursor-pointer text-yellow-500 text-2xl" data-value="1"></i>
                            <i class="fa-regular fa-star cursor-pointer text-yellow-500 text-2xl" data-value="2"></i>
                            <i class="fa-regular fa-star cursor-pointer text-yellow-500 text-2xl" data-value="3"></i>
                            <i class="fa-regular fa-star cursor-pointer text-yellow-500 text-2xl" data-value="4"></i>
                            <i class="fa-regular fa-star cursor-pointer text-yellow-500 text-2xl" data-value="5"></i>
                        </div>
                    </div>

                    <div class="flex gap-2 justify-center items-center">
                        <span class="inline-flex w-2 h-2 bg-red-500 border-white rounded-full"></span>
                        <p class="capitalize text-xs">Sgk girişi yapılmamış</p>
                    </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">

                    </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">

                    </div>
                    <button type="submit" class="button-2 mt-3">
                        Kaydet
                    </button>
                </form>
            </div>
        </div>
    </div>
    @include('components.operation.favoritePersonels')
    @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>
        $("#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) {
                        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('span').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();
        }
    </script>
@endsection