@extends('layouts.app')

@section('title', 'Account Security')

@section('content')
<x-page-header title="Account Security" subtitle="Manage email OTP two-factor authentication for your login" icon="shield" icon-color="violet" />

@if (!empty($company?->company_number))
    <div class="max-w-xl mb-6">
        @include('partials.company-number', ['company' => $company])
    </div>
@endif

<div class="max-w-xl glass-card p-6 space-y-6 animate-slide-up">
    <div>
        <p class="text-sm text-themed-muted">Effective policy: <span class="text-themed font-medium">{{ $policy }}</span></p>
        <p class="text-sm text-themed-muted mt-1">
            Status:
            @if ($user->two_factor_enabled)
                <span class="text-emerald-400 font-medium">Enabled</span>
            @else
                <span class="text-amber-400 font-medium">Disabled</span>
            @endif
        </p>
    </div>

    @if ($canEnable)
        <form method="POST" action="{{ route('account.security.enable') }}">
            @csrf
            <button type="submit" class="btn-primary">Enable email OTP 2FA</button>
        </form>
    @endif

    @if ($canDisable)
        <div class="space-y-4 border-t border-themed pt-6">
            <form method="POST" action="{{ route('account.security.send-code') }}" class="mb-4">
                @csrf
                <button type="submit" class="btn-secondary btn-sm">Send verification code to email</button>
            </form>

            <form method="POST" action="{{ route('account.security.disable') }}" class="space-y-4">
                @csrf
                <div>
                    <label class="field-label" for="password">Password</label>
                    <input id="password" type="password" name="password" required class="field-input">
                    @error('password')<p class="text-red-400 text-sm mt-1">{{ $message }}</p>@enderror
                </div>
                <div>
                    <label class="field-label" for="code">Email OTP code</label>
                    <input id="code" type="text" name="code" required inputmode="numeric" autocomplete="one-time-code" class="field-input" placeholder="6-digit code">
                    @error('code')<p class="text-red-400 text-sm mt-1">{{ $message }}</p>@enderror
                </div>
                <button type="submit" class="btn-danger">Disable 2FA</button>
            </form>
        </div>
    @endif

    @error('two_factor')
        <p class="text-red-400 text-sm">{{ $message }}</p>
    @enderror
</div>
@endsection