@extends('layouts.app')
@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 class="flex gap-6 items-center">

                        <img class="w-14 h-14 rounded-full object-cover showImage cursor-pointer" src="{{ getCdnFile($user->profile_img) }}">
                        <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>

                    <form method="POST" 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 Seçiniz</span>
                                    <select name="role" class="input-1 roleSelect">
                                        <option value="Hr">İnsan Kaynakları</option>
                                        <option value="Operasyon">Operasyoncu</option>
                                        <option value="Muhasebe">Muhasebeci</option>
                                        <option value="Randevu">Randevucu</option>
                                        <option value="Sales_marketing">Satış & Pazarlama</option>
                                    </select>
                                </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]">
                                    <i class="fa-solid fa-save"></i>
                                    Kaydet
                                </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() {
            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);
        });

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