@extends('layout.index')
@section('title', 'Adresim Hesabım')
@section('content')
    <section class="my-10 lg:px-0 px-4" data-role="my-account">
        <div class="max-w-7xl mx-auto grid lg:gap-4 gap-10 lg:grid-cols-12 grid-cols-1">
            <div class="lg:col-span-3 col-span-1">
                <nav>
                    <ul class="flex gap-2 flex-col">
                        <li>
                            <a class="tab-button" href="{{ site('my-account') }}"> Kullanıcı Bilgilerim </a>
                        </li>
                        <li>
                            <a href="{{ site('my-account/address') }}" class="tab-button active"> Adresim </a>
                        </li>
                        <li>
                            <a href="{{ site('my-account/favorites') }}" class="tab-button"> Beğendiğim Ürünler </a>
                        </li>
                        <li>
                            <a href="{{ site('my-account/orders') }}" class="tab-button"> Siparişlerim </a>
                        </li>
                        <li>
                            <a href="{{ site('my-account/comments') }}" class="tab-button"> Yorumlarım </a>
                        </li>
                        <li>
                            <a href="{{ site('auth/logout') }}" class="py-2 px-4 w-full border border-red-500 rounded-full text-red-500 transition hover:text-white hover:bg-red-500 block cursor-pointer"> Çıkış Yap </a>
                        </li>
                    </ul>
                </nav>
            </div>
            <div class="lg:col-span-9 col-span-1">
                <h3 class="text-lg lg:mb-4 mb-2"> Adresim </h3>

                <form method="POST" class="flex flex-col gap-2">
                    @csrf
                    <div class="grid grid-cols-2 gap-2">
                        <div class="form-item">
                            <label for="name">Ad</label>
                            <input type="text"
                                   id="name"
                                   name="name"
                                   value="{{ $formdata['name'] ?? ($address_data->name ?? '') }}"
                                   placeholder="Ad" />
                            @isset($errors['name'][0])
                                <small>{{ $errors['name'][0] }}</small>
                            @endisset
                        </div>
                        <div class="form-item">
                            <label for="surname">Soyad</label>
                            <input type="text"
                                   id="surname"
                                   name="surname"
                                   value="{{ $formdata['surname'] ?? ($address_data->surname ?? '') }}"
                                   placeholder="Soyad" />
                            @isset($errors['surname'][0])
                                <small>{{ $errors['surname'][0] }}</small>
                            @endisset
                        </div>
                    </div>
                    <div class="form-item">
                        <label for="address">Adres</label>
                        <input type="text"
                               id="address"
                               name="address"
                               value="{{ $formdata['address'] ?? ($address_data->address ?? '') }}"
                               placeholder="Apartman, daire, vb." />
                        @isset($errors['address'][0])
                            <small>{{ $errors['address'][0] }}</small>
                        @endisset
                    </div>
                    <div class="grid grid-cols-3 gap-2">
                        <div class="form-item">
                            <label for="country">Ülke</label>
                            <select name="country" id="country">
                                <option> - Ülke Seç - </option>
                                @foreach(db('region')->where('type', 'country')->get()->all() as $country)
                                    <option value="{{ $country->id }}" {{ isset($address_data->country) ? $address_data->country == $country->id ? 'selected' : '' : '' }}>{{ $country->name }}</option>
                                @endforeach
                            </select>
                            @isset($errors['country'][0])
                                <small>{{ $errors['country'][0] }}</small>
                            @endisset
                        </div>
                        <div class="form-item">
                            <label for="city"> Şehir </label>
                            <select name="city" id="city">
                                @isset($address_data->country)
                                    @foreach(db('region')->where('top', $address_data->country)->get()->all() as $city)
                                        <option value="{{ $city->id }}" {{ $address_data->city == $city->id ? 'selected' : '' }}>{{ $city->name }}</option>
                                    @endforeach
                                @endisset
                            </select>
                            @isset($errors['city'][0])
                                <small>{{ $errors['city'][0] }}</small>
                            @endisset
                        </div>
                        <div class="form-item">
                            <label for="post_code">Posta Kodu</label>
                            <input type="text" id="post_code" name="post_code"
                                   value="{{ $formdata['post_code'] ?? ($address_data->post_code ?? '') }}">
                            @isset($errors['post_code'][0])
                                <small>{{ $errors['post_code'][0] }}</small>
                            @endisset
                        </div>
                    </div>
                    <div class="form-item">
                        <label for="phone">Telefon Numarası</label>
                        <input type="text" name="phone" id="phone"
                               value="{{ $formdata['phone'] ?? ($address_data->phone ?? '') }}">
                        @isset($errors['phone'][0])
                            <small>{{ $errors['phone'][0] }}</small>
                        @endisset
                    </div>
                    <div class="form-item">
                        <label for="email">E-posta</label>
                        <input type="email" name="email" id="email"
                               value="{{ $formdata['email'] ?? ($address_data->email ?? '') }}">
                        @isset($errors['email'][0])
                            <small>{{ $errors['email'][0] }}</small>
                        @endisset
                    </div>
                    <div class="form-item"></div>
                    <div class="flex items-center justify-end">
                        <button class="py-2 px-4 rounded-full text-white text-left transition bg-primary hover:bg-primary-600">
                            Kaydet
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </section>
@endsection
@section('script')
    <script>
        let API_URL = "{{site('api/v2/')}}"
        let country_select = $('select#country').select2({
            placeholder: " - Ülke Seç - ",
        });
        let city_select_element = $('select#city');
        let city_select = city_select_element.select2({
            placeholder: " - Şehir Seç - ",
        });

        country_select.on('change.select2', function (event){
            let value = country_select.val();
            city_select.select2('destroy')
            $.ajax({
                'url': API_URL + 'get-city/' + value,
                'method': 'GET',
                'data': {},
                'success': function (response){
                    city_select_element.html('');

                    let option = new Option(' - Şehir Seç - ')
                    city_select_element.append(option)

                    response.forEach(city => {
                        let option = new Option(city.name, city.id)
                        city_select_element.append(option)
                    });
                    city_select.select2({
                        placeholder: " - Şehir Seç - "
                    })
                }
            }, 'json');
        })
    </script>
@endsection