@extends('member.dashboard')

@section('member-content')
<!-- change password -->
@if (session('status') === 'password-updated')
<div class="alert alert-success text-center text-success" role="alert">
    {{ __('member.securitypage.password_updated') }}
</div>
@endif

<!-- 2FA -->
@if (session('status') === 'two-factor-authentication-enabled')
<div class="alert alert-success text-success" role="alert">
    {{ __('member.securitypage.two_factor_authentication_enabled') }}
</div>
@endif

@if (session('status') === 'two-factor-authentication-disabled')
<div class="alert alert-success text-success" role="alert">
    {{ __('member.securitypage.two_factor_authentication_disabled') }}
</div>
@endif

<!-- Delete account -->
@if (session('status') === 'account-deleted')
<div class="alert alert-success1 text-center text-success" role="alert">
    {{ __('Account deleted!') }}
</div>
@endif

<div id="securite" class="">
    <div class="card mb-4">
        <div class="card-header">
            <h4 class="mb-0">{{ __('member.securitypage.change_password_title') }}</h4>
        </div>
        <div class="card-body">

            <form method="POST" action="{{ route('user-password.update') }}" id="security-form">
                @csrf
                @method('PUT')

                <div class="mb-3 row">
                    <div class="input-group">
                        <div class="form-floating">
                            <input type="password" class="form-control border-bottom border-end-0 @error('current_password', 'updatePassword') is-invalid @enderror" name="current_password" id="current_password" placeholder="" required>
                            <label for="current_password" class="form-label">{{ __('member.current_password') }}</label>
                        </div>
                        <div class="input-group-text border-start-0 bg-white">
                            <button type="button" class="btn border-0 btn-toggle-password-visibility"></button>
                        </div>
                    </div>
                    @error('current_password', 'updatePassword')
                    <span class="invalid-feedback" role="alert">
                        <strong>{{ $message }}</strong>
                    </span>
                    @enderror
                </div>

                <div class="mb-3 row">
                    <div class="input-group">
                        <div class="form-floating">
                            <input type="password" class="form-control border-end-0 @error('password', 'updatePassword') is-invalid @enderror" name="password" id="password" placeholder="" minlength="12" required>
                            <label for="password" class="form-label">{{ __('member.new_password') }}</label>
                        </div>
                        <div class="input-group-text border-start-0 bg-white @error('password', 'updatePassword') border-danger @enderror">
                            <button type="button" class="btn border-0 btn-toggle-password-visibility"></button>
                        </div>
                    </div>
                    <small class="form-text text-muted d-block">{{ __('member.password_requirements') }}</small>
                    @error('password', 'updatePassword')
                    <span class="invalid-feedback d-block" role="alert">
                        <strong>{{ $message }}</strong>
                    </span>
                    @enderror
                </div>

                <div class="mb-3 row">
                    <div class="input-group">
                        <div class="form-floating">
                            <input type="password" class="form-control border-bottom border-end-0 @error('password_confirmation') is-invalid @enderror" name="password_confirmation" id="password_confirmation" placeholder="" required>
                            <label for="password_confirmation" class="form-label">{{ __('member.confirm_password') }}</label>
                        </div>
                        <div class="input-group-text border-start-0 bg-white">
                            <button type="button" class="btn border-0 btn-toggle-password-visibility"></button>
                        </div>
                    </div>

                </div>


                <div class="mb-5 row">
                    <div class="col-md-12 contact-btn">
                        <button type="submit" class="fv-btn btn btn-lg">
                            <span class="spinner-border spinner-border-sm d-none" role="status" aria-hidden="true" id="spinner"></span>
                            {{ __('member.update') }}
                        </button>
                    </div>
                </div>
            </form>
        </div>
    </div>

    <div class="card mb-4">
        <div class="card-header">
            <h4 class="mb-0">{{ __('Multi factor authentication') }}</h4>
        </div>
        <div class="card-body">
            @if(auth()->user()->two_factor_secret)
            <div class="row">
                <div class="col-md-6 mb-3">
                    <h4 class="text-xl font-semibold">Code QR d'authentification</h4>
                    <div class="mt-3">{!! auth()->user()->twoFactorQrCodeSvg() !!}</div>
                </div>
                </>

                <div class="col-md-6">
                    <h4 class="font-bold mb-2">Codes de récupération</h4>
                    <ul class="list-disc pl-6 text-gray-700 mt-3">
                        @foreach(auth()->user()->recoveryCodes() as $code)
                        <li>{{ $code }}</li>
                        @endforeach
                    </ul>
                </div>
            </div>
            <div class="row mb-5">
                <form action="{{ route('two-factor.disable') }}" method="POST" id="two-factor-disable-form">
                    @csrf
                    <button type="submit" class="btn btn-lg btn-danger">
                        <span class="spinner-border spinner-border-sm d-none" role="status" aria-hidden="true" id="spinner"></span>
                        {{ __('member.securitypage.disable_two_factor_authentication') }}
                    </button>
                </form>
            </div>
            @else
            <p class="mb-3">{{ __('member.securitypage.two_factor_enable_text') }}</p>
            <form action="{{ route('two-factor.enable') }}" method="POST" id="two-factor-form">
                @csrf
                <div class="contact-btn mb-5">
                    <button type="submit" class="fv-btn btn btn-lg">
                        <span class="spinner-border spinner-border-sm d-none" role="status" aria-hidden="true" id="spinner"></span>
                        {{ __('member.securitypage.enable_two_factor_authentication') }}
                    </button>
                </div>
            </form>
            @endif            
        </div>
    </div>

</div>

<div class="card mb-4">
        <div class="card-body">

            <form method="POST" action="{{ route('profile.delete', auth()->user()->id) }}" class="" id="delete-form">
                @csrf
                @method('DELETE')
                <div class="contact-btn mb-5">
                    <button type="submit" class="fv-btn btn btn-lg">
                        <span class="spinner-border spinner-border-sm d-none" role="status" aria-hidden="true" id="spinner"></span>
                        {{ __('member.delete_account') }}
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

@endsection

@section('scripts')
<script>
    initSubmitSpinner('security-form', "{{ __('member.loading') }}...");
    initSubmitSpinner('two-factor-form', "{{ __('member.loading') }}...");
    initSubmitSpinner('two-factor-disable-form', "{{ __('member.loading') }}...");
    initSubmitSpinner('delete-form', "{{ __('member.loading') }}...");

    document.querySelectorAll('.btn-toggle-password-visibility').forEach(function(button) {
        button.addEventListener('click', function() {
            const input = this.closest('.input-group').querySelector('input');
            if (input.type === 'password') {
                input.type = 'text';
            } else {
                input.type = 'password';
            }
        });
    });
</script>
@endsection