@extends('admin.install-layout')
@section('title', 'Installation Complete!')
@php $step = 5; @endphp

@section('install-content')
<div class="bg-white rounded-2xl shadow-lg p-8 text-center">

    <!-- Success animation -->
    <div class="w-24 h-24 rounded-full bg-emerald-100 flex items-center justify-center mx-auto mb-6">
        <i class="fas fa-check-circle text-emerald-500 text-5xl"></i>
    </div>

    <h1 class="text-3xl font-bold text-gray-800 mb-2">🎉 Installation Complete!</h1>
    <p class="text-gray-500 mb-8">SurveyEarner has been successfully installed and configured.</p>

    <!-- Credentials box -->
    <div class="bg-gradient-to-r from-purple-50 to-indigo-50 border border-purple-200 rounded-xl p-6 mb-8 text-left">
        <h3 class="font-bold text-purple-800 mb-4 flex items-center text-lg">
            <i class="fas fa-key mr-2 text-yellow-500"></i> Your Login Credentials
        </h3>

        <div class="space-y-3">
            <div class="flex items-center justify-between bg-white rounded-lg p-3 border border-purple-100">
                <span class="text-gray-600 text-sm font-medium"><i class="fas fa-user-shield mr-2 text-purple-400"></i>Admin Panel</span>
                <a href="{{ route('admin.login') }}" class="text-purple-600 text-sm hover:underline font-mono">/admin/login</a>
            </div>
            <div class="flex items-center justify-between bg-white rounded-lg p-3 border border-purple-100">
                <span class="text-gray-600 text-sm font-medium"><i class="fas fa-envelope mr-2 text-blue-400"></i>Email</span>
                <span class="font-mono text-gray-800 text-sm bg-gray-100 px-3 py-1 rounded select-all">{{ $adminEmail }}</span>
            </div>
            <div class="flex items-center justify-between bg-white rounded-lg p-3 border border-purple-100">
                <span class="text-gray-600 text-sm font-medium"><i class="fas fa-lock mr-2 text-red-400"></i>Password</span>
                <span class="font-mono text-gray-800 text-sm bg-gray-100 px-3 py-1 rounded select-all">{{ $adminPassword }}</span>
            </div>
        </div>

        <p class="text-amber-700 text-xs mt-4 bg-amber-50 border border-amber-200 rounded-lg p-3">
            <i class="fas fa-exclamation-triangle mr-1"></i>
            <strong>Save these credentials now.</strong> This is the only time your plain-text password is shown.
        </p>
    </div>

    <!-- Demo accounts -->
    <div class="bg-gray-50 border border-gray-200 rounded-xl p-5 mb-8 text-left">
        <h3 class="font-semibold text-gray-700 mb-3 flex items-center">
            <i class="fas fa-users mr-2 text-gray-400"></i> Demo User Accounts (from seeder)
        </h3>
        <div class="grid grid-cols-1 md:grid-cols-2 gap-3 text-sm">
            <div class="bg-white rounded-lg p-3 border border-gray-100">
                <p class="font-medium text-gray-700">John Doe</p>
                <p class="text-gray-500 font-mono">john@example.com</p>
                <p class="text-gray-500 font-mono">password</p>
            </div>
            <div class="bg-white rounded-lg p-3 border border-gray-100">
                <p class="font-medium text-gray-700">Jane Smith</p>
                <p class="text-gray-500 font-mono">jane@example.com</p>
                <p class="text-gray-500 font-mono">password</p>
            </div>
        </div>
    </div>

    <!-- Action Buttons -->
    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
        <a href="{{ route('admin.login') }}"
            class="block bg-gradient-to-r from-purple-600 to-indigo-600 text-white py-3 px-6 rounded-xl font-semibold hover:from-purple-700 hover:to-indigo-700 transition">
            <i class="fas fa-user-shield mr-2"></i> Go to Admin Panel
        </a>
        <a href="{{ route('home') }}"
            class="block bg-gradient-to-r from-gray-100 to-gray-200 text-gray-700 py-3 px-6 rounded-xl font-semibold hover:from-gray-200 hover:to-gray-300 transition">
            <i class="fas fa-home mr-2"></i> Visit Website
        </a>
    </div>

    <p class="text-xs text-gray-400 mt-6">
        The installer is now locked. Visiting <code>/install</code> will redirect to the homepage.
    </p>
</div>
@endsection