@extends('layouts.app')
@section('urlContent')
    {!! view('components.breadcrumbs', [
        'b_items' => [
            'Sicil No Oluştur' => '/root/registiration/list',
            'Düzenle' => '/root/registiration/edit/' . request()->segment(4),
        ],
    ]) !!}
@endsection
@section('content')
    <div class="container-app md:px-20">
        <form class="grid grid-cols-2 gap-4 mt-6"
            action="{{ route('root.registirationUpdate', ['registiration' => $registiration]) }}" method="post" onsubmit="showLoading()"> 
            @csrf
            <div class="flex flex-col gap-2">
                <label class="text-gray-300 text-sm font-semibold">Sicil Numarası</label>
                <input class="input-2" type="text" name="registration_number"
                    value="{{ $registiration->registration_number }}" id="registration_number">
            </div>
            <div class="flex flex-col gap-2">
                <label class="text-gray-300 text-sm font-semibold">İl</label>
                <select class="input-2" type="text" name="city" id="city">
                </select>
            </div>
            <div class="flex flex-col gap-2">
                <label class="text-gray-300 text-sm font-semibold">İlçe</label>
                <select class="input-2" type="text" name="state" id="district"></select>
            </div>
            <div class="flex flex-col gap-2">
                <label class="text-gray-300 text-sm font-semibold">Kullanıcı Adı 1</label>
                <input class="input-2" type="text" name="registiration_username_step_one"
                    id="registiration_username_step_one" value="{{ $registiration->registiration_username_step_one }}">
            </div>
            <div class="flex flex-col gap-2">
                <label class="text-gray-300 text-sm font-semibold">Kullanıcı Adı 2</label>
                <input class="input-2" type="text" name="registiration_username_step_two"
                    id="registiration_username_step_two" value="{{ $registiration->registiration_username_step_two }}">
            </div>
            <div class="flex flex-col gap-2">
                <label class="text-gray-300 text-sm font-semibold">Sistem Şifresi</label>
                <input class="input-2" type="text" name="registiration_system_password"
                    id="registiration_system_password" value="{{ $registiration->registiration_system_password }}">
            </div>
            <div class="flex flex-col gap-2">
                <label class="text-gray-300 text-sm font-semibold">İşyeri Şifresi</label>
                <input class="input-2" type="text" name="registiration_office_password"
                    id="registiration_office_password" value="{{ $registiration->registiration_office_password }}">
            </div>
            <div class="flex flex-col gap-2">
                <label class="text-gray-300 text-sm font-semibold">Tarih</label>
                <input class="input-2" type="date" name="registiration_date" id="registiration_date"
                    value="{{ $registiration->registiration_date }}">
            </div>
            <div class="flex flex-col gap-2">
                <label class="text-gray-300 text-sm font-semibold">Açıklama</label>
                <textarea class="input-2 resize-none" name="description" id="description" rows="3">{{ $registiration->description }}</textarea>
            </div>
            <div class="flex gap-2 justify-end col-span-2">
                <button class="button-3">Kaydet</a>
            </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 cityData = @json($registiration->city);
            var districtData = @json($registiration->district);

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

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