@extends('layouts.app')
@section('urlContent')
    @php
        $randevuId = request()->segment(3);
    @endphp
    {!! view('components.breadcrumbs', [
        'b_items' => [
            'Ön Kayıtlar' => '/randevu/list',
            'Kayıt Detayı' => '/randevu/edit/' . $randevuId,
        ],
    ]) !!}
@endsection
@section('content')
    <div class="container-app">
        <div class="mt-4">
            <div class="p-4 sm:p-8 shadow bg-theme_secondary_black sm:rounded-lg">
                <div>
                    <div>
                        <h2 class="text-lg font-medium text-gray-300">
                            Randevu Detay Bilgileri
                        </h2>

                        <p class="mt-1 text-sm text-gray-400">
                            Seçtiğiniz Randevunun Detaylarını Burada Görüntüleyebilirsiniz.
                        </p>
                    </div>
                    <div class="mt-6 space-y-6 w-full flex flex-col">
                        <form method="POST" action="{{ route('randevu.edit', $meeting->id) }}" class="space-y-4" onsubmit="showLoading()">
                            @csrf
                            <input type="hidden" value="{{ $meeting->id }}" id="meetingId">
                            <div class="flex flex-col lg:flex-row gap-4">
                                <div class="lg:w-1/2">
                                    <label for="name" class="text-gray-300">
                                        İsim
                                    </label>
                                    <input name="name" type="text" class="mt-1 block w-full input-1"
                                        value="{{ $meeting->name }}" />
                                </div>
                                <div class="lg:w-1/2">
                                    <label for="surname" class="text-gray-300">
                                        Soy İsim
                                    </label>
                                    <input name="surname" type="text" class="mt-1 block w-full input-1"
                                        value="{{ $meeting->surname }}" />
                                </div>
                            </div>
                            <div class="flex flex-col lg:flex-row gap-4">
                                <div class="lg:w-1/2">
                                    <label for="category" class="text-gray-300">
                                        Görevi
                                    </label>
                                    <select name="category" id="categorySelect" type="text"
                                        class="mt-1 block w-full input-1">
                                    </select>
                                </div>
                                <div class="lg:w-1/2">
                                    <label for="phone" class="text-gray-300">
                                        Telefon
                                    </label>
                                    <input type="tel" class="mt-1 block w-full input-1" name="phone" value="{{ $meeting->phone }}" />
                                </div>
                            </div>
                            <div class="flex flex-col lg:flex-row gap-4">
                                <div class="lg:w-1/2">
                                    <label for="city" class="text-gray-300">
                                        İl
                                    </label>
                                    <select id="city" name="city" class="mt-1 block w-full input-1">
                                        <option selected disabled>İl Seçin</option>
                                    </select>
                                </div>
                                <div class="lg:w-1/2">
                                    <label for="district" class="text-gray-300">
                                        İlçe
                                    </label>
                                    <select id="district" name="district" class="mt-1 block w-full input-1">
                                        <option selected disabled>İlçe Seçin</option>
                                    </select>
                                </div>
                            </div>
                            <div class="flex flex-col lg:flex-row gap-4">
                                <div class="flex flex-col lg:flex-row gap-4 lg:w-1/2">
                                    <div class="lg:w-1/2">
                                        <label for="date" class="text-gray-300">
                                            Tarih
                                        </label>
                                        <input type="date" class="mt-1 block w-full input-1 p-2" name="date"
                                            value="{{ date('Y-m-d', strtotime($meeting?->meeting->date)) }}" />
                                    </div>
                                    <div class="lg:w-1/2">
                                        <label for="hour" class="text-gray-300">
                                            Saat
                                        </label>
                                        <input type="time" class="mt-1 block w-full input-1 p-2" name="hour"
                                            value="{{ date('H:i', strtotime($meeting?->meeting->hour)) }}" />
                                    </div>
                                </div>
                                <div class="lg:w-1/2">
                                    <label for="contact_info" class="text-gray-300">
                                        Nereden Duydu ?
                                    </label>
                                    <input name="contact_info" type="text" class="mt-1 block w-full input-1"
                                        value="{{ $meeting->contact_info }}" />
                                </div>
                            </div>
                            <div class="flex flex-col lg:flex-row gap-4">
                                <div class="lg:w-1/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 {{ $meeting->meeting->hr_id == $hrUser->id ? 'selected' : '' }}
                                                value="{{ $hrUser->id }}">{{ $hrUser->full_name }}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                            <div class="flex justify-end">
                                <button class="button-2 px-6">
                                    Kaydet
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </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>
        $(document).ready(function() {

            var meetingId = $('#meetingId').val();

            var cityData = @json($meeting->city);
            var districtData = @json($meeting->district);
            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);
            });
            currentVal = @json($meeting->userRole->id);
            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

{{-- $.ajax({
    url: '/randevu/api/get/hr',
    method: 'GET',
    success: function(response) {
        var hr_select = $('#hrSelect');
        for (var i = 0; i < response.length; i++) {
            console.log(response[i]);
            var hr_option = $('<option>', {
                value: response[i].id,
                text: response[i].name
            });
            hr_select.append(hr_option);
        };
        $.ajax({
            url: '/randevu/api/get/hr/' + meetingId,
            method: 'GET',
            success: function(response) {
                hr_select.val(response.id);
            },
            error: function(response) {
                console.log('error', response);
            }
        });
    },

    error: function(response) {
        console.log('error', response);
    }
}); --}}