@extends('install.layout')

@section('content')
    <h1>Create Super Admin</h1>
    <p>Step 3: Create the first admin account for Lakhsman Wellness Pvt. Ltd.</p>

    <form method="post" action="{{ route('install.admin.store') }}">
        @csrf
        <div class="row">
            <div>
                <label for="name">Admin Name</label>
                <input id="name" name="name" value="{{ old('name') }}" required>
            </div>
            <div>
                <label for="mobile">Mobile</label>
                <input id="mobile" name="mobile" value="{{ old('mobile') }}" required>
            </div>
        </div>

        <label for="admin_slug">Admin Slug (login URL)</label>
        <input id="admin_slug" name="admin_slug" value="{{ old('admin_slug', 'admin') }}" required>
        <p class="note">Only letters, numbers, and dashes. We auto-format. URL: /<span id="admin-slug-preview">{{ old('admin_slug', 'admin') }}</span></p>

        <label for="email">Email</label>
        <input id="email" name="email" type="email" value="{{ old('email') }}" required>

        <div class="row">
            <div>
                <label for="password">Password</label>
                <input id="password" name="password" type="password" required>
            </div>
            <div>
                <label for="password_confirmation">Confirm Password</label>
                <input id="password_confirmation" name="password_confirmation" type="password" required>
            </div>
        </div>

        <div class="actions">
            <button type="submit" class="btn btn-primary">Create Admin</button>
            <a href="{{ route('install.database') }}" class="btn btn-outline">Back</a>
        </div>
    </form>

    <script>
        (function () {
            const input = document.getElementById('admin_slug');
            const preview = document.getElementById('admin-slug-preview');
            if (!input || !preview) {
                return;
            }
            const slugify = (value) => {
                return value
                    .toString()
                    .toLowerCase()
                    .trim()
                    .replace(/[_\\s]+/g, '-')
                    .replace(/[^a-z0-9-]/g, '')
                    .replace(/-+/g, '-')
                    .replace(/^-+|-+$/g, '');
            };

            const updatePreview = () => {
                const value = slugify(input.value);
                preview.textContent = value || 'admin';
            };
            input.addEventListener('input', updatePreview);
            input.addEventListener('blur', () => {
                const value = slugify(input.value);
                input.value = value || 'admin';
                preview.textContent = input.value;
            });
            updatePreview();
        })();
    </script>
@endsection