@extends('layouts.app')

@section('title', 'Bảo Mật Tài Khoản | GreenCard.vn')

@section('content')
<main class="container dash-layout">
    @include('partials.dash-sidebar')

    <section class="dash-main card-panel">
        <h1>Bảo Mật Tài Khoản</h1>
        <p class="page-sub">Quản lý mật khẩu và các thiết bị đăng nhập của bạn</p>

        <div class="sec-grid">
            {{-- Đổi mật khẩu --}}
            <div>
                <h2><span class="g">&#128273;</span> Đổi Mật Khẩu</h2>
                <form method="POST" action="{{ route('user.security.password') }}">
                    @csrf
                    <div class="pw-row">
                        <label>Mật khẩu hiện tại</label>
                        <input class="input" type="password" name="current_password" placeholder="Nhập mật khẩu hiện tại">
                    </div>
                    <div class="pw-row">
                        <label>Mật khẩu mới</label>
                        <input class="input" type="password" name="password" placeholder="Nhập mật khẩu mới">
                    </div>
                    <div class="pw-row">
                        <label>Xác nhận mật khẩu</label>
                        <input class="input" type="password" name="password_confirmation" placeholder="Nhập lại mật khẩu mới">
                    </div>
                    <div class="pw-row">
                        <span></span>
                        <span>
                            <button type="submit" class="btn btn-green">Cập nhật mật khẩu</button>
                            <p class="pw-help">Mật khẩu phải dài ít nhất 8 ký tự để đảm bảo an toàn.</p>
                        </span>
                    </div>
                </form>
            </div>

            {{-- 2FA + thiết bị --}}
            <div>
                <h2><span class="g">&#128737;</span> Bảo vệ lớp thứ hai</h2>
                <div class="twofa-box">
                    <span>
                        <span class="t-title">Xác thực 2 yếu tố (2FA) @if($user->two_factor_enabled)<span class="on-badge">BẬT</span>@endif</span>
                        <span class="t-sub" style="display:block;">
                            @if($user->two_factor_enabled)
                                Tài khoản được bảo vệ bằng Google/MS userenticator
                            @else
                                Bảo vệ tài khoản bằng ứng dụng userenticator
                            @endif
                        </span>
                    </span>
                    <label class="switch" onclick="event.preventDefault(); openModal('{{ $user->two_factor_enabled ? 'disable2faModal' : 'enable2faModal' }}');">
                        <input type="checkbox" {{ $user->two_factor_enabled ? 'checked' : '' }}>
                        <span class="track"></span>
                        <span class="thumb"></span>
                    </label>
                </div>

                <div class="devices">
                    <h3>Thiết bị đăng nhập gần đây</h3>
                    @forelse($sessions as $i => $s)
                        <div class="device-row">
                            <span class="d-ico">&#128421;</span>
                            <span>
                                <span class="d-name">{{ $s->device }} @if($i === 0)<span class="new">Mới nhất</span>@endif</span>
                                <span class="d-meta" style="display:block;">{{ $s->ip_address }}</span>
                                <span class="d-meta" style="display:block;">{{ $s->created_at->locale('vi')->diffForHumans() }}</span>
                            </span>
                            <form method="POST" action="{{ route('user.security.session.delete', $s) }}">
                                @csrf @method('DELETE')
                                <button type="submit" class="kick" title="Xóa phiên">&#10162;</button>
                            </form>
                        </div>
                    @empty
                        <div class="empty-state" style="min-height:80px;">Chưa có phiên đăng nhập.</div>
                    @endforelse
                </div>
            </div>
        </div>
    </section>
</main>

{{-- Modal bật 2FA: QR + secret + mã 6 số --}}
<div class="modal-backdrop" id="enable2faModal">
    <div class="modal wide">
        <button type="button" class="close-x" onclick="closeModal('enable2faModal')">&#10005;</button>
        <div class="m-head">
            <span class="m-ico">&#9783;</span>
            <span>
                <h3>Bật xác thực 2 yếu tố</h3>
                <span class="m-sub">Dùng Google userenticator hoặc Microsoft userenticator</span>
            </span>
        </div>

        <div class="qr-wrap">
            <div class="step">Bước 1: Quét mã QR bằng ứng dụng userenticator</div>
            {!! $qrSvg !!}
        </div>

        <div style="font-size:12.5px;color:#475569;margin-top:14px;">Hoặc nhập thủ công khóa bí mật:</div>
        <div class="secret-row">
            <input type="text" readonly value="{{ $setupSecret }}" id="secretInput">
            <button type="button" onclick="copySecret()">&#128203;</button>
        </div>

        <form method="POST" action="{{ route('user.security.2fa.enable') }}">
            @csrf
            <div style="font-size:12.5px;color:#475569;margin-top:16px;">Bước 2: Nhập mã 6 chữ số từ ứng dụng để xác nhận</div>
            <input class="otp-input" type="text" name="code" autocomplete="one-time-code" placeholder="&#8226;&#8226;&#8226;&#8226;&#8226;&#8226;">
            <button type="submit" class="btn btn-green btn-block" style="margin-top:16px;">Xác nhận bật 2FA</button>
        </form>
    </div>
</div>

{{-- Modal tắt 2FA --}}
<div class="modal-backdrop" id="disable2faModal">
    <div class="modal">
        <button type="button" class="close-x" onclick="closeModal('disable2faModal')">&#10005;</button>
        <div class="m-head">
            <span class="m-ico">&#128737;</span>
            <span>
                <h3>Tắt xác thực 2 yếu tố</h3>
                <span class="m-sub">Xác nhận bằng mã từ ứng dụng userenticator</span>
            </span>
        </div>
        <form method="POST" action="{{ route('user.security.2fa.disable') }}">
            @csrf
            <input class="otp-input" type="text" name="code" autocomplete="one-time-code" style="margin-top:0;">
            <button type="submit" class="btn btn-green btn-block" style="margin-top:16px;">Xác nhận tắt 2FA</button>
        </form>
    </div>
</div>
@endsection

@push('scripts')
<script>
function copySecret() {
    var input = document.getElementById('secretInput');
    navigator.clipboard.writeText(input.value).then(function () { showToast('Đã sao chép khóa bí mật!'); });
}
</script>
@endpush