@extends('layouts.master')
@section('css')
@endsection
@section('page-header')
    <!-- breadcrumb -->
    <div class="breadcrumb-header justify-content-between">
        <div class="my-auto">
            <div class="d-flex">
                <h4 class="content-title mb-0 my-auto">الملف الشخصي</h4><span class="text-muted mt-1 tx-13 mr-2 mb-0">/
                    إدارة الملف الشخصي</span>
            </div>
        </div>
    </div>
    <!-- breadcrumb -->
@endsection
@section('content')
    <!-- row -->
    <div class="row row-sm">
        <div class="col-lg-4">
            <div class="card mg-b-20">
                <div class="card-body">
                    <div class="pl-0">
                        <div class="main-profile-overview">
                            <div class="main-img-user profile-user">
                                <img alt="" src="{{ URL::asset('assets/img/faces/6.jpg') }}"><a
                                    class="fas fa-camera profile-edit" href="JavaScript:void(0);"></a>
                            </div>
                            <div class="d-flex justify-content-between mg-b-20">
                                <div>
                                    <h5 class="main-profile-name">{{ Auth::user()->name }}</h5>
                                    <p class="main-profile-name-text">{{ Auth::user()->email }}</p>
                                </div>
                            </div>

                        </div><!-- main-profile-overview -->
                    </div>
                </div>
            </div>
        </div>
        <div class="col-lg-8">
            <div class="card">
                <div class="card-body">
                    <div class="tabs-menu ">
                        <!-- Tabs -->
                        <ul class="nav nav-tabs profile navtab-custom panel-tabs">
                            <li class="active">
                                <a href="#home" data-toggle="tab" aria-expanded="true">
                                    <span class="visible-xs">
                                        <i class="las la-user-circle tx-16 mr-1"></i>
                                    </span> <span class="hidden-xs">كلمة المرور</span>
                                </a>
                            </li>
                            <li class="">
                                <a href="#settings" data-toggle="tab" aria-expanded="false">
                                    <span class="visible-xs">
                                        <i class="las la-cog tx-16 mr-1"></i>
                                    </span> <span class="hidden-xs">Google 2FA</span>
                                </a>
                            </li>
                        </ul>
                    </div>
                    <div class="tab-content border-left border-bottom border-right border-top-0 p-4">
                        <div class="tab-pane active" id="home">
                            <form method="POST" action="{{ route('profile.changePassword') }}">
                                @csrf
                                <h4 class="tx-15 text-uppercase mb-3">تغيير كلمة المرور</h4>
                                
                                @if(session('success'))
                                    <div class="alert alert-success mt-2">{{ session('success') }}</div>
                                @endif
                                
                                <div class="form-group mt-4">
                                    <label for="current_password">كلمة المرور الحالية</label>
                                    <input id="current_password" type="password" name="current_password" class="form-control @error('current_password') is-invalid @enderror" required>
                                    @error('current_password')
                                        <span class="invalid-feedback" role="alert">
                                            <strong>{{ $message }}</strong>
                                        </span>
                                    @enderror
                                </div>

                                <div class="form-group">
                                    <label for="password">كلمة المرور الجديدة</label>
                                    <input id="password" type="password" name="password" class="form-control @error('password') is-invalid @enderror" required>
                                    @error('password')
                                        <span class="invalid-feedback" role="alert">
                                            <strong>{{ $message }}</strong>
                                        </span>
                                    @enderror
                                </div>

                                <div class="form-group">
                                    <label for="password_confirmation">تأكيد كلمة المرور الجديدة</label>
                                    <input id="password_confirmation" type="password" name="password_confirmation" class="form-control" required>
                                </div>

                                <button type="submit" class="btn btn-primary mt-3">تغيير كلمة المرور</button>
                            </form>
                        </div>
                        <div class="tab-pane" id="settings">
                            <h4 class="tx-15 text-uppercase mb-3">إعدادات Google 2FA</h4>

                            @if(session('error'))
                                <div class="alert alert-danger mt-2">{{ session('error') }}</div>
                            @endif

                            @if(!$user->google2fa_secret)
                                @if(!$secret)
                                    <p>لم تقم بتفعيل المصادقة الثنائية (2FA) بعد. قم بإنشاء المفتاح السري للبدء.</p>
                                    <form method="POST" action="{{ route('profile.generate2faSecret') }}">
                                        @csrf
                                        <button type="submit" class="btn btn-primary mt-2">إنشاء المفتاح السري (Generate Secret)</button>
                                    </form>
                                @else
                                    <p>امسح رمز الاستجابة السريعة (QR Code) التالي باستخدام تطبيق المتنقل (Google Authenticator):</p>
                                    <div class="mb-4">
                                        <img src="{{ $QR_Image }}" alt="QR Code">
                                    </div>
                                    <p><strong>المفتاح السري:</strong> <code>{{ $secret }}</code></p>

                                    <form method="POST" action="{{ route('profile.enable2fa') }}">
                                        @csrf
                                        <div class="form-group">
                                            <label for="verify_code">رمز التحقق (OTP)</label>
                                            <input id="verify_code" type="text" name="verify_code" class="form-control @error('verify_code') is-invalid @enderror" required>
                                        </div>
                                        <button type="submit" class="btn btn-success">تأكيد وتفعيل (Verify & Enable)</button>
                                    </form>
                                @endif
                            @else
                                <p class="text-success mt-2"><b>المصادقة الثنائية (Google 2FA) مفعلة على حسابك لتوفير حماية إضافية.</b></p>
                                <form method="POST" action="{{ route('profile.disable2fa') }}">
                                    @csrf
                                    <button type="submit" class="btn btn-danger mt-3" onclick="return confirm('هل أنت متأكد أنك تريد تعطيل المصادقة الثنائية؟')">تعطيل المصادقة الثنائية (Disable 2FA)</button>
                                </form>
                            @endif
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- row closed -->
    </div>
    <!-- Container closed -->
    </div>
    <!-- main-content closed -->
@endsection
@section('js')
@endsection