@extends('layouts.main-app')

@section('content')
<div class="row justify-content-center mb-4">
    <div class="col-md-12">
        <ul class="nav nav-tabs" id="settingTab" role="tablist">
            <li class="nav-item" role="presentation">
                <a class="nav-link {{ request()->routeIs('setting.setting.profile-setting') ? 'active' : '' }}" 
                    href="{{ route('setting.setting.profile-setting') }}" role="tab" 
                    aria-selected="false"
                >
                    @lang('Profile')
                </a>
            </li> 
            <li class="nav-item" role="presentation">
                <a class="nav-link {{ request()->routeIs('setting.setting.change-password') ? 'active' : '' }}" 
                    href="{{ route('setting.setting.change-password') }}" 
                    aria-selected="true" 
                >
                    @lang('Change Password')
                </a>
            </li>
                      <li class="nav-item" role="presentation">
                <a class="nav-link {{ request()->routeIs('twofactor.twofactor') ? 'active' : '' }}" 
                    href="{{ route('twofactor.twofactor') }}" 
                    aria-selected="false" 
                >
                    @lang('2FA Security')
                </a>
            </li>
            <li class="nav-item" role="presentation">
                <a class="nav-link {{ request()->routeIs('setting.setting.api-key') ? 'active' : '' }}" 
                    href="{{ route('setting.setting.api-key') }}" 
                    aria-selected="false"
                >
                    @lang('Api Key') 
                </a>
            </li>
             <li class="nav-item" role="presentation">
                <a class="nav-link {{ request()->routeIs('setting.setting.ip-allow') ? 'active' : '' }}" 
                    href="{{ route('setting.setting.ip-allow') }}" 
                    aria-selected="false"
                >
                   @lang('IP Allow')
                </a>
            </li>
            <li class="nav-item" role="presentation">
                <a class="nav-link {{ request()->routeIs('setting.setting.help') ? 'active' : '' }}" 
                    href="{{ route('setting.setting.help') }}" role="tab" 
                    aria-selected="false"
                >
                    @lang('Support Account')
                </a>
            </li>
        </ul>
    </div>
</div>

<style>
    .nav-tabs .nav-link{
        border: none !important;
        font-weight: 700;
        color: #7e7e7e;
    }
    .nav-tabs .nav-link.active{
        color: #002046;
    }
    .nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active{
        background: transparent;
    }
</style> 



<div class="row justify-content-center gy-4">

    <div class="col-12">
        <div class="page-heading mb-4">
            <h3 class="mb-2">{{ __($pageTitle) }}</h3>
<p>
    @lang('Enhance your account security by updating your password regularly. Keep your information safe from unauthorized access with a simple and secure password change.')
</p>

        </div>
        <hr>
    </div>

    <div class="col-lg-12">
        <div class="card style--two">
            <div class="card-header d-flex flex-wrap align-items-center justify-content-center">
                <h5 class="card-title">@lang('Change Password')</h5>
            </div>
            <div class="card-body p-4">
                <form class="register" action="{{ route('password.update') }}" method="post">
                    @csrf
                    <div class="row">
                        <div class="col-md-12">
                            <div class="form-group">
                                <label class="col-form-label">@lang('Current Password')</label>
                                <input type="password" class="form--control" name="current_password" required autocomplete="current-password">
                            </div>
                        </div>
                            <div class="form-group">
                                <label class="col-form-label">@lang('Password')</label>
                                <div class="input-group">
                                    <input
                                        type="password" 
                                        class="form--control " 
                                        name="password" 
                                        required 
                                        autocomplete="current-password" 
                                    >
                                </div>
                            </div>
                        </div>
                        <div class="col-md-12">
                            <div class="form-group">
                                <label class="col-form-label">@lang('Confirm Password')</label>
                                <input type="password" class="form--control" name="password_confirmation" required autocomplete="current-password">
                            </div>
                        </div>
                        
                        <div class="col-md-12">
    <div class="form-group">
        <label class="col-form-label">@lang('Google Authenticator Code')</label>
        
        @if(auth()->user()->ts == 'Y')
            <div class="alert alert-success p-2">
                ✅ @lang(' Please enter the correct 6-digit code.')
            </div>
            <input type="text" class="form--control border-success" name="g2fa_code" required placeholder="Enter 6-digit code">
        @else
            <div class="alert alert-warning p-2">
                ⚠️ @lang('2FA is disabled. Please enable it first to change your password.')
            </div>
            <input type="text" class="form--control border-warning" name="g2fa_code" disabled placeholder="2FA Required">
        @endif
    </div>
</div>


                        <div class="col-md-12 mt-2">
                            <div class="form-group">
                                <button type="submit" class="btn btn--base w-100">@lang('Submit')</button>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
@endsection
