@extends('layouts.app')

@section('title', 'Welcome to ' . config('app.name', 'UAE Typing SaaS ERP'))

@section('content')
<div class="max-w-4xl mx-auto space-y-8">

    <!-- Welcome Hero Banner (Requirements 1-3) -->
    <div class="p-8 rounded-3xl bg-gradient-to-r from-slate-950 via-sky-950 to-slate-900 text-white shadow-2xl border border-slate-800 space-y-6">
        <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
            <div>
                <div class="inline-flex items-center space-x-2 rtl:space-x-reverse px-3 py-1 rounded-full bg-sky-500/20 text-sky-300 font-bold text-xs mb-2">
                    <span class="w-2 h-2 rounded-full bg-sky-400 animate-pulse"></span>
                    <span>Guided Tenant Onboarding System</span>
                </div>
                <h1 class="text-3xl font-extrabold tracking-tight">Welcome to {{ config('app.name', 'UAE Typing SaaS ERP') }}</h1>
                <p class="text-sm text-slate-300 mt-1">Let's complete the essential setup for <strong>{{ $tenant->company_name }}</strong> before taking your operations live.</p>
            </div>
            <div class="text-right sm:text-left rtl:sm:text-right">
                <span class="text-xs text-slate-400 block">Subscription Status</span>
                <span class="px-3 py-1 rounded-full bg-emerald-500/20 text-emerald-300 font-bold text-xs uppercase">{{ $tenant->status }}</span>
            </div>
        </div>

        <!-- Setup Progress Bar (Requirement 1, 70) -->
        <div class="space-y-2 bg-slate-900/80 p-5 rounded-2xl border border-slate-700/60">
            <div class="flex items-center justify-between text-xs font-bold">
                <span class="text-slate-300 uppercase tracking-wider">Setup Completion Progress</span>
                <span class="text-sky-400 font-mono text-sm">Setup Progress: {{ $progress['percentage'] }}%</span>
            </div>
            <div class="w-full bg-slate-800 h-3 rounded-full overflow-hidden p-0.5 border border-slate-700">
                <div class="bg-gradient-to-r from-sky-500 to-emerald-400 h-full rounded-full transition-all duration-500" style="width: {{ $progress['percentage'] }}%"></div>
            </div>
            <div class="flex items-center justify-between text-[11px] text-slate-400 pt-1">
                <span>Completed {{ count(array_filter($progress['steps'])) }} of {{ count($progress['steps']) }} Essential Steps</span>
                @if($progress['is_ready_for_go_live'])
                    <span class="text-emerald-400 font-bold">✓ Ready for Go Live!</span>
                @else
                    <span class="text-amber-400 font-bold">Mandatory items pending</span>
                @endif
            </div>
        </div>
    </div>

    <!-- Onboarding Step Checklist Grid (Requirements 3, 70) -->
    <div class="bg-white dark:bg-slate-800 rounded-3xl p-6 border border-slate-200 dark:border-slate-700 shadow-sm space-y-4">
        <div class="flex items-center justify-between border-b border-slate-100 dark:border-slate-700 pb-3">
            <h3 class="text-sm font-bold text-slate-900 dark:text-white uppercase tracking-wider">Onboarding Steps Checklist</h3>
            <span class="text-xs text-slate-400">19 Guided Configuration Items</span>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-2 gap-4 text-xs font-medium">
            <a href="{{ route('app.settings.company.profile') }}" class="p-4 rounded-2xl bg-slate-50 dark:bg-slate-900 border border-slate-200 dark:border-slate-700 flex items-center justify-between hover:border-sky-500 transition-all">
                <div class="flex items-center space-x-3 rtl:space-x-reverse">
                    <div class="w-8 h-8 rounded-xl {{ $progress['steps']['company_profile'] ? 'bg-emerald-500/20 text-emerald-600' : 'bg-amber-500/20 text-amber-600' }} flex items-center justify-center font-bold">
                        1
                    </div>
                    <div>
                        <div class="font-bold text-slate-900 dark:text-white">Company & Legal Profile</div>
                        <div class="text-[11px] text-slate-400">Trade License, TRN, UAE Address</div>
                    </div>
                </div>
                <span class="text-xs font-bold {{ $progress['steps']['company_profile'] ? 'text-emerald-500' : 'text-amber-500' }}">
                    {{ $progress['steps']['company_profile'] ? '✓ Done' : 'Pending' }}
                </span>
            </a>

            <a href="{{ route('app.settings.branches.index') }}" class="p-4 rounded-2xl bg-slate-50 dark:bg-slate-900 border border-slate-200 dark:border-slate-700 flex items-center justify-between hover:border-sky-500 transition-all">
                <div class="flex items-center space-x-3 rtl:space-x-reverse">
                    <div class="w-8 h-8 rounded-xl {{ $progress['steps']['main_branch'] ? 'bg-emerald-500/20 text-emerald-600' : 'bg-amber-500/20 text-amber-600' }} flex items-center justify-center font-bold">
                        2
                    </div>
                    <div>
                        <div class="font-bold text-slate-900 dark:text-white">Branch Setup & Working Hours</div>
                        <div class="text-[11px] text-slate-400">Main Branch, Working Hours 7-day Grid</div>
                    </div>
                </div>
                <span class="text-xs font-bold {{ $progress['steps']['main_branch'] ? 'text-emerald-500' : 'text-amber-500' }}">
                    {{ $progress['steps']['main_branch'] ? '✓ Done' : 'Pending' }}
                </span>
            </a>

            <a href="{{ route('app.employees.index') }}" class="p-4 rounded-2xl bg-slate-50 dark:bg-slate-900 border border-slate-200 dark:border-slate-700 flex items-center justify-between hover:border-sky-500 transition-all">
                <div class="flex items-center space-x-3 rtl:space-x-reverse">
                    <div class="w-8 h-8 rounded-xl {{ $progress['steps']['owner_user'] ? 'bg-emerald-500/20 text-emerald-600' : 'bg-amber-500/20 text-amber-600' }} flex items-center justify-center font-bold">
                        3
                    </div>
                    <div>
                        <div class="font-bold text-slate-900 dark:text-white">Staff Directory & ERP Access</div>
                        <div class="text-[11px] text-slate-400">Employees, Roles, ERP Login Grants</div>
                    </div>
                </div>
                <span class="text-xs font-bold {{ $progress['steps']['owner_user'] ? 'text-emerald-500' : 'text-amber-500' }}">
                    {{ $progress['steps']['owner_user'] ? '✓ Done' : 'Pending' }}
                </span>
            </a>

            <a href="{{ route('app.settings.services.index') }}" class="p-4 rounded-2xl bg-slate-50 dark:bg-slate-900 border border-slate-200 dark:border-slate-700 flex items-center justify-between hover:border-sky-500 transition-all">
                <div class="flex items-center space-x-3 rtl:space-x-reverse">
                    <div class="w-8 h-8 rounded-xl {{ $progress['steps']['services_configured'] ? 'bg-emerald-500/20 text-emerald-600' : 'bg-amber-500/20 text-amber-600' }} flex items-center justify-center font-bold">
                        4
                    </div>
                    <div>
                        <div class="font-bold text-slate-900 dark:text-white">Services Master Catalog</div>
                        <div class="text-[11px] text-slate-400">Gov Fees, Typing Fees, UAE 5% VAT</div>
                    </div>
                </div>
                <span class="text-xs font-bold {{ $progress['steps']['services_configured'] ? 'text-emerald-500' : 'text-amber-500' }}">
                    {{ $progress['steps']['services_configured'] ? '✓ Done' : 'Pending' }}
                </span>
            </a>
        </div>

        <!-- Go Live Action Button (Requirements 71-73) -->
        <div class="pt-6 border-t border-slate-100 dark:border-slate-700 flex flex-col sm:flex-row items-center justify-between gap-4">
            <a href="{{ route('app.dashboard') }}" class="text-xs font-bold text-slate-500 hover:text-slate-700">Skip to Dashboard ➔</a>

            <form action="{{ route('app.onboarding.go_live') }}" method="POST">
                @csrf
                <button type="submit" class="px-8 py-3 bg-gradient-to-r from-emerald-600 to-sky-600 hover:from-emerald-500 hover:to-sky-500 text-white font-extrabold text-xs rounded-2xl shadow-xl transition-all flex items-center space-x-2 rtl:space-x-reverse">
                    <span>🚀 Activate Go Live</span>
                </button>
            </form>
        </div>
    </div>

</div>
@endsection