@extends('layouts.account')

@section('title', 'Create Your School - Step 2')
@section('content')

<div class="mx-auto max-w-2xl">
    <div class="mb-6">
        <a href="{{ route('account.onboarding.step1') }}" class="text-sm font-medium text-gray-500 hover:text-gray-800">&larr; Back to School Info</a>
        <h1 class="mt-2 text-2xl font-display font-bold text-gray-900">Choose Your Subdomain</h1>
        <p class="mt-1 text-sm text-gray-500">Step 2 of 3 — Pick a unique subdomain and set up the school admin account.</p>
    </div>

    {{-- Progress --}}
    <div class="mb-6 flex items-center gap-2">
        @foreach([1 => 'School Info', 2 => 'Subdomain', 3 => 'Review'] as $num => $label)
            <div class="flex items-center gap-2">
                <span class="flex h-7 w-7 items-center justify-center rounded-full text-xs font-bold
                    {{ $num === 2 ? 'bg-primary-600 text-white' : ($num < 2 ? 'bg-emerald-600 text-white' : 'bg-gray-200 text-gray-500') }}">
                    {{ $num < 2 ? '✓' : $num }}
                </span>
                <span class="hidden text-sm font-medium {{ $num === 2 ? 'text-gray-900' : 'text-gray-500 sm:block' }}">{{ $label }}</span>
                @if(!$loop->last)
                    <span class="h-px w-6 bg-gray-200"></span>
                @endif
            </div>
        @endforeach
    </div>

    <div class="rounded-2xl border border-gray-200 bg-white p-8 shadow-sm">
        <form method="POST" action="{{ route('account.onboarding.step2.store') }}">
            @csrf

            <div class="mb-6 rounded-xl bg-gray-50 px-4 py-3 text-sm text-gray-600">
                Creating <strong class="text-gray-900">{{ $draft['name'] }}</strong>
                @if(!empty($draft['email'])) &mdash; {{ $draft['email'] }} @endif
            </div>

            <div class="space-y-6">
                {{-- Subdomain --}}
                <div>
                    <label for="slug" class="block text-sm font-medium text-gray-700">Subdomain</label>
                    <div class="mt-1 flex items-center rounded-lg border border-gray-300 bg-white shadow-sm focus-within:border-primary-500 focus-within:ring-1 focus-within:ring-primary-500">
                        <input type="text" id="slug" name="slug" value="{{ old('slug', $draft['slug'] ?? '') }}"
                               class="block w-full rounded-l-lg border-0 px-3 py-2.5 text-sm focus:outline-none"
                               placeholder="greenfield">
                        <span class="select-none whitespace-nowrap border-l border-gray-300 bg-gray-50 px-3 py-2.5 text-sm text-gray-500">.{{ $baseDomain }}</span>
                    </div>
                    <p id="slug-hint" class="mt-2 text-sm"></p>
                    @error('slug') <p class="mt-1 text-sm text-red-600">{{ $message }}</p> @enderror

                    <p class="mt-2 text-xs text-gray-400">
                        Use lowercase letters, numbers and hyphens. Your school's public website and dashboard will be available on this subdomain.
                    </p>
                </div>

                {{-- School admin --}}
                <div class="border-t border-gray-100 pt-6">
                    <h3 class="text-sm font-semibold text-gray-900">School Admin Account</h3>
                    <p class="mt-1 text-xs text-gray-500">This is the admin who will manage the school's dashboard and website. It is separate from your platform account.</p>

                    <div class="mt-4 space-y-5">
                        <div>
                            <label for="admin_name" class="block text-sm font-medium text-gray-700">Admin name</label>
                            <input type="text" id="admin_name" name="admin_name" value="{{ old('admin_name', $draft['admin_name'] ?? '') }}" required
                                   class="mt-1 block w-full rounded-lg border border-gray-300 px-3 py-2.5 text-sm shadow-sm focus:border-primary-500 focus:outline-none focus:ring-1 focus:ring-primary-500">
                            @error('admin_name') <p class="mt-1 text-sm text-red-600">{{ $message }}</p> @enderror
                        </div>
                        <div>
                            <label for="admin_email" class="block text-sm font-medium text-gray-700">Admin email</label>
                            <input type="email" id="admin_email" name="admin_email" value="{{ old('admin_email', $draft['admin_email'] ?? '') }}" required
                                   class="mt-1 block w-full rounded-lg border border-gray-300 px-3 py-2.5 text-sm shadow-sm focus:border-primary-500 focus:outline-none focus:ring-1 focus:ring-primary-500">
                            @error('admin_email') <p class="mt-1 text-sm text-red-600">{{ $message }}</p> @enderror
                        </div>
                        <div class="grid gap-5 sm:grid-cols-2">
                            <div>
                                <label for="admin_password" class="block text-sm font-medium text-gray-700">Password</label>
                                <input type="password" id="admin_password" name="admin_password" required autocomplete="new-password"
                                       class="mt-1 block w-full rounded-lg border border-gray-300 px-3 py-2.5 text-sm shadow-sm focus:border-primary-500 focus:outline-none focus:ring-1 focus:ring-primary-500">
                                @error('admin_password') <p class="mt-1 text-sm text-red-600">{{ $message }}</p> @enderror
                            </div>
                            <div>
                                <label for="admin_password_confirmation" class="block text-sm font-medium text-gray-700">Confirm password</label>
                                <input type="password" id="admin_password_confirmation" name="admin_password_confirmation" required autocomplete="new-password"
                                       class="mt-1 block w-full rounded-lg border border-gray-300 px-3 py-2.5 text-sm shadow-sm focus:border-primary-500 focus:outline-none focus:ring-1 focus:ring-primary-500">
                            </div>
                        </div>
                    </div>
                </div>

                <div class="flex items-center justify-between pt-2">
                    <a href="{{ route('account.onboarding.step1') }}" class="text-sm font-medium text-gray-500 hover:text-gray-800">Back</a>
                    <button type="submit"
                            class="rounded-lg bg-primary-600 px-6 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 transition-colors">
                        Review
                    </button>
                </div>
            </div>
        </form>
    </div>
</div>

@endsection

@push('scripts')
<script>
(function () {
    const input = document.getElementById('slug');
    const hint = document.getElementById('slug-hint');
    const base = @json('.' . $baseDomain);
    const reserved = @json($reserved);
    let timer = null;

    function normalize(value) {
        return (value || '').toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/^-+|-+$/g, '');
    }

    function render(status, color, msg) {
        hint.textContent = msg;
        hint.className = 'mt-2 text-sm ' + color;
    }

    input.addEventListener('input', function () {
        const val = normalize(input.value);
        input.value = val;
        clearTimeout(timer);

        if (!val) {
            render('idle', 'text-gray-400', 'Enter a subdomain to check availability.');
            return;
        }

        if (val.length < 3) {
            render('idle', 'text-gray-400', 'At least 3 characters.');
            return;
        }

        if (reserved.includes(val)) {
            render('err', 'text-red-600', 'This subdomain is reserved and cannot be used.');
            return;
        }

        render('loading', 'text-gray-500', 'Checking availability' + '&#8230;');

        timer = setTimeout(function () {
            fetch(@json(route('account.slug.check')) + '?slug=' + encodeURIComponent(val))
                .then(function (r) { return r.json(); })
                .then(function (data) {
                    if (data.available) {
                        render('ok', 'text-emerald-600', 'Available — ' + data.subdomain);
                    } else if (data.reserved) {
                        render('err', 'text-red-600', 'This subdomain is reserved and cannot be used.');
                    } else if (data.taken) {
                        render('err', 'text-red-600', 'This subdomain is already taken. Try a different one.');
                    }
                })
                .catch(function () {
                    render('idle', 'text-gray-500', 'Could not check availability. The form will validate it on submit.');
                });
        }, 350);
    });

    if (input.value) input.dispatchEvent(new Event('input'));
})();
</script>
@endpush