@extends('layouts.app')
@section('urlContent')
    {!! view('components.breadcrumbs', [
        'b_items' => [
            'Sicil No Oluştur' => '/root/registiration/list',
        ],
    ]) !!}
@endsection
@section('content')
    <div class="container-app md:px-20 pb-5">
        <div class="flex justify-end">
            <button id="addNew" class="button-3">
                <i class="fa-solid fa-plus"></i>
                Sicil No Ekle
            </button>
        </div>
        <div id="formArea" class="hidden">
            <form action="{{ route('root.registirationStore') }}" method="post" class="grid grid-cols-2 gap-4 mt-6"
                onsubmit="showLoading()">
                @csrf
                <div class="flex flex-col gap-2">
                    <label class="text-gray-300 text-sm font-semibold" for="">Sicil Numarası</label>
                    <input class="input-2" type="text" name="registration_number" id="registration_number" value="{{ old ('registration_number') }}">
                </div>
                <div class="flex flex-col gap-2">
                    <label class="text-gray-300 text-sm font-semibold" for="">İl</label>
                    <select class="input-2 city" type="text" name="city"></select>
                </div>
                <div class="flex flex-col gap-2">
                    <label class="text-gray-300 text-sm font-semibold" for="">İlçe</label>
                    <select class="input-2 district" type="text" name="state">

                    </select>
                </div>
                <div class="flex flex-col gap-2">
                    <label class="text-gray-300 text-sm font-semibold" for="">Kullanıcı Adı 1</label>
                    <input class="input-2" type="text" name="registiration_username_step_one" 
                        id="registiration_username_step_one" value="{{ old('registiration_username_step_one') }}">
                </div>
                <div class="flex flex-col gap-2">
                    <label class="text-gray-300 text-sm font-semibold" for="">Kullanıcı Adı 2</label>
                    <input class="input-2" type="text" name="registiration_username_step_two"
                        id="registiration_username_step_two" value="{{ old('registiration_username_step_two') }}">
                </div>
                <div class="flex flex-col gap-2">
                    <label class="text-gray-300 text-sm font-semibold" for="">Sistem Şifresi</label>
                    <input class="input-2" type="text" name="registiration_system_password"
                        id="registiration_system_password" value="{{ old('registiration_system_password') }}">
                </div>
                <div class="flex flex-col gap-2">
                    <label class="text-gray-300 text-sm font-semibold" for="">İşyeri Şifresi</label>
                    <input class="input-2" type="text" name="registiration_office_password"
                        id="registiration_office_password" value="{{ old('registiration_office_password') }}">
                </div>
                <div class="flex flex-col gap-2">
                    <label class="text-gray-300 text-sm font-semibold" for="">Tarih</label>
                    <input class="input-2" type="date" name="registiration_date" id="registiration_date" value="{{ old('registiration_date') }}">
                </div>
                <div class="flex flex-col gap-2">
                    <label class="text-gray-300 text-sm font-semibold" for="">Açıklama</label>
                    <textarea class="input-2 resize-none" name="description" id="description" rows="3">{{ old('description') }}</textarea>
                </div>
                <div class="flex justify-end col-span-2">
                    <button class="button-3" type="submit">
                        Kaydet
                    </button>
                </div>
            </form>
        </div>
        <div class="grid gap-4">
            <div class="mt-6 space-y-4">
                @foreach ($registirations as $item)
                    <div id="accordion-color" data-accordion="collapse" data-active-classes="bg-gray-800 text-white">
                        <h2 id="accordion-color-heading-{{ $loop->index }}">
                            <button type="button"
                                class="flex items-center justify-between w-full p-5 font-medium rtl:text-right border rounded-xl focus:ring-2 focus:ring-blue-800 border-gray-700 text-gray-400 hover:bg-gray-800 gap-3"
                                data-accordion-target="#accordion-color-body-{{ $loop->index }}" aria-expanded="true"
                                aria-controls="accordion-color-body-1">
                                <div class="flex justify-between gap-3 w-full px-5">
                                    <div class="flex flex-col gap-2">
                                        <span>Ilce</span>
                                        <span>{{ $item->state }}</span>
                                    </div>
                                    <div class="flex flex-col gap-2">
                                        <span>Sicil numarasi</span>
                                        <span>{{ $item->registration_number }}</span>
                                    </div>
                                    <div class="flex flex-col gap-2">
                                        <span>Aciklama</span>
                                        <span>{{ $item->description }}</span>
                                    </div>
                                    <div class="flex flex-col gap-2">
                                        <span>Tarih</span>
                                        <span>{{ $item->registiration_date }}</span>
                                    </div>
                                </div>
                                <svg data-accordion-icon class="w-3 h-3 rotate-180 shrink-0" aria-hidden="true"
                                    xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 6">
                                    <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
                                        stroke-width="2" d="M9 5 5 1 1 5" />
                                </svg>
                            </button>
                        </h2>
                        <div id="accordion-color-body-{{ $loop->index }}" class="hidden"
                            aria-labelledby="accordion-color-heading-{{ $loop->index }}">
                            <div class="p-5 mx-4 border border-b-0 border-gray-700 rounded-b-xl bg-theme_secondary_black">

                                <div class="grid grid-cols-2 gap-4 mt-6">
                                    <div class="flex flex-col gap-2">
                                        <label class="text-gray-300 text-sm font-semibold">Sicil Numarası</label>
                                        <input readonly class="input-2" type="text" name="registration_number"
                                            value="{{ $item->registration_number }}" id="registration_number">
                                    </div>
                                    <div class="flex flex-col gap-2">
                                        <label class="text-gray-300 text-sm font-semibold">İl</label>
                                        <input readonly class="input-2" type="text" name="city"
                                            value="{{ $item->city }}">
                                    </div>
                                    <div class="flex flex-col gap-2">
                                        <label class="text-gray-300 text-sm font-semibold">İlçe</label>
                                        <input readonly class="input-2" type="text" name="state"
                                            value="{{ $item->state }}">
                                    </div>
                                    <div class="flex flex-col gap-2">
                                        <label class="text-gray-300 text-sm font-semibold">Kullanıcı Adı 1</label>
                                        <input readonly class="input-2" type="text"
                                            name="registiration_username_step_one" id="registiration_username_step_one"
                                            value="{{ $item->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 readonly class="input-2" type="text"
                                            name="registiration_username_step_two" id="registiration_username_step_two"
                                            value="{{ $item->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 readonly class="input-2" type="text"
                                            name="registiration_system_password" id="registiration_system_password"
                                            value="{{ $item->registiration_system_password }}">
                                    </div>
                                    <div class="flex flex-col gap-2">
                                        <label class="text-gray-300 text-sm font-semibold">İşyeri Şifresi</label>
                                        <input readonly class="input-2" type="text"
                                            name="registiration_office_password" id="registiration_office_password"
                                            value="{{ $item->registiration_office_password }}">
                                    </div>
                                    <div class="flex flex-col gap-2">
                                        <label class="text-gray-300 text-sm font-semibold">Tarih</label>
                                        <input readonly class="input-2" type="date" name="registiration_date"
                                            id="registiration_date" value="{{ $item->registiration_date }}">
                                    </div>
                                    <div class="flex flex-col gap-2">
                                        <label class="text-gray-300 text-sm font-semibold">Açıklama</label>
                                        <textarea readonly class="input-2 resize-none" name="description" id="description" rows="3">{{ $item->description }}</textarea>
                                    </div>
                                    <div class="flex gap-2 justify-end col-span-2">
                                        <button class="button-3 bg-red-700" form="deleteForm{{ $item->id }}"
                                            type="submit">Kaydı Sil</button>
                                        <a href="{{ route('root.registirationEditIndex', $item->id) }}"
                                            class="button-3">Düzenle</a>
                                    </div>
                                </div>

                            </div>
                        </div>
                    </div>
                    <form id="deleteForm{{ $item->id }}"
                        action="{{ route('root.registirationDelete', ['registiration' => $item]) }}" method="post"
                        onsubmit="showLoading()">
                        @csrf
                        @method('DELETE')
                    </form>
                @endforeach
            </div>
            <div class="">
                {{ $registirations->onEachSide(8)->links() }}
            </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() {
            // Accordion click event
            $('[data-accordion-target]').on('click', function() {
                var target = $(this).data('accordion-target');
                var isExpanded = $(this).attr('aria-expanded') === 'true';

                // Toggle accordion body visibility
                $(target).slideToggle(isExpanded);
                $(this).attr('aria-expanded', !isExpanded);
            });
        });

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

                    select.on('change', function() {
                        $('#district').empty();
                        var city = $(".city option:selected").text();
                        $.ajax({
                            url: 'https://turkiyeapi.herokuapp.com/api/v1/provinces?name=' +
                                city,
                            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);
                            }
                        });
                    });
                },
                error: function(response) {
                    console.log('error', response);
                }
            });
        });

        $('#addNew').click(function() {
            $('#formArea').slideToggle();
        });
    </script>
@endsection