@extends('layouts.app')

@section('title', 'Profile')

@push('css')
    <link href="//unpkg.com/filepond-plugin-image-preview/dist/filepond-plugin-image-preview.css" rel="stylesheet">
    @include('panel.inc.filepond.css')
    <style>
        .w-8{width: 2rem;}
        .h-8{height: 2rem;}
    </style>
@endpush

@section('content')

    <!-- Page title -->
    <div class="page-header">
        <div class="row align-items-center">
            <div class="col-auto">
                <h2 class="page-title">
                </h2>
            </div>
        </div>
    </div>

    @if(\Laravel\Fortify\Features::enabled(\Laravel\Fortify\Features::updateProfileInformation()))
    <div class="row">
        <div class="col-lg-4">
            <h3 class="text-lg font-medium text-gray-900">
                {{ __('Profile Information') }}
            </h3>
            <p class="mt-1 text-sm text-gray-600">
                {{ __('Update your account\'s profile information and email address.') }}
            </p>
        </div>
        <div class="col-lg-8">
            <form method="post" action="{{ route('user-profile-tabler.update') }}">
                @csrf
                <input type="hidden" name="_method" value="put">
                <div class="card">
                    <div class="card-body">
                        @if(session('status') == 'profile-information-updated')
                            <div class="alert alert-success" role="alert">
                                {{ __('Profile Information Updated') }}
                            </div>
                        @endif
                        <div class="row">
                            <div class="col-12 mb-3">
                                <input type="file" class="filepond" name="file" accept="image/png, image/jpeg, image/gif"/>
                            </div>
                            <div class="col-12 mb-3">
                                <label class="form-label">{{ __('Name') }}</label>
                                <input type="text" class="form-control" name="name" placeholder="{{ __('Name') }}" value="{{ auth()->user()->name }}">
                                <div class="invalid-feedback" style="display: block">{{ $errors->updateProfileInformation->first('name') }}</div>
                            </div>
                            <div class="col-12 mb-3">
                                <label class="form-label">{{ __('Email') }}</label>
                                <input type="email" class="form-control" name="email" placeholder="{{ __('Email') }}" value="{{ auth()->user()->email }}">
                                <div class="invalid-feedback" style="display: block">{{ $errors->updateProfileInformation->first('email') }}</div>
                            </div>
                        </div>
                    </div>
                    <div class="card-footer">
                        <div class="d-flex">
                            <button type="submit" class="btn btn-primary ml-auto">{{ __('Save') }}</button>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
    <hr>
    @endif

    @if(\Laravel\Fortify\Features::enabled(\Laravel\Fortify\Features::updatePasswords()))
    <div class="row">
        <div class="col-lg-4">
            <h3 class="text-lg font-medium text-gray-900">
                {{ __('Update Password') }}
            </h3>
            <p class="mt-1 text-sm text-gray-600">
                {{ __('Ensure your account is using a long, random password to stay secure.') }}
            </p>
        </div>
        <div class="col-lg-8">
            <form method="post" action="{{ route('user-password-tabler.update') }}">
                @csrf
                <input type="hidden" name="_method" value="put">
                <div class="card">
                    <div class="card-body">
                        @if(session('status') == 'password-updated')
                            <div class="alert alert-success" role="alert">
                                {{ __('Password Updated') }}
                            </div>
                        @endif
                        <div class="row">
                            <div class="col-12 mb-3">
                                <label class="form-label">{{ __('Current Password') }}</label>
                                <input type="password" class="form-control" name="current_password" placeholder="{{ __('Current Password') }}">
                                <div class="invalid-feedback" style="display: block">{{ $errors->updatePassword->first('current_password') }}</div>
                            </div>
                            <div class="col-12 mb-3">
                                <label class="form-label">{{ __('New Password') }}</label>
                                <input type="password" class="form-control" name="password" placeholder="{{ __('New Password') }}">
                                <div class="invalid-feedback" style="display: block">{{ $errors->updatePassword->first('password') }}</div>
                            </div>
                            <div class="col-12 mb-3">
                                <label class="form-label">{{ __('Confirm Password') }}</label>
                                <input type="password" class="form-control" name="password_confirmation" placeholder="{{ __('Confirm Password') }}">
                            </div>
                        </div>
                    </div>
                    <div class="card-footer">
                        <div class="d-flex">
                            <button type="submit" class="btn btn-primary ml-auto">{{ __('Save') }}</button>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
    <hr>
    @endif

    @if(\Laravel\Fortify\Features::enabled(\Laravel\Fortify\Features::twoFactorAuthentication()))
    <div class="row">
        <div class="col-lg-4">
            <h3 class="text-lg font-medium text-gray-900">
                {{ __('Two Factor Authentication') }}
            </h3>
            <p class="mt-1 text-sm text-gray-600">
                {{ __('Add additional security to your account using two factor authentication.') }}
            </p>
        </div>
        <div class="col-lg-8">
            <div class="card">
                <div class="card-body">
                    @if(session('status') == 'two-factor-authentication-enabled')
                        <div class="alert alert-success" role="alert">
                            {{ __('Two Factor Authentication Enabled') }}
                        </div>
                    @endif
                    @if(session('status') == 'two-factor-authentication-disabled')
                        <div class="alert alert-success" role="alert">
                            {{ __('Two Factor Authentication Disabled') }}
                        </div>
                    @endif
                    @if(session('status') == 'recovery-codes-generated')
                        <div class="alert alert-success" role="alert">
                            {{ __('Recovery Codes Re-Generate') }}
                        </div>
                    @endif
                    <div class="row">
                        <div class="col-12">
                            <h3 class="text-lg font-medium text-gray-900">
                                @if (auth()->user()->two_factor_enabled)
                                    {{ __('You have enabled two factor authentication.') }}
                                @else
                                    {{ __('You have not enabled two factor authentication.') }}
                                @endif
                            </h3>
                            <p>
                                {{ __('When two factor authentication is enabled, you will be prompted for a secure, random token during authentication. You may retrieve this token from your phone\'s Google Authenticator application.') }}
                            </p>

                            @if(auth()->user()->two_factor_enabled)
                                <div class="mt-4">
                                    <p class="font-weight-semibold">
                                        {{ __('Two factor authentication is now enabled. Scan the following QR code using your phone\'s authenticator application.') }}
                                    </p>
                                </div>
                                <div class="mt-4">
                                    {!! auth()->user()->twoFactorQrCodeSvg() !!}
                                </div>

                                <div class="mt-4">
                                    <p class="font-weight-semibold">
                                        {{ __('Store these recovery codes in a secure password manager. They can be used to recover access to your account if your two factor authentication device is lost.') }}
                                    </p>
                                </div>

                                <div class="grid gap-1 mt-4 px-4 py-4 bg-gray-lt rounded-lg text-dark font-monospace">
                                    @foreach (json_decode(decrypt(auth()->user()->two_factor_recovery_codes), true) as $code)
                                        <div>{{ $code }}</div>
                                    @endforeach
                                </div>
                            @endif

                            @if(!auth()->user()->two_factor_enabled)
                            <button type="button" onclick="event.preventDefault(); document.getElementById('twoFactorForm').submit();" class="btn btn-dark mt-3">{{ __('Enable') }}</button>
                            <form id="twoFactorForm" action="{{ route('profile.two-factor-authentication') }}" method="POST" style="display: none;">
                                {{ csrf_field() }}
                            </form>
                            @else
                                <div class="mt-3">
                                    <button type="button" onclick="event.preventDefault(); document.getElementById('twoFactorRecoveryGenerate').submit();" class="btn btn-dark mr-2">{{ __('Regenerate Recovery Codes') }}</button>
                                    <form id="twoFactorRecoveryGenerate" action="{{ route('profile.two-factor-recovery-codes.generate') }}" method="POST" style="display: none;">
                                        {{ csrf_field() }}
                                    </form>

                                    <button type="button" onclick="event.preventDefault(); document.getElementById('twoFactorFormDestroy').submit();" class="btn btn-danger">{{ __('Disable') }}</button>
                                    <form id="twoFactorFormDestroy" action="{{ route('profile.two-factor-authentication.destroy') }}" method="POST" style="display: none;">
                                        <input type="hidden" name="_method" value="delete">
                                        {{ csrf_field() }}
                                    </form>
                                </div>

                            @endif
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <hr>
    @endif

    @if(config('session.driver') == "database")
    <div class="row">
        <div class="col-lg-4">
            <h3 class="text-lg font-medium text-gray-900">
                {{ __('Browser Sessions') }}
            </h3>
            <p class="mt-1 text-sm text-gray-600">
                {{ __('Manage and logout your active sessions on other browsers and devices.') }}
            </p>
        </div>
        <div class="col-lg-8">
            <div class="card">
                <div class="card-body">
                    <div class="row">
                        <div class="col-12">
                            <p>
                                {{ __('If necessary, you may logout of all of your other browser sessions across all of your devices. Some of your recent sessions are listed below; however, this list may not be exhaustive. If you feel your account has been compromised, you should also update your password.') }}
                            </p>

                            @foreach($sessions as $session)
                            <div class="mt-3 flex items-center d-flex flex-row">
                                <div class="align-content-center">
                                    <svg fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" stroke="currentColor" class="w-8 h-8 text-gray">
                                        <path d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path>
                                    </svg>
                                </div>

                                <div class="ml-3">
                                    <div class="text-sm ">
                                        {{ $session->agent['platform'] }} - {{ $session->agent['browser'] }}
                                    </div>

                                    <div>
                                        <div class="text-xs text-muted">
                                            {{ $session->ip_address }},

                                            @if ($session->is_current_device)
                                                <span class="text-green font-weight-semibold">{{ __('This device') }}</span>
                                            @else
                                                {{ __('Last active') }} {{ $session->last_active }}
                                            @endif
                                        </div>
                                    </div>
                                </div>
                            </div>
                            @endforeach

                            <button type="button" onclick="fetchModal({el: this})" data-modal-url="{{ route('profile.logout-other-browser-sessions-form') }}" data-modal="#logoutSessionModal" class="btn btn-dark mt-3">{{ __('Logout Other Browser Sessions') }}</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    @endif

{{--    <div class="row">--}}
{{--        <div class="col-lg-4">--}}
{{--            <h3 class="text-lg font-medium text-gray-900">--}}
{{--                Delete Account--}}
{{--            </h3>--}}
{{--            <p class="mt-1 text-sm text-gray-600">--}}
{{--                Permanently delete your account.--}}
{{--            </p>--}}
{{--        </div>--}}
{{--        <div class="col-lg-8">--}}
{{--            <form>--}}
{{--                <div class="card">--}}
{{--                    <div class="card-body">--}}
{{--                        <div class="row">--}}
{{--                            <div class="col-12">--}}
{{--                                <div class="mb-3 text-sm text-gray-600">--}}
{{--                                    Once your account is deleted, all of its resources and data will be permanently deleted. Before deleting your account, please download any data or information that you wish to retain.--}}
{{--                                </div>--}}
{{--                                <button type="button" class="btn btn-danger ml-auto">Delete</button>--}}
{{--                            </div>--}}
{{--                        </div>--}}
{{--                    </div>--}}
{{--                </div>--}}
{{--            </form>--}}
{{--        </div>--}}
{{--    </div>--}}

@endsection

@push('script')
    @include('panel.inc.filepond.js')
    <script src="//unpkg.com/filepond-plugin-image-preview/dist/filepond-plugin-image-preview.js"></script>
    <script src="//unpkg.com/filepond-plugin-file-validate-type/dist/filepond-plugin-file-validate-type.js"></script>

    <script !src="">
        $.fn.filepond.registerPlugin(FilePondPluginFileValidateSize);
        $.fn.filepond.registerPlugin(FilePondPluginImagePreview);
        $.fn.filepond.registerPlugin(FilePondPluginFileValidateType);
        $.fn.filepond.setDefaults({
            maxFileSize: '3MB',
            server: {
                url: '{{ route('panel.upload') }}',
                headers: {
                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
                }
            },
        });

        $('.filepond').filepond({
            allowMultiple: false,
            allowRevert: false,
            labelIdle: `Drag & Drop your picture or <span class="filepond--label-action">Browse</span>`,
            // stylePanelLayout: 'compact circle',
            // styleLoadIndicatorPosition: 'center bottom',
            // styleButtonRemoveItemPosition: 'center bottom'
        });

        // FilePond.create(
        //     document.querySelector('input'),
        //     {
        //         labelIdle: `Drag & Drop your picture or <span class="filepond--label-action">Browse</span>`,
        //         imagePreviewHeight: 170,
        //         imageCropAspectRatio: '1:1',
        //         imageResizeTargetWidth: 200,
        //         imageResizeTargetHeight: 200,
        //         stylePanelLayout: 'compact circle',
        //         styleLoadIndicatorPosition: 'center bottom',
        //         styleButtonRemoveItemPosition: 'center bottom'
        //     }
        // );
    </script>
@endpush