@extends('layouts.main_dashboard.app')

@section('title', __('dashboard.Two-Factor Authentication'))
@section('page_heading', __('dashboard.Two-Factor Authentication'))

@section('breadcrumb')
    @php
        $homeRoute = match (auth()->user()?->type) {
            'teacher' => route('teacher.home'),
            'staff'   => route('admin.home'),
            default   => route('admin.home'),
        };
    @endphp
    <li class="breadcrumb-item text-muted">
        <a href="{{ $homeRoute }}" class="text-muted text-hover-primary">{{ __('dashboard.Home') }}</a>
    </li>
    <li class="breadcrumb-item"><span class="bullet bg-gray-500 w-5px h-2px"></span></li>
    <li class="breadcrumb-item text-muted">
        <a href="{{ route('profile.edit') }}" class="text-muted text-hover-primary">{{ __('dashboard.Profile') }}</a>
    </li>
    <li class="breadcrumb-item"><span class="bullet bg-gray-500 w-5px h-2px"></span></li>
    <li class="breadcrumb-item text-muted">{{ __('dashboard.Two-Factor Authentication') }}</li>
@endsection

@section('content')
<div class="app-content flex-column-fluid">
    <div class="app-container container-fluid">
        <div class="row justify-content-center">
            <div class="col-xl-6 col-lg-8">

                @if (session('success'))
                    <div class="alert alert-success d-flex align-items-center mb-6">
                        <i class="ki-outline ki-shield-tick fs-2 me-3"></i>
                        <span>{{ session('success') }}</span>
                    </div>
                @endif

                <div class="card card-flush">
                    <div class="card-header pt-7">
                        <div class="card-title">
                            <i class="ki-outline ki-shield-cross fs-1 me-2"></i>
                            <h2>{{ __('dashboard.Two-Factor Authentication') }}</h2>
                        </div>
                        <div class="card-toolbar">
                            @if ($enabled)
                                <span class="badge badge-light-success fs-7 fw-bold">{{ __('dashboard.Enabled') }}</span>
                            @else
                                <span class="badge badge-light-danger fs-7 fw-bold">{{ __('dashboard.Disabled') }}</span>
                            @endif
                        </div>
                    </div>

                    <div class="card-body pt-5">

                        @unless ($enabled)
                            {{-- Setup: show QR code --}}
                            <div class="mb-8">
                                <p class="text-gray-600 fs-6 mb-5">
                                    {{ __('dashboard.Scan the QR code below with your authenticator app (Google Authenticator, Authy, etc.), then enter the 6-digit code to activate.') }}
                                </p>

                                <div class="d-flex justify-content-center mb-6">
                                    <div class="border rounded p-4 bg-white d-inline-block">
                                        {!! $qrCode !!}
                                    </div>
                                </div>

                                <div class="notice d-flex bg-light-warning rounded border-warning border border-dashed p-4 mb-6">
                                    <i class="ki-outline ki-information fs-2 text-warning me-3"></i>
                                    <div>
                                        <p class="mb-1 fw-bold text-gray-800">{{ __('dashboard.Manual setup key') }}</p>
                                        <code class="fs-7 text-gray-700 user-select-all">{{ $user->two_factor_secret }}</code>
                                    </div>
                                </div>

                                <form method="POST" action="{{ route('profile.two-factor.enable') }}">
                                    @csrf
                                    <div class="mb-5">
                                        <label class="form-label required fw-bold">{{ __('dashboard.Verification Code') }}</label>
                                        <input type="text"
                                               name="code"
                                               inputmode="numeric"
                                               autocomplete="one-time-code"
                                               maxlength="6"
                                               placeholder="000000"
                                               autofocus
                                               class="form-control form-control-lg text-center fs-3 fw-bold tracking-widest @error('code') is-invalid @enderror"
                                               value="{{ old('code') }}">
                                        @error('code')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                    <button type="submit" class="btn btn-primary w-100">
                                        <i class="ki-outline ki-shield-tick me-2"></i>
                                        {{ __('dashboard.Enable Two-Factor Authentication') }}
                                    </button>
                                </form>
                            </div>
                        @else
                            {{-- Disable: confirm with code --}}
                            <div class="notice d-flex bg-light-success rounded border-success border border-dashed p-4 mb-6">
                                <i class="ki-outline ki-shield-tick fs-2 text-success me-3"></i>
                                <p class="mb-0 text-gray-700">
                                    {{ __('dashboard.Two-factor authentication is currently active on your account. Enter a code from your authenticator app to disable it.') }}
                                </p>
                            </div>

                            <form method="POST" action="{{ route('profile.two-factor.disable') }}">
                                @csrf
                                @method('DELETE')
                                <div class="mb-5">
                                    <label class="form-label required fw-bold">{{ __('dashboard.Verification Code') }}</label>
                                    <input type="text"
                                           name="code"
                                           inputmode="numeric"
                                           autocomplete="one-time-code"
                                           maxlength="6"
                                           placeholder="000000"
                                           class="form-control form-control-lg text-center fs-3 fw-bold tracking-widest @error('code') is-invalid @enderror"
                                           value="{{ old('code') }}">
                                    @error('code')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                                <button type="submit" class="btn btn-danger w-100">
                                    <i class="ki-outline ki-shield-cross me-2"></i>
                                    {{ __('dashboard.Disable Two-Factor Authentication') }}
                                </button>
                            </form>
                        @endunless

                    </div>
                </div>

            </div>
        </div>
    </div>
</div>
@endsection