@extends('layouts.site')

@section('title', 'Complete Your Submission — Register or Login')
@section('meta-description', 'Create a Contributor account or log in to finalise your research publication submission.')

@section('content')

{{-- ── Hero ──────────────────────────────────────────────────────────────── --}}
<div class="bg-gradient-to-r from-indigo-700 to-purple-700 shadow-lg">
    <div class="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8 py-12 text-center">
        <div class="inline-flex items-center justify-center w-16 h-16 rounded-full bg-white/20 mb-4">
            <i class="fas fa-user-check text-white text-2xl"></i>
        </div>
        <h1 class="text-3xl font-bold text-white font-serif mb-3">One Last Step</h1>
        <p class="text-indigo-100 text-lg">
            Your research details have been saved. To finalise your submission, please register as a
            Contributor or log in to your existing account.
        </p>
    </div>
</div>

{{-- ── Breadcrumb ───────────────────────────────────────────────────────── --}}
<div class="bg-gray-50 border-b border-gray-200">
    <div class="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8 py-3">
        <nav class="flex items-center space-x-2 text-sm text-gray-600" aria-label="Breadcrumb">
            <a href="{{ url('/') }}" class="hover:text-indigo-600 transition flex items-center">
                <i class="fas fa-home mr-1"></i>Home
            </a>
            <i class="fas fa-chevron-right text-gray-400 text-xs"></i>
            <a href="{{ route('research.public.index') }}" class="hover:text-indigo-600 transition">Research</a>
            <i class="fas fa-chevron-right text-gray-400 text-xs"></i>
            <a href="{{ route('research.public.submit') }}" class="hover:text-indigo-600 transition">Submit</a>
            <i class="fas fa-chevron-right text-gray-400 text-xs"></i>
            <span class="text-gray-900 font-medium">Authenticate</span>
        </nav>
    </div>
</div>

{{-- ── Main Content ─────────────────────────────────────────────────────── --}}
<div class="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8 py-12">

    {{-- Flash messages --}}
    @if(session('info'))
    <div class="mb-6 flex items-center gap-3 bg-blue-50 border border-blue-200 text-blue-800 rounded-xl px-5 py-4">
        <i class="fas fa-info-circle text-blue-500 flex-shrink-0"></i>
        <span class="text-sm">{{ session('info') }}</span>
    </div>
    @endif

    @if(session('warning'))
    <div class="mb-6 flex items-center gap-3 bg-amber-50 border border-amber-200 text-amber-800 rounded-xl px-5 py-4">
        <i class="fas fa-exclamation-triangle text-amber-500 flex-shrink-0"></i>
        <span class="text-sm">{{ session('warning') }}</span>
    </div>
    @endif

    {{-- Session expiry notice --}}
    <div class="mb-6 flex items-center gap-3 bg-gray-50 border border-gray-200 text-gray-600 rounded-xl px-5 py-3">
        <i class="fas fa-clock text-gray-400 flex-shrink-0"></i>
        <span class="text-xs">Your submission details are saved for this session. Complete registration or login within <strong>2 hours</strong> to avoid losing your work.</span>
    </div>

    {{-- Saved submission summary --}}
    @if(session('pending_publication'))
    @php $pending = session('pending_publication'); @endphp
    <div class="bg-indigo-50 border border-indigo-200 rounded-2xl p-5 mb-8">
        <h3 class="text-sm font-bold text-indigo-800 mb-3 flex items-center gap-2">
            <i class="fas fa-clipboard-check"></i> Your Saved Submission
        </h3>
        <div class="space-y-2 text-sm">
            <div class="flex gap-3">
                <span class="text-indigo-600 w-24 flex-shrink-0 font-medium">Title</span>
                <span class="text-indigo-900">{{ $pending['title'] ?? '—' }}</span>
            </div>
            <div class="flex gap-3">
                <span class="text-indigo-600 w-24 flex-shrink-0 font-medium">Category</span>
                <span class="text-indigo-900 capitalize">{{ $pending['category'] ?? '—' }}</span>
            </div>
            @if(!empty($pending['full_paper_name']))
            <div class="flex gap-3">
                <span class="text-indigo-600 w-24 flex-shrink-0 font-medium">Paper</span>
                <span class="text-indigo-900 flex items-center gap-1.5">
                    <i class="fas fa-file-pdf text-indigo-500"></i>
                    {{ $pending['full_paper_name'] }}
                </span>
            </div>
            @endif
        </div>
    </div>
    @endif

    {{-- Two-column choice --}}
    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">

        {{-- Option A: Register as Contributor --}}
        <div class="bg-white rounded-2xl shadow-sm border-2 border-indigo-200 p-8 flex flex-col">
            <div class="w-14 h-14 rounded-2xl bg-indigo-100 flex items-center justify-center mb-5">
                <i class="fas fa-user-plus text-indigo-600 text-2xl"></i>
            </div>
            <h2 class="text-xl font-bold text-gray-900 mb-2">New to SSHIA?</h2>
            <p class="text-gray-600 text-sm mb-6 flex-1">
                Create a free Contributor account in minutes. Your submission will be automatically
                linked to your new account once registration is complete.
            </p>
            <ul class="space-y-2 text-sm text-gray-600 mb-6">
                <li class="flex items-center gap-2"><i class="fas fa-check-circle text-indigo-500"></i> Free account, instant access</li>
                <li class="flex items-center gap-2"><i class="fas fa-check-circle text-indigo-500"></i> Track your submission status</li>
                <li class="flex items-center gap-2"><i class="fas fa-check-circle text-indigo-500"></i> Submit future publications easily</li>
                <li class="flex items-center gap-2"><i class="fas fa-check-circle text-indigo-500"></i> Engage with the research community</li>
            </ul>
            <a href="{{ route('register.role.contributor') }}"
               class="block w-full text-center px-6 py-3 bg-indigo-600 text-white rounded-xl font-semibold hover:bg-indigo-700 transition shadow-sm">
                <i class="fas fa-user-plus mr-2"></i>
                Register as Contributor
            </a>
        </div>

        {{-- Option B: Login --}}
        <div class="bg-white rounded-2xl shadow-sm border border-gray-200 p-8 flex flex-col">
            <div class="w-14 h-14 rounded-2xl bg-gray-100 flex items-center justify-center mb-5">
                <i class="fas fa-sign-in-alt text-gray-600 text-2xl"></i>
            </div>
            <h2 class="text-xl font-bold text-gray-900 mb-2">Already a Member?</h2>
            <p class="text-gray-600 text-sm mb-6 flex-1">
                Log in to your existing SSHIA account. Your saved submission will be automatically
                attached to your account after you sign in.
            </p>
            <ul class="space-y-2 text-sm text-gray-600 mb-6">
                <li class="flex items-center gap-2"><i class="fas fa-check-circle text-gray-400"></i> Use your existing credentials</li>
                <li class="flex items-center gap-2"><i class="fas fa-check-circle text-gray-400"></i> Submission linked automatically</li>
                <li class="flex items-center gap-2"><i class="fas fa-check-circle text-gray-400"></i> Access your full dashboard</li>
                <li class="flex items-center gap-2"><i class="fas fa-check-circle text-gray-400"></i> Manage all your publications</li>
            </ul>
            <a href="{{ route('login.role', 'contributor') }}"
               class="block w-full text-center px-6 py-3 bg-gray-800 text-white rounded-xl font-semibold hover:bg-gray-900 transition shadow-sm">
                <i class="fas fa-sign-in-alt mr-2"></i>
                Log In to Your Account
            </a>
        </div>
    </div>

    {{-- Go back link --}}
    <div class="text-center mt-8">
        <a href="{{ route('research.public.submit') }}"
           class="text-sm text-gray-500 hover:text-indigo-600 transition inline-flex items-center gap-1.5">
            <i class="fas fa-arrow-left text-xs"></i>
            Go back and edit your submission
        </a>
    </div>

</div>

@endsection
