@extends('layouts.app')
@section('urlContent')
    {!! view('components.breadcrumbs', [
        'b_items' => [
            'Personel İstekleri' => '/operation/worker-requests',
            'İstek Düzenle' => '/operation/create/worker-request',
        ],
    ]) !!}
@endsection
@section('content')
    <div class="container-app">
        @if (count($workerRequest->responses) > 0)
            <div class="grid gap-y-2">
                @foreach ($workerRequest->responses as $item)
                    <label class="flex items-center gap-4 cursor-pointer p-4 bg-theme_secondary_black rounded-lg">
                        <div class="flex items-center gap-4 ">
                            <img class="w-14 h-14 rounded-full object-cover showImage cursor-pointer"
                                src="{{ $item->assignedUser->profile_img ? getCdnFile($item->assignedUser->profile_img) : getCdnFile($item->assignedUser->personelUser?->profile_img) }}">
                            <div class="flex items-center">
                                <p class="font-medium text-base text-gray-300 select-none">
                                    {{ $item->assignedUser->full_name }}</p>
                            </div>
                        </div>
                    </label>
                @endforeach
            </div>
        @else
            <form id="createForm" method="POST"
                action="{{ route('operation.updateWorkerRequest', ['workerRequest' => $workerRequest->id]) }}">
                @csrf
                <div class="grid grid-cols-2 gap-6 mt-4 px-32">
                    <input class="input-2" type="text" name="quantity" placeholder="Personel sayısı"
                        value="{{ $workerRequest->quantity }}">

                    <select class="input-2" name="role_id">
                        @foreach ($roles as $role)
                            <option @if ($workerRequest->role_id == $role->id) selected @endif value="{{ $role->id }}">
                                {{ $role->title }}
                            </option>
                        @endforeach
                    </select>

                    <select class="input-2" name="city" id="city">
                    </select>

                    <input type="hidden" name="district" id="districtValues">
                    <select
                        class="bg-theme_secondary_black rounded-[10px] border border-[#6b7280] w-full inline-flex items-center"
                        multiple="multiple" id="district">
                    </select>

                    <input class="input-2" type="text" name="age" placeholder="Yaş"
                        value="{{ $workerRequest->age }}">

                    <select class="input-2" name="working_type">
                        <option selected disabled>Çalışma tipi</option>
                        <option @if ($workerRequest->working_type == 'wage') selected @endif value="wage">Maaşlı</option>
                        <option @if ($workerRequest->working_type == 'daily') selected @endif value="daily">Part time</option>
                    </select>

                    <select class="input-2" name="payment_term">
                        <option selected disabled>Ödeme vadesi</option>
                        <option @if ($workerRequest->payment_term == 'daily') selected @endif value="daily">Günlük</option>
                        <option @if ($workerRequest->payment_term == 'weekly') selected @endif value="weekly">Haftalık</option>
                        <option @if ($workerRequest->payment_term == 'twoWeekly') selected @endif value="twoWeekly">15 Günlük</option>
                        <option @if ($workerRequest->payment_term == 'monthly') selected @endif value="monthly">Aylık</option>
                    </select>

                    <input class="input-2" name="description" placeholder="Açıklama"
                        value="{{ $workerRequest->description }}">

                    <div class="col-span-2 flex justify-end">
                        <button type="button" id="save" class="button-3">
                            <i class="fa-solid fa-save"></i>
                            Kaydet
                        </button>
                    </div>
                </div>
            </form>
        @endif
    </div>
    @if (session('error'))
        @include('components.error-modal')
    @endif
    @if (session('success'))
        @include('components.success-modal')
    @endif
@endsection
@section('javascript')
    <script>
        $(document).ready(function() {
            let citySelect = $('#city');
            let districtSelect = $('#district');
            let districtData = [];
            let workerRequest = @json($workerRequest);


            // İlk yüklemede çoklu seçim öğesini oluştur
            districtSelect.multipleSelect({
                'filter': true,
                'selectAll': false,
                'placeholder': 'İlçe Seçin',
                'name': 'district[]',
            });

            $.ajax({
                url: 'https://turkiyeapi.herokuapp.com/api/v1/provinces',
                method: 'GET',
                success: function(response) {
                    response.data.forEach(function(item) {
                        var option = $('<option>', {
                            value: item.name,
                            text: item.name
                        });

                        citySelect.append(option);

                        $.map(option, function(cityOption, indexOrKey) {
                            if (workerRequest.city === cityOption.value) {
                                cityOption.selected = true;
                            }
                        });
                    });

                },
                error: function(response) {
                    console.log('error', response);
                }
            });
            $.ajax({
                url: 'https://turkiyeapi.herokuapp.com/api/v1/provinces?name=' +
                    workerRequest.city,
                method: 'GET',
                success: function(response) {
                    districtData = response.data[0].districts;
                    updateDistrictSelect(districtData);

                    var selectedDistricts = JSON.parse(workerRequest.district);

                    $('#district').multipleSelect('setSelects', selectedDistricts);
                },
                error: function(response) {
                    console.log('error', response);
                }
            });

            citySelect.on('change', function() {
                districtSelect.empty();
                var city = $("#city option:selected").text();
                $.ajax({
                    url: 'https://turkiyeapi.herokuapp.com/api/v1/provinces?name=' +
                        city,
                    method: 'GET',
                    success: function(response) {
                        districtData = response.data[0].districts;
                        updateDistrictSelect(districtData);
                    },
                    error: function(response) {
                        console.log('error', response);
                    }
                });
            });


            function updateDistrictSelect(data) {
                districtSelect.empty();
                districtSelect.multipleSelect('destroy');
                districtSelect.multipleSelect({
                    'filter': true,
                    'selectAll': false,
                    'name': 'district[]',
                    'data': data.map(item => ({
                        text: item.name,
                        value: item.name
                    }))
                });
            }

            $('#save').click(function() {
                var selectedDistricts = $('#district').multipleSelect('getSelects');
                console.log(selectedDistricts);
                $('#districtValues').val(JSON.stringify(selectedDistricts));

                $('#createForm').submit();
            })

        });
    </script>
@endsection