@extends('layouts.auth')
@section('title', 'Create Your PIN')

@section('auth-top')
<div class="auth-right-top">
    <span>Already have an account?</span>
    <a href="{{ route('login') }}" class="btn btn-accent btn-sm">Login</a>
    <a href="mailto:hello@feespay.ng" class="btn btn-ghost btn-sm">
        <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="none"
            stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
            <circle cx="12" cy="12" r="10"/>
            <path d="M9.09 9a3 3 0 015.83 1c0 2-3 3-3 3"/>
            <line x1="12" y1="17" x2="12.01" y2="17"/>
        </svg>
        Support
    </a>
</div>
@endsection

@section('content')
@if(session('otp_verified'))
<div class="alert alert-success" style="margin-bottom:20px">
    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none"
        stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24">
        <polyline points="20 6 9 17 4 12"/>
    </svg>
    Account Verified. Kindly Set Your Pass PIN
</div>
@endif

<a href="#" class="auth-back" style="pointer-events:none; opacity:0.4">
    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none"
        stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
        <line x1="19" y1="12" x2="5" y2="12"/><polyline points="12 19 5 12 12 5"/>
    </svg>
    Back
</a>

<h1>Let's finish things up.</h1>
<p class="auth-sub">Please create a 6-digit access/login PIN</p>

@if($errors->any())
<div class="alert alert-error" id="pin_error">{{ $errors->first() }}</div>
@endif

<form action="{{ route('register.pin.post') }}" method="POST" id="pin_form">
    @csrf
    <input type="hidden" name="uid" value="{{ $uid }}">

    <div class="form-group">
        <div class="input-icon-wrap">
            <input type="password" name="pin" id="pin"
                class="form-control @error('pin') is-invalid @enderror"
                placeholder="PIN" maxlength="6" minlength="6"
                inputmode="numeric" pattern="\d{6}" required>
            <span class="input-icon pin-toggle" data-target="pin">
                <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="none"
                    stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                    <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/>
                    <circle cx="12" cy="12" r="3"/>
                </svg>
            </span>
        </div>
        @error('pin')<div class="invalid-feedback">{{ $message }}</div>@enderror
    </div>

    <div class="form-group">
        <div class="input-icon-wrap">
            <input type="password" name="pin_confirmation" id="pin_confirm"
                class="form-control @error('pin_confirmation') is-invalid @enderror"
                placeholder="Confirm PIN" maxlength="6" minlength="6"
                inputmode="numeric" pattern="\d{6}" required>
            <span class="input-icon pin-toggle" data-target="pin_confirm">
                <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="none"
                    stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                    <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/>
                    <circle cx="12" cy="12" r="3"/>
                </svg>
            </span>
        </div>
        @error('pin_confirmation')<div class="invalid-feedback">{{ $message }}</div>@enderror
    </div>

    <p style="font-size:0.78rem; color:var(--text-light); margin-bottom:20px">
        Hint: PIN must be 6 digits
    </p>

    <button type="submit" class="btn btn-accent btn-full">Submit</button>
</form>
@endsection

{{-- Success modal shown after successful PIN creation --}}
@if(session('registration_success'))
@push('scripts')
<div class="modal-overlay auto-open" id="success_modal">
    <div class="modal" style="text-align:center; max-width:420px">
        <div class="success-icon">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
                <polyline points="20 6 9 17 4 12"/>
            </svg>
        </div>
        <h2 style="font-size:1.1rem; margin-bottom:8px">Registration successful!</h2>
        <p style="font-size:0.85rem; color:var(--text-mid); margin-bottom:20px">
            Use your phone number and the PIN you created to access your account
        </p>
        <a href="{{ route('login') }}" class="btn btn-accent btn-full">Proceed to Login</a>
    </div>
</div>
@endpush
@endif