@extends('layouts.app')
@section('urlContent')
    @php
        $userId = request()->segment(4);
    @endphp
    {!! view('components.breadcrumbs', [
        'b_items' => [
            'Kullanıcı İşlemleri' => '/root/list/user',
            'Kullanıcı Düzenle' => '/root/edit/user/' . $userId,
        ],
    ]) !!}
@endsection
@section('content')
    <div class="container-app">
        <div
            class="p-4 overflow-y-auto h-[calc(100vh-150px)] sm:p-8 shadow bg-theme_secondary_black sm:rounded-lg grid grid-cols-1">
            <div class="flex justify-between">
                <div class="flex justify-center gap-6">
                    <img class="w-14 h-14 rounded-full object-cover showImage cursor-pointer"
                        src="{{ $user?->profile_img
                            ? getCdnFile($user?->profile_img)
                            : ($user?->personelUser && $user?->personelUser->profile_img
                                ? getCdnFile($user?->personelUser->profile_img)
                                : getDefaultImage()) }}">

                    <div>
                        <h2 class="text-lg font-bold text-gray-300 capitalize">
                            {{ $user->full_name }} Kullanıcısını Düzenleyin
                        </h2>
                        <p class="mt-1 text-sm text-gray-400">
                            Seçtiğiniz Kullanıcının Kişisel Bilgilerini Düzenleyiniz.
                        </p>
                    </div>
                </div>
                <div class="flex gap-4">
                    @if ($user->roles[0]->name == 'Operasyon')
                        @include('components.root.operationUserInfoPopup')
                        <div>
                            <button class="operationInfoButton">
                                <div class="flex gap-2 items-center text-white bg-theme_black px-2 py-1 rounded">
                                    <i class="fa-solid fa-circle-question"></i>
                                    <p>Operasyon Bilgileri</p>
                                </div>
                            </button>
                        </div>
                    @endif
                    @if ($user->is_active == true)
                        <form method="POST" action="{{ route('root.changeUserIsActive', [$user->id]) }}"
                            onsubmit="showLoading()">
                            @csrf
                            <button>
                                <div class="flex gap-2 items-center text-white bg-red-600 px-2 py-1 rounded">
                                    <i class="fa-solid fa-user-xmark"></i>
                                    <p>Pasife Al</p>
                                </div>
                            </button>
                        </form>
                    @else
                        <form method="POST" action="{{ route('root.changeUserIsActive', [$user->id]) }}"
                            onsubmit="showLoading()">
                            @csrf
                            <button>
                                <div class="flex gap-2 items-center text-white bg-green-600 px-2 py-1 rounded">
                                    <i class="fa-solid fa-user-check"></i>
                                    <p>Aktife Al</p>
                                </div>
                            </button>
                        </form>
                    @endif
                </div>
            </div>

            <form method="POST" id="editForm" action="{{ route('root.editUser', [$user->id]) }}" class="mt-6 space-y-6"
                onsubmit="showLoading()" enctype="multipart/form-data">
                @csrf
                <div id="section_1" class="flex flex-col">

                    <div class="flex lg:flex-row flex-col gap-6">
                        <div class="py-2 flex flex-col lg:w-1/2">
                            <span class="mb-2 text-lg text-theme_white">Ad</span>
                            <input type="text" class="input-1" id="size" name="name"
                                value="{{ $user->name }}" />
                        </div>
                        <div class="py-2 flex flex-col lg:w-1/2">
                            <span class="mb-2 text-lg text-theme_white">Soyad</span>
                            <input type="text" class="input-1" id="kilo" name="surname"
                                value="{{ $user->surname }}" />
                        </div>
                    </div>

                    <div class="flex md:flex-row flex-col gap-6">
                        <div class="py-2 flex flex-col md:w-1/2">
                            <span class="mb-2 text-md text-theme_white">İl</span>
                            <select id="city" name="city" class="input-1">
                                <option selected disabled>İl Seçin</option>
                            </select>
                        </div>
                        <div class="py-2 flex flex-col md:w-1/2">
                            <span class="mb-2 text-md text-theme_white">İlçe</span>
                            <select id="district" name="district" class="input-1">
                                <option selected disabled>İlçe Seçin</option>
                            </select>
                        </div>
                    </div>

                    <div class="flex lg:flex-row flex-col gap-6">
                        <div class="py-2 flex flex-col lg:w-1/2">
                            <span class="mb-2 text-lg text-theme_white">Telefon</span>
                            <input type="tel" class="input-1" name="tel" value="{{ $user->tel }}" />
                        </div>
                        <div class="py-2 flex flex-col lg:w-1/2">
                            <span class="mb-2 text-lg text-theme_white">Email</span>
                            <input type="text" class="input-1" name="email" value="{{ $user->email }}" />
                        </div>
                    </div>

                    <div class="flex lg:flex-row flex-col gap-6">
                        <div class="py-2 flex flex-col lg:w-1/2">
                            <span class="mb-2 text-lg text-theme_white">Şifre</span>
                            <input type="password" class="input-1" name="password" />
                        </div>
                        <div class="py-2 flex flex-col lg:w-1/2">
                            <span class="mb-2 text-lg text-theme_white">Profil Resmi</span>
                            <input class="file-input mt-0 input-1" type="file" name="profile_img">
                        </div>
                    </div>

                    <div class="flex lg:flex-row flex-col gap-6">
                        <div class="py-2 flex flex-col lg:w-1/2">
                            <span class="mb-2 text-lg text-theme_white">Rol</span>
                            <input class="input-1 cursor-not-allowed" type="text" name="role" readonly
                                value="{{ $user->roles[0]->title }}">
                        </div>
                        @if ($user->hasRole('Hr'))
                            <div id="hr_section" class="lg:w-1/2">
                                <div class="py-2 flex flex-col lg:w-1/2">
                                    <span class="mb-2 text-lg text-theme_white">İnsan Kaynakları Rolü Seçiniz</span>
                                    <div class="flex gap-3 items-center">
                                        <input type="checkbox" @if ($user->can('ik_ise_alim')) checked @endif
                                            name="permissions[]" value="ik_ise_alim"
                                            class="rounded accent-theme_secondary_gray">
                                        <span class="text-gray-300 font-normal capitalize">
                                            işe alım
                                        </span>
                                    </div>
                                    <div class="flex gap-3 items-center">
                                        <input type="checkbox" @if ($user->can('ik_bordro')) checked @endif
                                            name="permissions[]" value="ik_bordro"
                                            class="rounded accent-theme_secondary_gray">
                                        <span class="text-gray-300 font-normal capitalize">
                                            bordro
                                        </span>
                                    </div>
                                    <div class="flex gap-3 items-center">
                                        <input type="checkbox" @if ($user->can('call_support')) checked @endif
                                            name="permissions[]" value="call_support"
                                            class="rounded accent-theme_secondary_gray">
                                        <span class="text-gray-300 font-normal capitalize">
                                            Ön Kayıt
                                        </span>
                                    </div>
                                </div>
                            </div>
                            <!-- burasi sadece hr cikicak  -->
                            <div id="" class="lg:w-1/2">
                                <div class="py-2 flex flex-col">
                                    <span class="mb-2 text-lg text-theme_white">Kita Seçiniz</span>
                                    <select name="continent" id="accpuntingSelect" class="input-1 block w-full py-2">
                                        <option {{ $user->continent?->continent == 'asya' ? 'selected' : '' }}
                                            value="asya">Asya Kitasi</option>
                                        <option {{ $user->continent?->continent == 'avrupa' ? 'selected' : '' }}
                                            value="avrupa">Avrupa Kitasi</option>
                                    </select>
                                </div>
                            </div>
                        @endif
                        @if ($user->hasRole('Operasyon'))
                            @php
                                $hrUsers = json_decode($user->operationsHr->all_hr_ids) ?? [];
                            @endphp
                            <div id="operation_section" class="lg:w-1/2">
                                <div class="py-2 flex flex-col">
                                    <span class="mb-2 text-lg text-theme_white">İnsan Kaynakları Seçiniz</span>
                                    <select name="hr_id[]" id="hrSelect" class="input-1 block w-full py-2" multiple>
                                        @foreach ($hr_purchase as $item)
                                            <option value="{{ $item->id }}">{{ $item->full_name }}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>

                            @php
                                $accountingUsers = \App\Models\User::whereHas('roles', function ($query) {
                                    $query->where('name', 'Muhasebe');
                                })->get();
                                $selectedAccounting = $user->operationAccountingUser->id ?? null;
                            @endphp
                            <!-- burasi sadece operasyonda cikicak  -->
                            <div id="operation_section" class="lg:w-1/2">
                                <div class="py-2 flex flex-col">
                                    <span class="mb-2 text-lg text-theme_white">Muhasebeci Seçiniz</span>
                                    <select name="accounting" id="accpuntingSelect" class="input-1 block w-full py-2">
                                        @foreach ($accountingUsers as $item)
                                            <option
                                                {{ $selectedAccounting != null || $selectedAccounting == $item->id ? 'selected' : '' }}
                                                value="{{ $item->id }}">{{ $item->full_name }}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                        @endif
                        @if ($user->hasRole('isg'))
                            <div id="hr_section" class="lg:w-1/2">
                                <div class="py-2 flex flex-col lg:w-1/2">
                                    <span class="mb-2 text-lg text-theme_white">İSG Rolü Seçiniz</span>
                                    <div class="flex gap-3 items-center">
                                        <input type="radio" undefined name="permissions" value="upload_isg_company"
                                            class="rounded-full accent-theme_secondary_gray">
                                        <span class="text-gray-300 font-normal capitalize">
                                            Evrakları Şirket Yüklesin
                                        </span>
                                    </div>
                                    <div class="flex gap-3 items-center">
                                        <input type="radio" undefined name="permissions" value="upload_isg_herself"
                                            class="rounded-full accent-theme_secondary_gray">
                                        <span class="text-gray-300 font-normal capitalize">
                                            Evrakları Kendisi Yüklesin
                                        </span>
                                    </div>
                                </div>
                            </div>
                        @endif
                        @if ($user->hasRole('Muhasebe'))
                            <div id="hr_section" class="lg:w-1/2">
                                <div class="py-2 flex flex-col lg:w-1/2">
                                    <span class="mb-2 text-lg text-theme_white">Muhasebe Tipi Seçiniz</span>
                                    <div class="flex gap-3 items-center">
                                        <input type="radio" undefined name="accounting_user_type" value="1"
                                            class="rounded-full accent-theme_secondary_gray" @if($user->accountingUserType && $user->accountingUserType->accounting_type == 1) @checked(true) @endif>
                                        <span class="text-gray-300 font-normal capitalize">
                                            Baş Muhasebe
                                        </span>
                                    </div>
                                    <div class="flex gap-3 items-center">
                                        <input type="radio" undefined name="accounting_user_type" value="2"
                                            class="rounded-full accent-theme_secondary_gray" @if($user->accountingUserType && $user->accountingUserType->accounting_type == 2) @checked(true) @endif>
                                        <span class="text-gray-300 font-normal capitalize">
                                            Normal
                                        </span>
                                    </div>
                                </div>
                            </div>
                        @endif
                    </div>
                </div>
            </form>

            <div class="w-full flex items-end justify-end mt-4">
                <button type="submit" form="editForm"
                    class="text-gray-300 px-4 inline-flex justify-center items-center gap-3 border rounded-[10px] hover:bg-theme_gray transition-all delay-100 hover:text-theme_black font-bold h-[42px]">
                    Kaydet
                    <i class="fa-solid fa-circle-right"></i>
                </button>
            </div>
        </div>
    </div>
    @include('components.showImage')
    @if ($errors->any())
        @include('components.error-modal-second')
    @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
    @if (session('success'))
        <x-toast color="green-700">
            <x-slot name="message">
                {{ session('success') }}
            </x-slot>
            <x-slot name="icon">
                <i class="fa-solid fa-check"></i>
            </x-slot>
        </x-toast>
    @endif
@endsection
@section('javascript')
    <script>
        var office = @json($user->relatedHeadOfficeToOperation);
        var branch = @json($user->relatedBranchToOperation);
        var personel = @json($user->relatedPremeetingsToOperation);
        var countedData = $('#countedDatas');
        $(document).ready(function() {

            var cityData = @json($user->city);
            var districtData = @json($user->district);
            // var role = @json($user->roles[0]->name);
            // var roleSelect = $('.roleSelect');

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

                        select.append(option);

                        $.map(option, function(cityDataOption, indexOrKey) {
                            if (cityDataOption.value === cityData) {
                                cityDataOption.selected = true;
                            }
                        });
                    });
                },
                error: function(error) {
                    console.log(error);
                }
            });
            $.ajax({
                url: 'https://turkiyeapi.herokuapp.com/api/v1/provinces?name=' +
                    cityData,
                method: 'GET',
                success: function(response) {
                    var d_select = $('#district');

                    for (var i = 0; i < response.data[0].districts
                        .length; i++) {
                        var d_option = $('<option>', {
                            value: response.data[0].districts[i]
                                .name,
                            text: response.data[0].districts[i]
                                .name
                        });
                        d_select.append(d_option);
                        $.map(d_option, function(districtDataOption, indexOrKey) {
                            if (districtDataOption.value === districtData) {
                                districtDataOption.selected = true;
                            }
                        });
                    };
                },
                error: function(response) {
                    console.log('error', response);
                }
            });

            // roleSelect.val(role);
            countedData.text(office.length);

            // var operationSection = $('#operation_section');
            // var hrSection = $('#hr_section');

            // if (role == 'Operasyon') {
            //     operationSection.show();
            // }
            // if (role == 'Hr') {
            //     hrSection.show();
            // }
        });

        $('#city').on('change', function() {
            updateDistricts();
        });

        function updateDistricts() {
            var selectedCity = $('#city').val();
            $('#district').empty();

            $.ajax({
                url: 'https://turkiyeapi.herokuapp.com/api/v1/provinces?name=' + selectedCity,
                method: 'GET',
                success: function(response) {
                    for (var i = 0; i < response.data[0].districts.length; i++) {
                        var d_option = $('<option>', {
                            value: response.data[0].districts[i].name,
                            text: response.data[0].districts[i].name
                        });
                        $('#district').append(d_option);
                    }
                },
                error: function(response) {
                    console.log('error', response);
                }
            });
        }

        $('.operationInfoButton').click(function() {
            $('.operationInfo').fadeIn('slow');
        });

        $('.close-operation-info-popup').click(function() {
            $('.operationInfo').fadeOut('slow');
        });

        // FILTERS FOR OPERATION USERS
        // ACTIVE OR PASSIVE
        // OFFICE
        $('.filter-office').click(function() {
            var status = $(this).data('status');
            filterOfficeByStatus(status);
        });

        function filterOfficeByStatus(status) {
            $('.officeRow').each(function() {
                var rowData = $(this).data('status');
                if (status === 2 || rowData === status) {
                    $(this).show();
                } else {
                    $(this).hide();
                }
            });
            var visibleRows = document.querySelectorAll('.officeRow[style=""]');
            countedData.text(visibleRows.length);
        }

        // ACTIVE OR PASSIVE
        // BRANCH
        $('.filter-branch').click(function() {
            var status = $(this).data('status');
            filterBranchByStatus(status);
        });

        function filterBranchByStatus(status) {
            $('.branchRow').each(function() {
                var rowData = $(this).data('status');
                if (status === 2 || rowData === status) {
                    $(this).show();
                } else {
                    $(this).hide();
                }
            });
            var visibleRows = document.querySelectorAll('.branchRow[style=""]');
            countedData.text(visibleRows.length);
        }
        // ACTIVE OR PASSIVE
        // PERSONEL
        $('.filter-personel').click(function() {
            var status = $(this).data('status');
            filterPersonelByStatus(status);
        });

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

        $('#officeStatusButton').click(function() {
            $('#officeStatusFilters').fadeToggle('fast');
        });

        $('#branchStatusButton').click(function() {
            $('#branchStatusFilters').fadeToggle('fast');
        });

        $('#personelStatusButton').click(function() {
            $('#personelStatusFilters').fadeToggle('fast');
        });

        $('#jobButton').click(function() {
            $('#jobFilter').fadeToggle('fast');
        });

        $('#paymentButton').click(function() {
            $('#paymentFilter').fadeToggle('fast');
        });

        $('#sgkButton').click(function() {
            $('#sgkFilter').fadeToggle('fast');
        });

        $('#completeButton').click(function() {
            $('#completeFilter').fadeToggle('fast');
        });

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

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

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

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

        // SGK GIRISINE GORE FILTRELEYEN KOD
        $('.filter-sgk').click(function() {
            var sgk = $(this).data('sgk');
            filterTableBySgk(sgk);
        });

        function filterTableBySgk(sgk) {
            $('.personelRow').each(function() {
                var rowData = $(this).data('sgk');
                if (sgk === 2 || rowData === sgk) {
                    $(this).show();
                } else {
                    $(this).hide();
                }
            });
            var visibleRows = document.querySelectorAll('.personelRow[style=""]');
            countedData.text(visibleRows.length);
        }

        // KAYIT DURUMUNA GORE FILTRELEYEN KOD
        $('.filter-complete').click(function() {
            var complete = $(this).data('complete');
            filterTableByComplete(complete);
        });

        function filterTableByComplete(complete) {
            $('.personelRow').each(function() {
                var rowData = $(this).data('complete');
                if (complete === 2 || rowData === complete) {
                    $(this).show();
                } else {
                    $(this).hide();
                }
            });
            var visibleRows = document.querySelectorAll('.personelRow[style=""]');
            countedData.text(visibleRows.length);
        }

        $('#officeButton').click(function() {
            $('#branchs').hide();
            $('#personels').hide();
            $('#offices').show();
            $('#branchButton').removeClass('bg-blue-800').addClass('bg-blue-600');
            $('#personelButton').removeClass('bg-blue-800').addClass('bg-blue-600');
            $(this).addClass('bg-blue-800').removeClass('bg-blue-600');
            countedData.text(office.length);
        });
        $('#branchButton').click(function() {
            $('#personels').hide();
            $('#offices').hide();
            $('#branchs').show();
            $('#officeButton').removeClass('bg-blue-800').addClass('bg-blue-600');
            $('#personelButton').removeClass('bg-blue-800').addClass('bg-blue-600');
            $(this).addClass('bg-blue-800').removeClass('bg-blue-600');
            countedData.text(branch.length);
        });
        $('#personelButton').click(function() {
            $('#offices').hide();
            $('#branchs').hide();
            $('#personels').show();
            $('#branchButton').removeClass('bg-blue-800').addClass('bg-blue-600');
            $('#officeButton').removeClass('bg-blue-800').addClass('bg-blue-600');
            $(this).addClass('bg-blue-800').removeClass('bg-blue-600');
            countedData.text(personel.length);
        });

        $('#hrSelect').multipleSelect({
            formatSelectAll: function() {
                return 'Hepsini Seç'
            },
            formatAllSelected: function() {
                return 'Hepsi Seçildi'
            },
            filter: true,
        })

        $(document).ready(function() {
            var user = @json($user);

            if (user.roles[0].name == 'Operasyon') {
                var allHr = JSON.parse(user.operations_hr.all_hr_ids);
                $('#hrSelect').multipleSelect('setSelects', allHr.map(item => item ? item : ''));
            }
        });

        // FOR OPERATION OR HR ROLE
        // $('#role').on('change', function() {
        //     if ($(this).val() == 'Hr') {
        //         $('#hr_section').show();
        //     } else {
        //         $('#hr_section').hide();
        //     }

        //     if ($(this).val() == 'Operasyon') {
        //         $('#operation_section').show();
        //     } else {
        //         $('#operation_section').hide();
        //     }
        // });

        // $('#hr_role').on('change', function() {
        //     var role = $(this).val();
        //     var bordro = @json($hr_bordro);
        //     var purchase = @json($hr_purchase);
        //     var select = $('#hr_personels');

        //     select.empty();
        //     if (role == 'ik_bordro') {
        //         if (bordro.length > 0) {
        //             bordro.forEach(function(item) {
        //                 var option = $('<option>', {
        //                     value: item.id,
        //                     text: item.full_name,
        //                 });

        //                 select.append(option);
        //             })
        //         } else {
        //             var option = $('<option>', {
        //                 value: '',
        //                 text: 'Hiç Kullanıcı Bulunamadı',
        //                 selected: true,
        //                 disabled: true,
        //             });

        //             select.append(option);
        //         }
        //     } else if (role == 'ik_ise_alim') {
        //         if (purchase.length > 0) {
        //             purchase.forEach(function(item) {
        //                 var option = $('<option>', {
        //                     value: item.id,
        //                     text: item.full_name,
        //                 });

        //                 select.append(option);
        //             })
        //         } else {
        //             var option = $('<option>', {
        //                 value: '',
        //                 text: 'Hiç Kullanıcı Bulunamadı',
        //                 selected: true,
        //                 disabled: true,
        //             });

        //             select.append(option);
        //         }
        //     }
        // });
    </script>
@endsection