@extends('layouts.app')

@section('title')
    {{ __('2fa_security') }}
@endsection

@section('partner')
    active
@endsection

@section('section.header')
    <section class="content-header">
        <div class="container-fluid">
            <div class="row mb-2">
                <div class="col-sm-6">
                    <h1>{{ __('setting_2fa_security') }}</h1>
                </div>
                <div class="col-sm-6">
                    <ol class="breadcrumb float-sm-right">
                        <li class="breadcrumb-item"><a
                                href="{{ route('app.security.2fa.index') }}">{{ __('2fa_security') }}</a>
                        </li>
                        <li class="breadcrumb-item active">{{ __('information') }}</li>
                    </ol>
                </div>
            </div>
        </div>
        <hr>
    </section>
@endsection

@section('section.content')
    <section class="content">
        @if (Session::has('success'))
            <div id="message-alert" class="alert alert-success">
                {{ Session::get('success') }}
            </div>
        @endif
        @if (Session::has('error'))
            <div id="message-alert" class="alert alert-danger">
                {{ Session::get('error') }}
            </div>
        @endif
        <div class="col-lg-6 col-md-6 mx-auto">
            <div class="card">
                <div class="card-header" style="background-color: rgb(191, 191, 224)">{{ __('2fa_authenticator_setting') }}
                </div>
                <div class="card-body">
                    @if (session('status'))
                        <div class="alert alert-success" role="alert">
                            {{ session('status') }}
                        </div>
                    @endif


                    <div class="col-lg-6">
                        <div class="form-group">
                            <label for="is-2fa-enabled">{{ __('2fa_authenticator') }}</label>
                            <label class="switch">
                                <input type="checkbox" name="is_2fa_enabled" id="is-2fa-enabled"
                                    {{ $user->is_2fa_enabled ? 'checked' : '' }}>
                                <span class="slider round"></span>
                            </label>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        @if (!$user->is_2fa_enabled)
            <div class="modal fade" id="modal-2fa">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h4 class="modal-title">{{ __('Xác thực mã Google Authenticator') }}</h4>
                            <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        <div class="modal-body">
                            <div class="col-lg-12">
                                <div class="row">
                                    @if ($qrCode != null)
                                        <div class="col-lg-6 col-md-6">
                                            {!! $qrCode !!}
                                        </div>
                                        <div class="col-lg-6 col-md-6">
                                            <p>Quét mã QR code bằng ứng dụng xác thực 2FA của bạn để kích hoạt xác thực hai
                                                yếu
                                                tố.
                                            </p>
                                            <p>Sau khi kích hoạt, bạn sẽ cần nhập mã xác thực 2FA khi đăng nhập vào tài
                                                khoản.
                                            </p>
                                        </div>
                                    @else
                                        <form action="{{ route('app.refresh.2fa') }}" method="POST">
                                            @csrf
                                            <button class="btn btn-primary" type="submit">Tạo mã QR</button>
                                        </form>
                                    @endif
                                </div>
                            </div>
                            <div class="col-lg-12">
                                <form class="row" method="POST" action="{{ route('app.enable2FA') }}" id="otp-form">
                                    @csrf
                                    @method('PUT')
                                    <div class="input-group mb-3">
                                        <input type="text" name="google2fa_secret" class="form-control"
                                            value="{{ $google2fa_secret }}" readonly>
                                        <input type="text" name="one_time_password" class="form-control"
                                            value="{{ old('one_time_password') }}" placeholder="Nhập mã xác thực">
                                        <div class="input-group-append">
                                            <div class="input-group-text">
                                                <span class="fas fa-lock"></span>
                                            </div>
                                        </div>
                                        @error('one_time_password')
                                            <span class="text-danger">* {{ $message }}</span>
                                        @enderror
                                    </div>
                                </form>
                            </div>
                        </div>
                        <div class="modal-footer justify-content-between">
                            <button type="button" class="btn btn-outline-danger" data-bs-dismiss="modal">Close</button>
                            <button type="submit" class="btn btn-outline-success" id="2fa-submit">Xác thực</button>
                        </div>
                    </div>
                    <!-- /.modal-content -->
                </div>
                <!-- /.modal-dialog -->
            </div>
        @endif
        @if ($user->is_2fa_enabled)
            <div class="modal fade" id="modal-2fa">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h4 class="modal-title">{{ __('Xác thực tắt Google Authenticator') }}</h4>
                            <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        <div class="modal-body">
                            <!-- content xác nhận tắt 2FA ở đây -->
                            <p>Bạn có chắc muốn tắt tính năng xác thực 2FA?</p>
                        </div>
                        <div class="modal-footer justify-content-between">
                            <button type="button" class="btn btn-outline-danger" data-bs-dismiss="modal">Close</button>
                            <button type="button" class="btn btn-outline-success" id="confirm-disable-2fa">Xác
                                nhận</button>
                        </div>
                    </div>
                </div>
            </div>
        @endif

        <!-- /.modal -->
    </section>
@endsection

@section('styles')
    <link rel="stylesheet" href="{{ asset('dist/css/input.css') }}">
@endsection

@section('scripts')
    <script>
        $(document).ready(function() {
            $('#is-2fa-enabled').click(function() {
                $('#modal-2fa').modal('show');
            });
            $('#modal-2fa').on('toggle.bs.modal', function() {
                $('#is-2fa-enabled').prop('')
            });
            $('#modal-2fa').on('hidden.bs.modal', function() {
                location.reload();
            });

            $("#2fa-submit").click(function() {
                var formData = $("#otp-form").serialize();

                $.ajax({
                    url: "{{ route('app.enable2FA') }}",
                    type: "PUT",
                    data: formData,
                    success: function(response) {
                        if (response.success) {
                            $("#modal-2fa").modal("hide");
                            $("#is-2fa-enabled").prop("checked", true);
                            location.reload();
                            alert('Bật xác thực 2FA thành công.');
                        } else {
                            alert("Không thể lưu thay đổi. Vui lòng thử lại.");
                        }
                    },
                    error: function() {
                        alert("Có lỗi xảy ra trong quá trình gửi dữ liệu.");
                    }
                });
            });

            $("#confirm-disable-2fa").click(function() {
                $.ajax({
                    url: "{{ route('app.disable2FA') }}",
                    type: "PUT",
                    data: {
                        _token: "{{ csrf_token() }}",
                        is_2fa_enabled: false
                    },
                    success: function(response) {
                        if (response.success) {
                            $("#modal-2fa").modal("hide");
                            $("#is-2fa-enabled").prop("checked", false);
                            location.reload();
                            alert('Tắt xác thực 2FA thành công.');
                        } else {
                            alert("Không thể tắt tính năng 2FA. Vui lòng thử lại.");
                        }
                    },
                    error: function() {
                        alert("Có lỗi xảy ra trong quá trình gửi dữ liệu.");
                    }
                });
            });
        });
    </script>
@endsection