@extends('layouts.app')
@section('urlContent')
    {!! view('components.breadcrumbs', [
        'b_items' => [
            'Çalışma Şartlarım' => '/department/working-conditions',
        ],
    ]) !!}
@endsection
@section('content')
    {{-- @dd($categories) --}}
    <div class="container-app">
        <div class="grid grid-cols-5 gap-10 h-[calc(100vh-140px)]">
            <ul class="bg-black/60 text-gray-300 rounded overflow-y-auto">
                @foreach ($workers as $item)
                    @php
                        $count = $categories->where('category_id', $item->id)->count();
                    @endphp
                    <li data-id="{{ $item->id }}"
                        class="px-4 py-3 hover:bg-theme_secondary_black cursor-pointer flex items-center workers">
                        <button class="inline-flex gap-4 justify-start w-full text-sm font-medium">
                            <img class="h-5 w-5" src="{{ $item->icon ? getCdnFile($item->icon) : asset('assets/icons/job.svg') }}">
                            {{ $item->title }}
                        </button>
                        @if ($count > 0)
                            <p>{{ $count }}</p>
                        @endif
                    </li>
                @endforeach
            </ul>
            <div class="col-span-4 grid grid-rows-6 bg-theme_secondary_black rounded p-4 h-full">
                <div class="row-span-5">
                    <div class="grid grid-cols-6 gap-x-4 pb-4 border-b border-theme_gray">
                        <h1 class="col-span-2 text-gray-300 font-semibold text-xl text-left inline-flex items-center">
                            Çalışma Şartlarınızı Ekleyiniz
                        </h1>
                        <div class="col-span-4 flex justify-end gap-4">
                            <form id="deleteConsitionsForm" method="POST" onsubmit="showLoading()"
                                action="{{ route('department.deleteConditions') }}">
                                @csrf
                                <input type="hidden" name="workerCategory" class="workerCategory">
                                <button class="button-3 bg-red-700">
                                    <i class="fa-solid fa-trash"></i>
                                    Hepsini Sil
                                </button>
                            </form>
                            <button class="button-3 active" onclick="changeMod('active')">
                                <i class="fa-solid fa-user"></i>
                                Çoklu Kullanıcı Seç
                            </button>
                            <button class="button-3 bg-gray-700 passive hidden" onclick="changeMod('passive')">
                                <i class="fa-solid fa-x mr-2"></i>
                                İşlemi Sonlandır
                            </button>
                            <button class="button-3" onclick="addNewTextarea()">
                                <i class="fa-solid fa-plus"></i>
                                Yeni Alan Ekle
                            </button>
                        </div>
                    </div>
                    <form id="workingConditionsForm" action="{{ route('department.workingConditions.create') }}" onsubmit="showLoading()"
                        method="POST" class="mt-4 h-[calc(100vh-380px)] overflow-y-auto">
                        @csrf
                        <input type="hidden" name="workers[]" id="workers">
                        <div id="textAreas" class="flex flex-col gap-4">
                        </div>
                    </form>
                </div>
                <div class="flex justify-end gap-4 items-end">
                    <button form="workingConditionsForm" class="button-3">
                        <i class="fa-solid fa-floppy-disk"></i>
                        Kaydet
                    </button>
                </div>
            </div>
        </div>
    </div>
    @if ($errors->any())
        @include('components.error-modal-second')
    @endif
    @if (session('success'))
        @include('components.success-modal')
    @endif
    @if (session('error'))
        <x-toast color="red-700">
            <x-slot name="message">
                {{ session('error') }}
            </x-slot>
            <x-slot name="icon">
                <i class="fa-solid fa-exclamation"></i>
            </x-slot>
        </x-toast>
    @endif
    <div id="toast1"
        class="w-full max-w-xs translate-x-0 bg-red-700 p-4 rounded-lg shadow fixed top-0 -right-[100%] z-10">
        <div class="flex items-center w-full text-white" role="alert">
            <div class="inline-flex items-center justify-center flex-shrink-0 w-8 h-8 text-black bg-white rounded-full">
                <i class="fa-solid fa-exclamation"></i>
                <span class="sr-only">Fire icon</span>
            </div>
            <div class="ms-3 text-sm font-normal">
                Kullanıcı Ekleme Modu Açıldı. Lütfen Sol Taraftaki Menüden Kullanıcı Tipi Seçiniz
            </div>
            <button id="closeToast1" type="button"
                class="ms-auto -mx-1.5 -my-1.5 rounded-lg p-1.5  inline-flex items-center justify-center h-8 w-8 dtext-gray-500 text-black bg-gray-200">
                <span class="sr-only">Close</span>
                <svg class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none"
                    viewBox="0 0 14 14">
                    <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                        d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6" />
                </svg>
            </button>
        </div>
    </div>
@endsection
@section('javascript')
    <script>
        $(document).ready(function() {
            localStorage.setItem('editorMode', 'passive');
            $('#workers').val('');

            $('.workers[data-id="9"]').click();
        });

        let selectedWorkers = JSON.parse($('#workers').val() || '[]');

        function changeMod(status) {
            localStorage.setItem('editorMode', status);

            var deleteForm = $('#deleteConsitionsForm');
            var formArea = $('#textAreas');

            formArea.empty();

            selectedWorkers = [];
            $('#workers').val(JSON.stringify(selectedWorkers));

            $('.workers').each(function(item) {
                $(this).removeClass('bg-green-700');
            });

            if (status == 'passive') {
                $('.passive').hide();
                $('.active').show();

                deleteForm.show();

                $('.workers').each(function(item) {
                    $(this).removeClass('bg-theme_secondary_black');
                });

                $('.workers[data-id="9"]').click();
            } else {
                $('.active').hide();
                $('.passive').show();
                toastActiveSec();

                deleteForm.hide();
            }
        }


        $('.workers').click(function() {
            var status = localStorage.getItem('editorMode');

            if (status == 'active') {
                var id = $(this).attr('data-id');
                var index = selectedWorkers.indexOf(id);

                if (index !== -1) {
                    // ID zaten var, çıkar
                    selectedWorkers.splice(index, 1);
                    console.log('ID çıkarıldı:', id);
                    $(this).removeClass('bg-theme_secondary_black');
                } else {
                    // ID yok, ekle
                    selectedWorkers.push(id);
                    console.log('ID eklendi:', id);
                    $(this).addClass('bg-theme_secondary_black');
                }

                $('#workers').val(JSON.stringify(selectedWorkers));
                console.log($('#workers').val());
            } else {
                var categoryId = $(this).attr('data-id');
                var csrfToken = $('meta[name="csrf-token"]').attr('content');
                var formArea = $('#textAreas');

                $('.workerCategory').val(categoryId);

                selectedWorkers = [];
                formArea.empty();

                selectedWorkers.push(categoryId);
                console.log('Category ID eklendi:', categoryId);

                $('#workers').val(JSON.stringify(selectedWorkers));
                console.log($('#workers').val());

                $.ajax({
                    method: "POST",
                    url: "/department/working-conditions/edit",
                    data: {
                        _token: csrfToken,
                        id: categoryId
                    },
                    success: function(response) {
                        response.data.forEach(item => {
                            if (item.working_condition != null) {
                                var textArea =
                                    `<textarea type="text" class="input-2 resize-none h-[100px]" name="condition[]">${item.working_condition}</textarea>`
                                formArea.append(textArea);
                            }
                        });
                    },
                    error: function(xhr, textStatus, errorThrown) {
                        var message = xhr.responseJSON.message;
                    }
                });
            }

        });


        var textareaIndex = 2;

        function addNewTextarea() {
            var textarea = document.createElement("textarea");

            textarea.id = "newTextarea_" + textareaIndex;

            textarea.name = "condition[]";

            textarea.classList.add("input-2", "resize-none", "h-[100px]");

            document.getElementById("textAreas").appendChild(textarea);

            textareaIndex++;
        }
        $(document).click(function() {
            if (localStorage.getItem("editorMode") == "passive") {
                $('.workers').click(function() {
                    $(this).addClass('bg-green-700');

                    $('.workers').not(this).removeClass('bg-green-700');
                });
            }
        });
    </script>
@endsection