@extends('vendor.installer.layouts.master')

@section('template_title', trans('installer_messages.final.templateTitle'))

@section('title')
    <span class="inline-flex items-center gap-3"><i class="fa-solid fa-flag-checkered text-brand-600"></i> {{ trans('installer_messages.final.title') }}</span>
@endsection

@section('subtitle', 'Your GCXpass installation is ready. Here’s what to do next.')

@section('container')
    <div class="space-y-6">
        <div class="flex items-start gap-4 rounded-xl p-4 bg-emerald-50 border border-emerald-200 text-emerald-900 dark:bg-emerald-500/10 dark:border-emerald-500/30 dark:text-emerald-200">
            <div class="w-10 h-10 rounded-full bg-emerald-500 text-white grid place-items-center shrink-0">
                <i class="fa-solid fa-check text-lg"></i>
            </div>
            <div>
                <div class="font-bold">Installation complete.</div>
                <p class="text-sm opacity-90 mt-0.5">Log in with the administrator account you created during the wizard.</p>
            </div>
        </div>

        <div class="grid sm:grid-cols-2 gap-4">
            <a href="{{ asset('docs/installation.html') }}" target="_blank" class="card p-5 hover:shadow-md transition group">
                <div class="flex items-center gap-3 mb-2">
                    <div class="w-9 h-9 rounded-lg bg-brand-50 dark:bg-brand-900/40 text-brand-600 grid place-items-center"><i class="fa-solid fa-book"></i></div>
                    <div class="font-semibold text-ink-900 dark:text-white">Installation Guide</div>
                </div>
                <p class="text-sm text-gray-500 dark:text-gray-400">Requirements, deploy paths, the 14-point health check and troubleshooting.</p>
                <div class="mt-3 text-xs text-brand-600 font-semibold inline-flex items-center gap-1">Open <i class="fa-solid fa-arrow-up-right-from-square"></i></div>
            </a>
            <a href="{{ asset('docs/user-guide.html') }}" target="_blank" class="card p-5 hover:shadow-md transition group">
                <div class="flex items-center gap-3 mb-2">
                    <div class="w-9 h-9 rounded-lg bg-brand-50 dark:bg-brand-900/40 text-brand-600 grid place-items-center"><i class="fa-solid fa-circle-question"></i></div>
                    <div class="font-semibold text-ink-900 dark:text-white">User Guide</div>
                </div>
                <p class="text-sm text-gray-500 dark:text-gray-400">Reception, employees, pre-registration, QR & badges, reports and shortcuts.</p>
                <div class="mt-3 text-xs text-brand-600 font-semibold inline-flex items-center gap-1">Open <i class="fa-solid fa-arrow-up-right-from-square"></i></div>
            </a>
        </div>

        <div class="flex flex-wrap items-center justify-between gap-2 pt-2">
            <a href="{{ url('/') }}" class="btn-ghost"><i class="fa-solid fa-house"></i> {{ trans('installer_messages.final.exit') }}</a>
            <a href="{{ url('/admin/login') }}" class="btn-primary">Go to admin login <i class="fa-solid fa-arrow-right"></i></a>
        </div>
    </div>
@endsection