@extends('client.layouts.client')
@section('title', 'Thông Tin Cá Nhân')
@section('content')


 <div class="edit-profile">
              <div class="row">
                <div class="col-xl-4">
                  <div class="card">
                    <div class="card-header pb-0">
                      <div class="card-title">TÀI KHOẢN CÁ NHÂN</div>
                      <div class="card-options"><a class="card-options-collapse" href="#" data-bs-toggle="card-collapse"><i class="fe fe-chevron-up"></i></a><a class="card-options-remove" href="#" data-bs-toggle="card-remove"><i class="fe fe-x"></i></a></div>
                    </div>
                    <div class="card-body">
                      <form>
                         
 
                        <div class="mb-3">
                          <label class="form-label">Tên Tài Khoản</label>
                          <input class="form-control" value="{{Auth::user()->username}}" placeholder="" readonly>
                        </div>
                        <div class="mb-3">
                          <label class="form-label">Địa chỉ Email</label>
                          <input class="form-control" value="{{Auth::user()->email}}" placeholder="" readonly>
                        </div>
                        <div class="mb-3">
                          <label class="form-label">Thời Gian Đăng Kí</label>
                          <input class="form-control" value="{{Auth::user()->created_at}}" placeholder="" readonly>
                        </div>
                        <div class="mb-3">
                          <label class="form-label">Đăng Nhập Gần Đây</label>
                          <input class="form-control" value="{{Auth::user()->last_login}}" placeholder="" readonly>
                        </div>
                        
                      </form>
                    </div>
                  </div>
                </div>
                <div class="col-xl-8">
                  <form class="card">
                    <div class="card-header pb-0">
                      <div class="card-title">CẤU HÌNH TÀI KHOẢN</div>
                      <div class="card-options"><a class="card-options-collapse" href="#" data-bs-toggle="card-collapse"><i class="fe fe-chevron-up"></i></a><a class="card-options-remove" href="#" data-bs-toggle="card-remove"><i class="fe fe-x"></i></a></div>
                    </div>
                    <div class="card-body">
                        <ul class="nav nav-pills nav-primary" id="pills-tab" role="tablist">
                      <li class="nav-item"><a class="f-w-600 nav-link active" id="pills-aboutus-tab" data-bs-toggle="pill" href="#pills-aboutus" role="tab" aria-controls="pills-aboutus" aria-selected="true">Thông tin tài khoản</a></li>
                      <li class="nav-item"><a class="f-w-600 nav-link" id="pills-contactus-tab" data-bs-toggle="pill" href="#pills-contactus" role="tab" aria-controls="pills-contactus" aria-selected="false">Liên kết Telegram</a></li>
                      <li class="nav-item"><a class="f-w-600 nav-link" id="pills-blog-tab" data-bs-toggle="pill" href="#pills-blog" role="tab" aria-controls="pills-blog" aria-selected="false">Xác thực 2 yếu tố</a></li>
                      
                      
                      <li class="nav-item"><a class="f-w-600 nav-link" id="pills-blogs-tab" data-bs-toggle="pill" href="#pills-blogs" role="tab" aria-controls="pills-blogs" aria-selected="false">Thay đổi mật khẩu</a></li>
                    </ul>
                    <div class="tab-content" id="pills-tabContent">
                      <div class="tab-pane fade active show" id="pills-aboutus" role="tabpanel" aria-labelledby="pills-aboutus-tab">
                          <div class="card-body">
                         <form action="" class="">
                                <div class="row">
                                    <div class="col-md-6 form-group mb-3">
                                        <label for="name" class="form-label">Số điện thoại:</label>
                                        <input type="text" class="form-control" id="name" disabled
                                            value="{{ Auth::user()->name }}">
                                    </div>
                                    <div class="col-md-6 form-group mb-3">
                                        <label for="email" class="form-label">Địa chỉ Email:</label>
                                        <input type="text" class="form-control" id="email" disabled
                                            value="{{ Auth::user()->email }}">
                                    </div>
                                    <div class="col-md-6 form-group mb-3">
                                        <label for="username" class="form-label">Tài khoản:</label>
                                        <input type="text" class="form-control" id="username" disabled
                                            value="{{ Auth::user()->username }}">
                                    </div>
                                    <div class="col-md-6 form-group mb-3">
                                        <label for="created_at" class="form-label">Thời gian đăng kí:</label>
                                        <input type="text" class="form-control" id="created_at" disabled
                                            value="{{ Auth::user()->created_at }}">
                                    </div>
                                    <div class="col-md-6 form-group mb-3">
                                        <label for="balance" class="form-label">Số dư:</label>
                                        <input type="text" class="form-control" id="balance" disabled
                                            value="{{ number_format(Auth::user()->balance) }} VNĐ">
                                    </div>
                                    <div class="col-md-6 form-group mb-3">
                                        <label for="last_login" class="form-label">Đăng nhập gần đây:</label>
                                        <input type="text" class="form-control" id="last_login" disabled
                                            value="{{ Auth::user()->last_login }}">
                                    </div>
                                    <div class="col-md-12 mb-3">
                                        <label for="api_token" class="form-label">API Token</label>
                                        <div class="input-group">
                                            <input type="text" class="form-control" id="api_token" readonly onclick="coppy('{{ Auth::user()->api_token ?? 'null' }}')" value="{{ Auth::user()->api_token ?? 'Bạn chưa tạo Api Token!' }}" placeholder="Bạn cần ấn thay đổi Token">
                                            <button type="button" id="reload-token" class="btn btn-primary">
                                                <i class="fa fa-sync"></i>
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </form>
                            </div>
                      </div>
                      <div class="tab-pane fade" id="pills-contactus" role="tabpanel" aria-labelledby="pills-contactus-tab">
                 
                    <div class="card-body">
                        <div class="mb-3 border-bottom py-2">
                         
                            <div class="alert alert-primary">
                                <h4 class="alert-heading">Cấu hình Telegram</h4>
                                <ul>
                                    <li>Để bảo mật tài khoản của bạn, bạn có thể liên kết tài khoản của mình với
                                        Telegram. Khi liên kết, bạn sẽ nhận được thông báo qua Telegram khi có hoạt
                                        động đăng nhập từ thiết bị không xác định.
                                    </li>
                                    <li>Nên Cấu Hình Để Sử Dụng Nhằm Bảo Vệ Tài Khoản Và Cập Nhật Lịch Sử Đơn Hàng Nhanh
                                        Chóng Tránh Bị Bug
                                    </li>
                                    <li>Gửi Lịch Sử Mua Hàng & Nạp Tiền Về Telegram Của Bạn </li>
                                </ul>
                            </div>
                            @if (Auth::user()->telegram_id !== null && Auth::user()->telegram_id !== '')
                            <h6 class="text-muted fw-bold fs-6 mb-3">Trạng thái: <span
                                class="badge bg-success badge-sm">Đã liên kết</span></h6>
                            <form action="{{ route('account.update.status-telegram') }}" method="POST">
                                @csrf
                                <div class="mb-3 form-group">
                                    <label class="form-label">ID Telegram</label>
                                    <input type="text" class="form-control" id="telegram_id"
                                        value="{{ Auth::user()->telegram_id }}" disabled>
                                </div>
                                <div class="form-group mb-3">
                                    <label class="form-label">Thông báo về telegram</label>
                                    <div class="form-check">
                                        <input class="form-check-input" type="checkbox" id="status" name="status" value="{{ Auth::user()->notification_telegram == 'yes' ? 'no' : 'yes' }}"
                                        {{ Auth::user()->notification_telegram == 'yes' ? 'checked' : '' }}>
                                        <label class="form-check-label" for="status">
                                        Gửi thông báo
                                        </label>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <button type="submit" class="btn btn-primary shadow-2 btn-sm text-sm">Cập nhật</button>
                                </div>
                            </form>
                            @else
                            <h6 class="text-muted fw-bold fs-6 mb-3">Trạng thái: <span
                                class="badge bg-danger badge-sm">Chưa liên kết</span></h6>
                            <button data-pc-animate="slide-in-right" type="button" class="btn btn-primary"
                                data-bs-toggle="modal" data-bs-target="#telegram">
                            Liên kết Telegram
                            </button>
                            <div class="modal fade modal-animate" id="telegram" tabindex="-1"
                                aria-hidden="true">
                                <div class="modal-dialog">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <h5 class="modal-title">Liên Kết Telegram</h5>
                                            <button type="button" class="btn-close" data-bs-dismiss="modal"
                                                aria-label="Close"> </button>
                                        </div>
                                        <form action="{{ route('account.update.status-telegram') }}" method="POST">
                                            @csrf
                                            <div class="modal-body">
                                                <div class="mb-3 text-center">
                                                    <h4 class="text-gray">Thông tin Bot Telegram</h4>
                                                    <p class="text-muted">Để liên kết tài khoản của bạn với
                                                        Telegram,
                                                        bạn cần thực hiện các bước sau:
                                                    </p>
                                                    <ol>
                                                        <li>Thêm Bot Telegram: <a
                                                            href="https://t.me/{{ siteValue('telegram_bot_chat_username') }}"
                                                            target="_blank">https://t.me/{{ siteValue('telegram_bot_chat_username') }}</a>
                                                        </li>
                                                        <li>Nhấn vào nút <strong>Start</strong> để bắt đầu</li>
                                                        <li>Chọn <strong>/active {api_token}</strong> để liên kết
                                                            tài khoản trong đó {api_token} là phần token của bạn
                                                        </li>
                                                    </ol>
                                                </div>
                                            </div>
                                            <div class="modal-footer">
                                                <button type="button" class="btn btn-outline-secondary"
                                                    data-bs-dismiss="modal">Đóng</button>
                                                <button type="submit" class="btn btn-primary shadow-2">Liên
                                                Kết</button>
                                            </div>
                                        </form>
                                    </div>
                                </div>
                            </div>
                            @endif
                        </div>
                    </div>
                      </div>
                      <div class="tab-pane fade " id="pills-blog" role="tabpanel" aria-labelledby="pills-blog-tab">
                         <div class="card-body">
                        <div class="mb-3 border-bottom py-2">
                          
                            <div class="alert alert-primary">
                                <h4 class="alert-heading">Xác thực 2 yếu tố là gì?</h4>
                                <p class="mb-0">Xác thực 2 yếu tố (2FA) là một phương pháp bảo mật mạnh mẽ hơn
                                    so với mật khẩu đơn lẻ. Khi bật xác thực 2 yếu tố, bạn sẽ cần nhập một mã xác
                                    thực được tạo ra từ ứng dụng xác thực trên điện thoại di động của bạn sau
                                    khi nhập mật khẩu của bạn. Điều này giúp bảo vệ tài khoản của bạn khỏi các
                                    cuộc tấn công xâm nhập và truy cập trái phép.
                                </p>
                            </div>
                            {{-- trạng thái --}}
                            @if (Auth::user()->two_factor_auth === 'yes')
                            <h6 class="text-muted fw-bold fs-6 mb-3">Trạng thái: <span
                                class="badge bg-success badge-sm">Đã bật</span></h6>
                            <button type="button" class="btn btn-danger" data-bs-toggle="modal"
                                data-bs-target="#two_factor_auth">
                            Tắt xác thực
                            </button>
                            <div class="modal fade modal-animate" id="two_factor_auth" tabindex="-1"
                                aria-hidden="true">
                                <div class="modal-dialog">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <h5 class="modal-title">Tắt xác thực 2 yếu tố</h5>
                                            <button type="button" class="btn-close" data-bs-dismiss="modal"
                                                aria-label="Close"> </button>
                                        </div>
                                        <form action="{{ route('account.two-factor-auth-disable') }}"
                                            method="POST">
                                            @csrf
                                            <div class="modal-body">
                                                <div class="mb-3 text-center">
                                                    <h4 class="text-gray"> Nhập mã xác thực để tắt xác thực 2
                                                        yếu tố
                                                    </h4>
                                                </div>
                                                <div class="mb-3 form-group">
                                                    <label class="form-label">Nhập mã xác thực</label>
                                                    <input type="text" class="form-control" id="code"
                                                        autocomplete="off" name="code">
                                                </div>
                                            </div>
                                            <div class="modal-footer">
                                                <button type="button" class="btn btn-outline-secondary"
                                                    data-bs-dismiss="modal">Đóng</button>
                                                <button type="submit" class="btn btn-primary shadow-2">Bật
                                                xác
                                                thực</button>
                                            </div>
                                        </form>
                                    </div>
                                </div>
                            </div>
                            @else
                            <h6 class="text-muted fw-bold fs-6 mb-3">Trạng thái: <span
                                class="badge bg-danger badge-sm">Chưa bật</span></h6>
                            <button data-pc-animate="slide-in-right" type="button" class="btn btn-primary"
                                data-bs-toggle="modal" data-bs-target="#two_factor_auth">
                            Xác thực
                            </button>
                            <div class="modal fade modal-animate" id="two_factor_auth" tabindex="-1"
                                aria-hidden="true">
                                <div class="modal-dialog">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <h5 class="modal-title">Xác thực 2 yếu tố</h5>
                                            <button type="button" class="btn-close" data-bs-dismiss="modal"
                                                aria-label="Close"> </button>
                                        </div>
                                        <form action="{{ route('account.two-factor-auth') }}" method="POST">
                                            @csrf
                                            <div class="modal-body">
                                                <div class="mb-3 text-center">
                                                    <h4 class="text-gray">Quét mã QR bằng ứng dụng xác thực</h4>
                                                    <img src="{{ $qrCodeUrl }}" alt="QR Google Authenticate">
                                                </div>
                                                <div class="mb-3 text-center">
                                                    <h4 class="text-gray">Hoặc nhập mã bí mật</h4>
                                                    <p class="text-muted">Nhập mã bí mật vào ứng dụng xác thực nếu
                                                        không thể quét mã QR
                                                    </p>
                                                    <input type="text" class="form-control" id="secret"
                                                        value="{{ $secret }}" disabled>
                                                    <button type="button" class="btn btn-primary mt-3"
                                                        id="copy-secret">
                                                    <i class="ti ti-clipboard"></i>
                                                    Sao chép mã bí mật
                                                    </button>
                                                </div>
                                                <div class="mb-3 form-group">
                                                    <label class="form-label">Nhập mã xác thực</label>
                                                    <input type="text" class="form-control" id="code"
                                                        autocomplete="off" name="code">
                                                </div>
                                            </div>
                                            <div class="modal-footer">
                                                <button type="button" class="btn btn-outline-secondary"
                                                    data-bs-dismiss="modal">Đóng</button>
                                                <button type="submit" class="btn btn-primary shadow-2">Bật xác
                                                thực</button>
                                            </div>
                                        </form>
                                    </div>
                                </div>
                            </div>
                            @endif
                        </div>
                    </div>
                      </div>
                      
                      <div class="tab-pane fade " id="pills-blogs" role="tabpanel" aria-labelledby="pills-blogs-tab">
                         <div class="card-body">
                            <form id="changePasswordForm" action="{{ route('account.change-password') }}" method="POST">
                                @csrf
                                <div class="row">
                                    <div class="col-md-12 form-group mb-3">
                                        <label for="current_password" class="form-label">Mật khẩu hiện
                                        tại:</label>
                                        <input type="password" class="form-control" id="current_password"
                                            name="current_password">
                                    </div>
                                    <div class="col-md-12 form-group mb-3">
                                        <label for="new_password" class="form-label">Mật khẩu mới:</label>
                                        <input type="password" class="form-control" id="new_password"
                                            name="new_password">
                                    </div>
                                    <div class="col-md-12 form-group mb-3">
                                        <label for="confirm_password" class="form-label">Xác nhận mật
                                        khẩu:</label>
                                        <input type="password" class="form-control" id="confirm_password"
                                            name="confirm_password">
                                    </div>
                                    <div class="text-end">
                                        <button type="submit" class="btn btn-primary">
                                        <i class="ti ti-lock"></i>
                                        Thay đổi mật khẩu
                                        </button>
                                    </div>
                                </div>
                            </form>
                        </div>
                      </div>
                      
                    </div>
                       
                    </div>
                     
                  </form>
                </div>
                
              </div>
            </div>



<div class="row">
    <div class="col-md-12">
        <div class="card">
                    <div class="card-header">
                        <div class="card-title">LỊCH SỬ HOẠT ĐỘNG</div>
                    </div>
                    <div class="card-body">
                        <div class="table-responsive">
                            <table class="table table-striped table-bordered nowrap dataTable"
                                style="max-width: 1444px;">
                                <thead>
                                    <tr>
                                        <th>Thời gian</th>
                                        <th>Hoạt động</th>
                                        <th>IP</th>
                                        <th>User Agent</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach (\App\Models\UserActivity::where('user_id', Auth::user()->id)->where('activity', 'auth')->orderBy('id', 'DESC')->limit(10)->get() as $activity)
                                    <tr>
                                        <td>{{ $activity->created_at }}</td>
                                        <td>{{ $activity->note }}</td>
                                        <td>{{ $activity->ip }}</td>
                                        <td>{{ $activity->user_agent }}</td>
                                    </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
    </div>
</div>










@endsection
@section('script')
<script>
    $('#reload-token').click(function() {
        $.ajax({
            url: "{{ route('account.reload-user-token') }}",
            type: 'GET',
            dataType: 'json',
            beforeSend: function() {
                $('#reload-token').html('<i class="fas fa-sync fa-spin"></i>').prop('disabled', true);
            },
            complete: function() {
                $('#reload-token').html('<i class="fas fa-sync"></i>').prop('disabled', false);
            },
            success: function(data) {
                $('#api_token').val(data.api_token);
                Swal.fire({
                    toast: true,
                    position: 'top',
                    icon: 'success',
                    title: 'Đã thay đổi API Token!',
                    showConfirmButton: false,
                    timer: 1500,
                    timerProgressBar: true
                });
                setTimeout(function() {
                    location.reload();
                }, 700);
            },
            error: function() {
                Swal.fire({
                    toast: true,
                    position: 'top',
                    icon: 'error',
                    title: 'Có lỗi xảy ra! Không thể thay đổi API Token',
                    showConfirmButton: false,
                    timer: 1500,
                    timerProgressBar: true
                });
            }
        });
    });
</script>
<script>
    document.getElementById("changePasswordForm").addEventListener("submit", function(event) {
        event.preventDefault();
    
        const form = document.getElementById("changePasswordForm");
        const formData = new FormData(form);
    
        fetch(form.action, {
            method: "POST",
            body: formData,
            headers: {
                'X-Requested-With': 'XMLHttpRequest',
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
            }
        })
        .then(response => response.json())
        .then(data => {
            if (data.status === 'success') {
                Swal.fire({
                    toast: true,
                    position: 'top',
                    icon: 'success',
                    title: data.message,
                    showConfirmButton: false,
                    timer: 3000
                });
            } else {
                Swal.fire({
                    toast: true,
                    position: 'top',
                    icon: 'error',
                    title: data.message,
                    showConfirmButton: false,
                    timer: 3000
                });
            }
        })
        .catch(error => {
            Swal.fire({
                toast: true,
                position: 'top',
                icon: 'error',
                title: 'Có lỗi xảy ra!',
                showConfirmButton: false,
                timer: 3000
            });
        });
    });
</script>
@endsection