@extends('layouts.app')
@section('urlContent')
    {!! view('components.breadcrumbs', [
        'b_items' => [
            'Ön Kayıtlar' => '/operation/randevu',
            'Ön Kayıt Oluştur' => '/operation/randevu/create',
        ],
    ]) !!}
@endsection
@section('content')
    <div class="container-app">
        <form action="{{ route('operation.operationRandevuCreate') }}" method="POST" class="mt-4" onsubmit="showLoading()">
            @csrf
            <div id="section_1">
                <div class="grid grid-cols-1 xl:grid-cols-2 gap-8 bg-theme_secondary_black p-12 rounded-xl shadow">
                    <div class="flex flex-col gap-2">
                        <label for="name" class="text-gray-300">
                            İsim
                        </label>
                        <input name="name" type="text" class="block w-full input-1" value="{{ old('name') }}">
                    </div>
                    <div class="flex flex-col gap-2">
                        <label for="surname" class="text-gray-300">
                            Soy İsim
                        </label>
                        <input name="surname" type="text" class="block w-full input-1" value="{{ old('surname') }}">
                    </div>
                    <div class="flex flex-col gap-2">
                        <label for="category" class="text-gray-300">
                            Cinsiyet
                        </label>
                        <select name="gender" class="block w-full input-1">
                            <option selected disabled>Cinsiyet Seçiniz</option>
                            <option value="Kadın" {{ old('gender') == 'Kadın' ? 'selected' : '' }}>Kadın</option>
                            <option value="Erkek" {{ old('gender') == 'Erkek' ? 'selected' : '' }}>Erkek</option>
                        </select>
                    </div>
                    <div class="flex flex-col gap-2">
                        <label for="category" class="text-gray-300">
                            Görevi
                        </label>
                        <select name="category" class="block w-full input-1">
                            <option selected disabled>Görev Seçiniz</option>
                            @foreach ($category as $item)
                                <option value="{{ $item['id'] }}" {{ old('category') == $item['id'] ? 'selected' : '' }}>
                                    {{ $item['title'] }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="flex flex-col gap-2">
                        <label for="phone" class="text-gray-300">
                            Telefon Numarası
                        </label>
                        <input name="phone" type="tel" class="block w-full input-1" value="{{ old('phone') }}">
                    </div>
                    <div class="flex flex-col gap-2">
                        <label for="city" class="text-gray-300">
                            İl
                        </label>
                        <select id="city" name="city" class="block w-full input-1">
                            <option selected disabled>İl Seçin</option>
                        </select>
                    </div>
                    <div class="flex flex-col gap-2">
                        <label for="district" class="text-gray-300">
                            İlçe
                        </label>
                        <select id="district" name="district" class="block w-full input-1">
                            <option selected disabled>İlçe Seçin</option>
                        </select>
                    </div>

                    <div class="flex flex-col gap-2">
                        <label for="contact_info" class="text-gray-300">
                            İlanı Nereden Duydu?
                        </label>
                        <input name="contact_info" type="text" class="block w-full input-1"
                            value="{{ old('contact_info') }}">
                    </div>
                    <div class="flex flex-col gap-2">
                        <label for="hr_id" class="text-gray-300">
                            İK Personeli Seç
                        </label>
                        <select name="hr_id" class="block w-full input-1">
                            <option disabled>İK Personeli Seçin</option>
                            @foreach ($hrUsers as $hrUser)
                                <option value="{{ $hrUser->id }}" {{ old('hr_id') == $hrUser->id ? 'selected' : '' }}>
                                    {{ $hrUser->full_name }}</option>
                            @endforeach
                        </select>
                    </div>

                    <div class="flex flex-col gap-2">
                        <label for="working_type" class="text-gray-300">
                            Çalışma Tipi
                        </label>
                        <select name="working_type" type="text" class="block w-full input-1" required>
                            <option disabled selected>Çalışma Tipi Seçiniz</option>
                            <option value="wage" {{ old('working_type') == 'wage' ? 'selected' : '' }}>Maaşlı</option>
                            <option value="daily" {{ old('working_type') == 'daily' ? 'selected' : '' }}>Part time
                            </option>
                        </select>
                    </div>
                    <div class="flex flex-col gap-2">
                        <label for="payment_term" class="text-gray-300">
                            Ödeme Vadesi
                        </label>
                        <select name="payment_term" type="text" class="block w-full input-1" required>
                            <option selected disabled>Ödeme Vadesi Seçiniz</option>
                            <option value="daily" {{ old('payment_term') == 'daily' ? 'selected' : '' }}>Günlük</option>
                            <option value="weekly" {{ old('payment_term') == 'weekly' ? 'selected' : '' }}>Haftalık
                            </option>
                            <option value="twoWeekly" {{ old('payment_term') == 'twoWeekly' ? 'selected' : '' }}>15 Günlük
                            </option>
                            <option value="monthly" {{ old('payment_term') == 'monthly' ? 'selected' : '' }}>Aylık</option>
                        </select>
                    </div>

                    <div class="flex flex-col gap-2">
                        <label for="education_status" class="text-gray-300">
                            Öğrenim Durumu
                        </label>
                        <select name="education_status" type="text" class="block w-full input-1" required>
                            <option selected disabled>Öğrenim Durumu Seçiniz</option>
                            <option value="primary_school"
                                {{ old('education_status') == 'primary_school' ? 'selected' : '' }}>İlkokul</option>
                            <option value="middle_school"
                                {{ old('education_status') == 'middle_school' ? 'selected' : '' }}>Ortaokul</option>
                            <option value="high_school" {{ old('education_status') == 'high_school' ? 'selected' : '' }}>
                                Lise</option>
                            <option value="associate_degree"
                                {{ old('education_status') == 'associate_degree' ? 'selected' : '' }}>Ön Lisans</option>
                            <option value="bachelor_degree"
                                {{ old('education_status') == 'bachelor_degree' ? 'selected' : '' }}>Lisans</option>
                            <option value="master_degree"
                                {{ old('education_status') == 'master_degree' ? 'selected' : '' }}>Yüksek Lisans</option>
                            <option value="doctoral_degree"
                                {{ old('education_status') == 'doctoral_degree' ? 'selected' : '' }}>Doktora</option>
                            <option value="vocational_training"
                                {{ old('education_status') == 'vocational_training' ? 'selected' : '' }}>Mesleki Eğitim
                            </option>
                            <option value="other" {{ old('education_status') == 'other' ? 'selected' : '' }}>Diğer
                            </option>
                        </select>
                    </div>

                    <div class="flex flex-col gap-2">
                        <label class="text-gray-300">
                            Yabancı Dil Bilgisi
                        </label>
                        <select class="input-1 block w-full py-2" name="language_info[]" multiple="multiple"
                            placeholder="Yabancı Dil Seçiniz" id="day_select">
                            <option value="none">
                                Yok
                            </option>
                            <option value="english">
                                İngilizce
                            </option>
                            <option value="german">
                                Almanca
                            </option>
                            <option value="spanish">
                                İspanyolca
                            </option>
                            <option value="arabic">
                                Arapça
                            </option>
                            <option value="french">
                                Fransızca
                            </option>
                            <option value="russian">
                                Rusça
                            </option>
                            <option value="other">
                                Diğer
                            </option>
                        </select>
                    </div>
                    <div class="flex flex-col gap-2">
                        <label for="meetings_notes" class="text-gray-300">
                            Görüşme Notları
                        </label>
                        <textarea type="text" cols="1" name="meetings_notes"
                            class="input-1 block w-full h-[41px] min-h-[41px] max-h-24" placeholder="...">{{ old('meetings_notes') }}</textarea>
                    </div>
                    <div class="flex flex-col gap-2">
                        <label for="meetings_notes" class="text-gray-300">
                            Bordro tipi
                        </label>
                        <select name="payroll_type" required class="block w-full input-1">
                            <option selected disabled>Bordro tipi seçiniz</option>
                            <option value="net" {{ old('payroll_type') == 'net' ? 'selected' : '' }}>net</option>
                            <option value="brut" {{ old('payroll_type') == 'brut' ? 'selected' : '' }}>brut</option>
                        </select>
                    </div>



                    <div class="flex flex-col gap-2">
                        <button
                            class="text-gray-300 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] px-6">
                            Ön Kaydı Oluştur
                            <i class="fa-solid fa-circle-right"></i>
                        </button>
                    </div>
                </div>
            </div>
        </form>
    </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>
        $('#day_select').multipleSelect({
            formatSelectAll: function() {
                return 'Hepsini Seç'
            },
            formatAllSelected: function() {
                return 'Hepsi Seçildi'
            }
        })

        $(document).ready(function() {
            var preMeeting = @json($preMeeting ?? null);

            if (preMeeting != null) {
                var langData = JSON.parse(preMeeting.language_info, true);

                console.log(langData);
                $('#day_select').multipleSelect('setSelects', langData.map(item => item ? item : ''));

            }
        });

        $(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);
                    });
                },
                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);
                    };
                },
                error: function(response) {
                    console.log('error', response);
                }
            });


        });

        $('#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);
                }
            });
        }
    </script>
@endsection