@extends('layouts.auth')

@section('title', 'Accept Invitation - ' . setting('brand.name', 'Grace Family Church'))

@section('content')
<div class="login-container">

    <div class="login-split-card">

        <!-- LEFT: Brand panel -->
        <div class="login-brand-panel d-none d-lg-flex">
            <div class="login-brand-logo">
                <img src="{{ asset('assets/images/gfc_logo_light.jpg') }}" alt="{{ setting('brand.name', 'Grace Family Church') }} logo">
            </div>
            <h2 class="login-brand-name">{{ setting('brand.name', 'Grace Family Church') }}</h2>
            <p class="login-brand-tagline">You've been invited to join the admin team. Set your password to get started.</p>
        </div>

        <!-- RIGHT: Accept form -->
        <div class="login-form-panel">
          <div class="login-form-inner">

            @if(is_null($invitation))
                <div class="text-center">
                    <div class="login-icon mx-auto"><i class="fas fa-triangle-exclamation"></i></div>
                    <h3>Invitation Invalid</h3>
                    <p class="login-subtitle mb-4">This invitation link is invalid, has expired, or has already been used.</p>
                    <a href="{{ route('admin.login') }}" class="btn btn-login w-100"><i class="fas fa-arrow-left me-1"></i> Go to Login</a>
                </div>
            @else
                <div class="text-center mb-4">
                    <div class="login-icon mx-auto d-lg-none"><i class="fas fa-user-plus"></i></div>
                    <h3>Accept Your Invitation</h3>
                    <p class="login-subtitle">You're joining as <strong>{{ str_replace('_',' ',$invitation->role) }}</strong> with <strong>{{ $invitation->email }}</strong>.</p>
                </div>

                @include('partials.alerts')

                <form method="POST" action="{{ route('admin.invite.accept.submit', $token) }}">
                    @csrf
                    <div class="mb-3">
                        <label class="form-label">Your Name</label>
                        <input type="text" name="name" class="form-control @error('name') is-invalid @enderror" placeholder="Enter your full name" value="{{ old('name', $invitation->name) }}" required autofocus>
                        @error('name')<div class="invalid-feedback">{{ $message }}</div>@enderror
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Create Password</label>
                        <input type="password" name="password" class="form-control @error('password') is-invalid @enderror" placeholder="At least 8 characters" required>
                        @error('password')<div class="invalid-feedback">{{ $message }}</div>@enderror
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Confirm Password</label>
                        <input type="password" name="password_confirmation" class="form-control" placeholder="Re-enter your password" required>
                    </div>
                    <button type="submit" class="btn btn-login w-100"><i class="fas fa-check me-1"></i> Create My Account</button>
                </form>
            @endif

          </div>
        </div>

    </div>
</div>
@endsection