@extends('site_builder.layouts.app')

@section('title', 'Domain · Sihirbaz')

@section('content')
    @include('site_builder.wizard._steps', ['current' => 4])

    <h1 class="font-display text-2xl font-semibold text-ink-900">Domain</h1>
    <p class="mt-2 text-sm text-ink-700">Sitenin yayınlanacağı alan adını seç.</p>

    @if (! $domainResellerConfigured)
        <div class="mt-6 rounded-xl border border-gold-400 bg-gold-300/20 px-4 py-3 text-sm text-ink-800">
            Domain sorgulama şu anda yapılandırılmamış — bu adım devre dışı, geliştirici tarafından tamamlanacak.
        </div>

        <form method="POST" action="{{ route('sitebuilder.wizard.domain.save') }}" class="mt-6 space-y-5">
            @csrf

            <div>
                <label for="domain" class="block text-sm font-medium text-ink-800">Domain</label>
                <input
                    type="text"
                    name="domain"
                    id="domain"
                    value="{{ old('domain', $domain->domain ?? '') }}"
                    placeholder="ornek.com"
                    required
                    class="mt-1 block w-full rounded-lg border border-brand-200 bg-white px-3 py-2 text-sm text-ink-900 shadow-sm focus:border-brand-500 focus:outline-none focus:ring-1 focus:ring-brand-500"
                >
                @error('domain')
                    <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                @enderror
            </div>

            <button
                type="submit"
                class="w-full rounded-lg bg-brand-600 px-4 py-2.5 text-sm font-semibold text-white shadow-glow transition hover:bg-brand-700 sm:w-auto"
            >
                Devam Et
            </button>
        </form>
    @else
        <div
            x-data="{
                domain: '{{ old('domain', $domain->domain ?? '') }}',
                checking: false,
                checked: false,
                available: null,
                error: null,
                check() {
                    if (! this.domain) { return; }
                    this.checking = true;
                    this.checked = false;
                    this.available = null;
                    this.error = null;

                    fetch('{{ route('sitebuilder.wizard.domain.check') }}', {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json',
                            'Accept': 'application/json',
                            'X-CSRF-TOKEN': document.querySelector('meta[name=csrf-token]').content,
                        },
                        body: JSON.stringify({ domain: this.domain }),
                    })
                        .then((res) => res.json())
                        .then((data) => {
                            this.checking = false;
                            this.checked = true;

                            if (! data.success) {
                                this.error = data.error || 'Domain sorgulanamadı.';
                                return;
                            }

                            this.available = !! data.available;
                        })
                        .catch(() => {
                            this.checking = false;
                            this.checked = true;
                            this.error = 'Domain sorgulanırken bir hata oluştu.';
                        });
                },
            }"
            class="mt-6 space-y-5"
        >
            <div>
                <label for="domain" class="block text-sm font-medium text-ink-800">Domain</label>
                <div class="mt-1 flex gap-3">
                    <input
                        type="text"
                        id="domain"
                        x-model="domain"
                        placeholder="ornek.com"
                        class="block w-full rounded-lg border border-brand-200 bg-white px-3 py-2 text-sm text-ink-900 shadow-sm focus:border-brand-500 focus:outline-none focus:ring-1 focus:ring-brand-500"
                    >
                    <button
                        type="button"
                        @click="check()"
                        :disabled="checking || ! domain"
                        class="shrink-0 rounded-lg border border-brand-300 px-4 py-2 text-sm font-semibold text-brand-700 transition hover:bg-brand-50 disabled:opacity-50"
                    >
                        <span x-show="! checking">Kontrol Et</span>
                        <span x-show="checking">Kontrol ediliyor…</span>
                    </button>
                </div>
                @error('domain')
                    <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                @enderror

                <p class="mt-2 text-sm" x-cloak x-show="checked && ! error && available === true">
                    <span class="font-semibold text-emerald-600">✓ Müsait</span>
                </p>
                <p class="mt-2 text-sm" x-cloak x-show="checked && ! error && available === false">
                    <span class="font-semibold text-red-600">✗ Müsait değil</span>
                </p>
                <p class="mt-2 text-sm text-red-600" x-cloak x-show="checked && error" x-text="error"></p>
            </div>

            <form method="POST" action="{{ route('sitebuilder.wizard.domain.save') }}">
                @csrf
                <input type="hidden" name="domain" :value="domain">

                <button
                    type="submit"
                    :disabled="! domain"
                    class="w-full rounded-lg bg-brand-600 px-4 py-2.5 text-sm font-semibold text-white shadow-glow transition hover:bg-brand-700 disabled:opacity-50 sm:w-auto"
                >
                    Devam Et
                </button>
            </form>
        </div>
    @endif
@endsection