@extends('layouts.app')
@section('urlContent')
    @if ($preMeeting)
        {!! view('components.breadcrumbs', [
            'b_items' => [
                'Dışarıdan Gelen Kayıtlar' => '/randevu/external-registers',
                'Kayıt Oluştur' => '/randevu/olustur',
            ],
        ]) !!}
    @else
        {!! view('components.breadcrumbs', [
            'b_items' => [
                'Kayıt Oluştur' => '/randevu/olustur',
            ],
        ]) !!}
    @endif
@endsection
@section('content')
    <div class="container-app">
        <form action="{{ route('randevu.create', $preMeeting ? ['preMeeting' => $preMeeting->id] : []) }}" 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="{{ $preMeeting ? $preMeeting->name : 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="{{ $preMeeting ? $preMeeting->surname : 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 @if ($preMeeting && $preMeeting->gender == 'Kadın') selected @endif value="Kadın">Kadın</option>
                            <option @if ($preMeeting && $preMeeting->gender == 'Erkek') selected @endif value="Erkek">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 @if ($preMeeting && $preMeeting->category == $item['id']) selected @endif 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="{{ $preMeeting ? $preMeeting->phone : 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="{{ $preMeeting ? $preMeeting->contact_info : 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 @if ($preMeeting && $preMeeting->meeting && $preMeeting->meeting->hr_id == $hrUser->id) selected @endif value="{{ $hrUser->id }}">
                                    {{ $hrUser->full_name }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="flex justify-end items-end">
                        <button type="button" id="next"
                            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">
                            Sonraki Adıma Geç
                            <i class="fa-solid fa-circle-right"></i>
                        </button>
                    </div>
                </div>
            </div>
            <div id="section_2" class="hidden">
                <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="date" class="text-gray-300">
                            Randevu Tarihi
                        </label>
                        <input name="date" type="date" class="block w-full input-1"
                            value="{{ $preMeeting && $preMeeting->meeting ? $preMeeting->meeting->date : old('date') }}" />
                    </div>
                    <div class="flex flex-col gap-2">
                        <label for="hour" class="text-gray-300">
                            Randevu Saati
                        </label>
                        <input name="hour" type="time" class="block w-full input-1"
                            value="{{ $preMeeting && $preMeeting->meeting ? $preMeeting->meeting->hour : old('hour') }}" />
                    </div>
                    <div class="flex flex-col gap-2">
                        <label for="hour" class="text-gray-300">
                            Referans Kodu
                        </label>
                        <input name="reference_code" type="text" class="block w-full input-1"
                            value="{{ old('referance_code') }}" />
                    </div>
                    {{-- <div class="w-full flex items-end justify-start">

                    </div> --}}
                    <div class="w-full flex items-end col-span-2 justify-between">
                        <button type="button" id="prev" class="button-2 h-[42px] px-6">
                            <i class="fa-solid fa-circle-left"></i>
                            Önceki Adıma Dön
                        </button>
                        @if (!$preMeeting || ($preMeeting && !$preMeeting->meeting))
                            <button type="submit" id="next" class="button-2 h-[42px] px-6">
                                Randevuyu Oluştur
                                <i class="fa-regular fa-calendar-check"></i>
                            </button>
                        @endif
                    </div>
                </div>
            </div>
        </form>
    </div>
    @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>
        $('#next').click(function() {
            $('#section_1').slideUp('slow');
            $('#section_2').slideDown('slow');
        });
        $('#prev').click(function() {
            $('#section_1').slideDown('slow');
            $('#section_2').slideUp('slow');
        });

        $(document).ready(function() {

            var meetingId = $('#meetingId').val();
            var preMeeting = @json($preMeeting);
            if (preMeeting != null) {
                var cityData = preMeeting.city;
                var districtData = preMeeting.district;
                var currentVal = preMeeting.category;
            }
            var category = @json($category);
            var categorySelect = $('#categorySelect');

            $.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);
                }
            });

            category.forEach(function(item) {
                var categoryOption = $('<option>', {
                    value: item.id,
                    text: item.title
                });
                categorySelect.append(categoryOption);
            });
            categorySelect.val(currentVal)
            // alttaki kod buraya geliyor

        });

        $('#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