@extends('install.layout', ['currentStep' => 4])

@section('title', 'Create Administrator')

@section('content')
<div class="p-8 flex flex-col flex-1">

    {{-- ── Step header ── --}}
    <div class="mb-7">
        <h2 class="text-xl font-bold text-slate-800">Create Administrator Account</h2>
        <p class="text-sm text-slate-500 mt-1">
            This creates your first <strong>tenant</strong> (the operator/company) and its
            <strong>super admin</strong> user. You'll use these credentials to log in to the dashboard.
        </p>
    </div>

    {{-- ── Account creation error ── --}}
    @error('admin_account')
        <div class="mb-5 flex items-start gap-3 px-4 py-3 bg-red-50 border border-red-200 rounded-xl">
            <svg class="w-5 h-5 text-red-500 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
            </svg>
            <div>
                <p class="text-sm font-semibold text-red-700">Could not create account</p>
                <p class="text-sm text-red-600 mt-0.5">{{ $message }}</p>
            </div>
        </div>
    @enderror

    <form method="POST" action="{{ route('install.admin') }}">
        @csrf

        {{-- ── Section: Tenant / Company ── --}}
        <div class="mb-7">
            <h3 class="text-xs font-semibold text-slate-400 uppercase tracking-widest mb-3">
                Tenant (your company / operator)
            </h3>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-5">

                {{-- Tenant name --}}
                <div>
                    <label class="block text-sm font-medium text-slate-700 mb-1.5" for="tenant_name">
                        Company Name
                    </label>
                    <input id="tenant_name" name="tenant_name" type="text"
                           value="{{ old('tenant_name') }}"
                           placeholder="Acme WiFi Services"
                           class="w-full px-3.5 py-2.5 text-sm border rounded-xl bg-white text-slate-800 placeholder-slate-400
                                  focus:outline-none focus:ring-2 focus:ring-brand-500 focus:border-transparent
                                  @error('tenant_name') border-red-400 bg-red-50 @else border-slate-200 @enderror">
                    @error('tenant_name')
                        <p class="mt-1 text-xs text-red-600">{{ $message }}</p>
                    @enderror
                </div>

                {{-- Tenant slug --}}
                <div>
                    <label class="block text-sm font-medium text-slate-700 mb-1.5" for="tenant_slug">
                        Slug
                        <span class="text-slate-400 font-normal">(lowercase letters, numbers, hyphens)</span>
                    </label>
                    <div class="relative">
                        <input id="tenant_slug" name="tenant_slug" type="text"
                               value="{{ old('tenant_slug', $suggestedSlug) }}"
                               placeholder="acme-wifi"
                               class="w-full px-3.5 py-2.5 text-sm border rounded-xl bg-white text-slate-800 font-mono placeholder-slate-400
                                      focus:outline-none focus:ring-2 focus:ring-brand-500 focus:border-transparent
                                      @error('tenant_slug') border-red-400 bg-red-50 @else border-slate-200 @enderror">
                    </div>
                    @error('tenant_slug')
                        <p class="mt-1 text-xs text-red-600">{{ $message }}</p>
                    @enderror
                    <p class="mt-1 text-xs text-slate-400">
                        Used as <code class="font-mono">X-Tenant-Slug</code> header for API calls.
                    </p>
                </div>
            </div>
        </div>

        {{-- ── Section: Admin user ── --}}
        <div class="mb-7">
            <h3 class="text-xs font-semibold text-slate-400 uppercase tracking-widest mb-3">
                Super Admin User
            </h3>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-5">

                {{-- Admin name --}}
                <div>
                    <label class="block text-sm font-medium text-slate-700 mb-1.5" for="admin_name">
                        Full Name
                    </label>
                    <input id="admin_name" name="admin_name" type="text"
                           value="{{ old('admin_name') }}"
                           placeholder="John Doe"
                           class="w-full px-3.5 py-2.5 text-sm border rounded-xl bg-white text-slate-800 placeholder-slate-400
                                  focus:outline-none focus:ring-2 focus:ring-brand-500 focus:border-transparent
                                  @error('admin_name') border-red-400 bg-red-50 @else border-slate-200 @enderror">
                    @error('admin_name')
                        <p class="mt-1 text-xs text-red-600">{{ $message }}</p>
                    @enderror
                </div>

                {{-- Admin email --}}
                <div>
                    <label class="block text-sm font-medium text-slate-700 mb-1.5" for="admin_email">
                        Email Address
                    </label>
                    <input id="admin_email" name="admin_email" type="email"
                           value="{{ old('admin_email') }}"
                           placeholder="admin@example.com"
                           class="w-full px-3.5 py-2.5 text-sm border rounded-xl bg-white text-slate-800 placeholder-slate-400
                                  focus:outline-none focus:ring-2 focus:ring-brand-500 focus:border-transparent
                                  @error('admin_email') border-red-400 bg-red-50 @else border-slate-200 @enderror">
                    @error('admin_email')
                        <p class="mt-1 text-xs text-red-600">{{ $message }}</p>
                    @enderror
                </div>

                {{-- Password --}}
                <div>
                    <label class="block text-sm font-medium text-slate-700 mb-1.5" for="admin_password">
                        Password
                        <span class="text-slate-400 font-normal">(min. 8 characters)</span>
                    </label>
                    <input id="admin_password" name="admin_password" type="password"
                           placeholder="••••••••"
                           class="w-full px-3.5 py-2.5 text-sm border rounded-xl bg-white text-slate-800 placeholder-slate-400
                                  focus:outline-none focus:ring-2 focus:ring-brand-500 focus:border-transparent
                                  @error('admin_password') border-red-400 bg-red-50 @else border-slate-200 @enderror">
                    @error('admin_password')
                        <p class="mt-1 text-xs text-red-600">{{ $message }}</p>
                    @enderror
                </div>

                {{-- Confirm password --}}
                <div>
                    <label class="block text-sm font-medium text-slate-700 mb-1.5" for="admin_password_confirmation">
                        Confirm Password
                    </label>
                    <input id="admin_password_confirmation" name="admin_password_confirmation" type="password"
                           placeholder="••••••••"
                           class="w-full px-3.5 py-2.5 text-sm border border-slate-200 rounded-xl bg-white text-slate-800 placeholder-slate-400
                                  focus:outline-none focus:ring-2 focus:ring-brand-500 focus:border-transparent">
                </div>
            </div>
        </div>

        {{-- ── Actions ── --}}
        <div class="mt-auto pt-6 border-t border-slate-100 flex items-center justify-between">
            <a href="{{ route('install.migrate') }}"
               class="text-sm text-slate-500 hover:text-slate-700 flex items-center gap-1.5">
                <svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M15 19l-7-7 7-7"/>
                </svg>
                Back
            </a>

            <button type="submit"
                    class="inline-flex items-center gap-2 px-6 py-2.5 bg-brand-600 text-white text-sm font-semibold rounded-xl hover:bg-brand-700 transition-colors shadow-sm">
                <svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/>
                </svg>
                Create Account &amp; Finalize
            </button>
        </div>
    </form>
</div>
@endsection

@push('scripts')
<script>
// Auto-generate slug from company name
document.getElementById('tenant_name').addEventListener('input', function () {
    const slugField = document.getElementById('tenant_slug');
    // Only auto-fill if the user hasn't manually edited the slug
    if (slugField.dataset.manual === 'true') return;

    slugField.value = this.value
        .toLowerCase()
        .replace(/[^a-z0-9\s-]/g, '')
        .trim()
        .replace(/[\s_]+/g, '-')
        .replace(/-+/g, '-')
        .replace(/^-+|-+$/g, '');
});

document.getElementById('tenant_slug').addEventListener('input', function () {
    this.dataset.manual = 'true';
    // Sanitise while typing: allow only [a-z0-9-]
    this.value = this.value
        .toLowerCase()
        .replace(/[^a-z0-9-]/g, '');
});
</script>
@endpush