@extends('layouts.app')
@section('urlContent')
    {!! view('components.breadcrumbs', [
        'b_items' => [
            'Kullanıcı İşlemleri' => '/root/list/user',
            'Kullanıcı Oluştur' => '/root/create/user',
        ],
    ]) !!}
@endsection
@section('content')
    <div class="container-app">
        <div class="w-full sm:px-6 lg:px-8 xl:px-10 3xl:px-32 space-y-6">
            <div class="p-4 sm:p-8 shadow bg-theme_secondary_black sm:rounded-lg">
                <div class="w-full">
                    <div>
                        <h2 class="text-lg font-bold text-gray-300">
                            Kayıt İşlemini Tamamlayın
                        </h2>
                        <p class="mt-1 text-sm text-gray-400">
                            Kişisel Bilgilerinizi Girerek Kaydınızı Tamamlayınız.
                        </p>
                    </div>

                    <form method="POST" action="{{ route('root.createUser') }}" 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="{{ old('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="{{ old('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 value="{{ old('city') }}">İ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 value="{{ old('district') }}">İ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="{{ old('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="{{ old('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 Seçiniz</span>
                                    <select id="role" name="role" class="input-1">
                                        <option selected disabled>Rol Seçiniz</option>
                                        <option value="Hr" {{ old('role') == 'Hr' ? 'selected' : '' }}>
                                            İnsan Kaynakları
                                        </option>
                                        <option value="Operasyon" {{ old('role') == 'Operasyon' ? 'selected' : '' }}>
                                            Operasyoncu
                                        </option>
                                        <option value="Muhasebe" {{ old('role') == 'Muhasebe' ? 'selected' : '' }}>
                                            Muhasebeci
                                        </option>
                                        <option value="Randevu" {{ old('role') == 'Randevu' ? 'selected' : '' }}>
                                            Ön Kayıt
                                        </option>
                                        <option value="Sales_marketing"
                                            {{ old('role') == 'Sales_marketing' ? 'selected' : '' }}>
                                            Satış & Pazarlama
                                        </option>
                                        <option value="isg" {{ old('role') == 'isg' ? 'selected' : '' }}>
                                            İş Sağlığı ve Güvenliği
                                        </option>
                                    </select>
                                </div>
                                <div id="hr_section" class="hidden 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" 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" 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" 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>
                                <div id="operation_section" class="hidden 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>

                                <!-- burasi sadece operasyonda cikicak  -->
                                <div id="selectAccountingUser" class="lg:w-1/2 hidden">
                                    <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 value="{{ $item->id }}">{{ $item->full_name }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>

                                <!-- burasi sadece hr cikicak  -->
                                <div id="selectHrUserContinents" class="lg:w-1/2 hidden">
                                    <div class="py-2 flex flex-col">
                                        <span class="mb-2 text-lg text-theme_white">Kita Seçiniz</span>
                                        <select name="continent" class="input-1 block w-full py-2">
                                            <option value="asya">Asya Kitasi</option>
                                            <option value="avrupa">Avrupa Kitasi</option>
                                        </select>
                                    </div>
                                </div>

                                <div id="selectAccountingUserType" class="lg:w-1/2 hidden">
                                    <div class="py-2 flex flex-col">
                                        <span class="mb-2 text-lg text-theme_white">Muhasebeci Tipi Seçiniz</span>
                                        <div class="flex gap-x-2 text-theme_white">
                                            <div class="flex items-center gap-x-1">
                                                <input type="radio" name="accounting_user_type" value="1">
                                                <p>Baş Muhasebe</p>
                                            </div>

                                            <div class="flex items-center gap-x-1">
                                                <input type="radio" name="accounting_user_type" value="2">
                                                <p>Normal</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div id="isg_section" class="hidden 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" 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" 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>
                        </div>
                        <div class="w-full flex items-end justify-end mt-4">
                            <button type="submit"
                                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>
                </form>
            </div>
        </div>
    </div>
    </div>
    @if ($errors->any())
        @include('components.error-modal-second')
    @endif
    @if (session('error'))
        @include('components.error-modal')
    @endif
    @if (session('success'))
        @include('components.success-modal')
    @endif
@endsection
@section('javascript')
    <script>
        $(document).ready(function() {
            $.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);
                    });

                    select.on('change', function() {
                        $('#district').empty();
                        var city = $("#city option:selected").text();
                        $.ajax({
                            url: 'https://turkiyeapi.herokuapp.com/api/v1/provinces?name=' +
                                city,
                            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);
                                };
                            },
                            error: function(response) {
                                console.log('error', response);
                            }
                        });
                    });
                },
                error: function(response) {
                    console.log('error', response);
                }
            });
        });

        $('#role').on('change', function() {
            if ($(this).val() == 'Hr') {
                $('#hr_section').show();
                $('#selectHrUserContinents').show();
            } else {
                $('#hr_section').hide();
                $('#selectHrUserContinents').hide();
            }

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

            if ($(this).val() == 'isg') {
                $('#isg_section').show();
            } else {
                $('#isg_section').hide();
            }

            if ($(this).val() == 'Muhasebe') {
                $('#selectAccountingUserType').show();
            } else {
                $('#selectAccountingUserType').hide();
            }
        });

        $(document).ready(function() {
            var role = $('#role').val();
            if (role && role == 'Operasyon') {
                $('#operation_section').show();
            }
        });

        $('#hrSelect').multipleSelect({
            formatSelectAll: function() {
                return 'Hepsini Seç'
            },
            formatAllSelected: function() {
                return 'Hepsi Seçildi'
            },
            filter: true,
        })
    </script>
@endsection