@extends('layouts.auth')

@section('content')
<div class="form-card">
    <h2 class="fw-medium">{{ __('Welcome, '.explode(' ', $preReg->name)[0]) }}</h2>
    <p class="text-muted">{{'Complete registration to activate your account'}}</p>
    <form method="POST" action="{{ route('register.complete', $preReg->token) }}">
        @csrf
        <div class="row">
            <div class="col-lg-12">
                <div class="app-form-input">
                    <label class="text-muted mb-2 fw-medium">{{'Email'}}</label>
                    <input class="form-control bg-transparent" type="text" value="{{ mask_email($preReg->email) }}" disabled>
                </div>
            </div>
            <div class="col-lg-12">
                <div class="app-form-input">
                    <label class="text-muted mb-2 fw-medium">{{'Password'}}</label>
                    <input class="form-control" type="password" name="password" required>
                </div>
            </div>
            <div class="col-lg-12">
                <div class="app-form-input">
                    <label class="text-muted mb-2 fw-medium">{{'Confirm Password'}}</label>
                    <input class="form-control" type="password" name="password_confirmation" required>
                </div>
            </div>
            <div class="col-lg-12">
                <div class="alert alert-info">
                    <p class="small m-0">
                        {{ __('By completing your registration, you agree to our') }}
                        <a href="#" class="fw-medium" target="_blank">{{ __('Terms of Service') }}</a>
                        {{ __('and') }}
                        <a href="#" class="fw-medium" target="_blank">{{ __('Privacy Policy') }}</a>.
                    </p>
                </div>
            </div>
            <div class="col-lg-12">
                <div class="d-md-flex gap-4 justify-content-end align-items-center">
                    <a class="text-primary small" href="{{url('/')}}">{{ 'Back to home' }}</a>
                    <button class="btn auth-btn text-white d-flex align-items-center gap-2" type="submit">
                        {{'Complete'}}
                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" color="#000000" fill="none">
                            <path d="M20.0001 11.9998L4.00012 11.9998" stroke="#141B34" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
                            <path d="M15.0003 17C15.0003 17 20.0002 13.3176 20.0002 12C20.0002 10.6824 15.0002 7 15.0002 7" stroke="#141B34" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
                        </svg>
                    </button>
                </div>
            </div>
        </div>
    </form>
</div>
@endsection