@extends('layouts.frontendDashboard.master')

@section('title', 'My profile')
@push('style')
@endpush
@section('content')
    <!-- Banner Section -->
    <div class="top-banner front-profile-top-banner">
        <div class="banner-text">
            <h2>{{ __('My profile') }}</h2>
        </div>
    </div>

    <!-- End Banner -->
    <div class="scroll container front-profile" id="profileDiv">
        <div class="row">
            <div class="col-md-4 col-lg-3">
                <ul class="nav nav-tabs flex-column mb-3">
                    <li class="nav-item">
                        <a class="nav-link active show tab1 tab-active" data-toggle="tab">
                            <span class="step-number"><i class="fas fa-user-secret"></i></span>
                            <span class="step-text">{{ __('Profile update') }}</span>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link tab2" data-toggle="tab">
                            <span class="step-number"><i class="fas fa-cog"></i></span>
                            <span class="step-text">{{ __('Google 2FA') }}</span>
                        </a>
                    </li>
                    <li class="nav-item d-none">
                        <a class="nav-link" data-toggle="tab" href="#tab-3">
                            <span class="step-number"><i class="fas fa-network-wired"></i></span>
                            <span class="step-text"> {{ __('Other') }}</span>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link tab4" data-toggle="tab">
                            <span class="step-number"><i class="fas fa-cog"></i></span>
                            <span class="step-text"> {{ __('Preferences') }}</span>
                        </a>
                    </li>

                </ul>
            </div>
            <div class="col-md-8 col-lg-9 tabDiv">
                <div class="tab-content py-0">
                    <div class="tab-pane active show" id="tab-1">
                        <div class="row">
                            <div class="col-lg-12 details profile">
                                @include('frontend.auth.profile')
                            </div>
                        </div>
                    </div>
                    <div class="tab-pane" id="tab-2">
                        <div class="row">
                            <div class="col-lg-12 details 2fa">
                                @include('frontend.auth.2fasetting')
                            </div>
                        </div>
                    </div>
                    <div class="tab-pane" id="tab-4">
                        <div class="row">
                            <div class="col-lg-12 details preference py-3">
                                <div class="row">
                                    <div class="col-lg-12 col-md-12 col-12">
                                        <div class=" card-header py-3 bg-white">
                                            {{ __('Preferences') }}
                                        </div>
                                        <div class="form-check form-switch">
                                            <div class="checkbox">
                                                <label>
                                                    <div onclick="preferenceToggle()">
                                                        <input type="checkbox" name="preference" id="preference"
                                                            data-toggle="toggle" data-on="Right" data-off="Left"
                                                            data-width="100" data-offstyle="secondary"
                                                            {{ auth()->user()->preference == 'Right' ? 'checked' : '' }}>
                                                    </div>
                                                </label>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>
    </div>
    <input type="hidden" id="readOnlyMode" value="{{ readOnlyMode() }}">
@endsection
@push('scripts')
    <link href="{{ asset('frontend/css/bootstrap-toggle-v2/bootstrap-toggle.min.css') }}" rel="stylesheet">
    <script src="{{ asset('frontend/js/bootstrap-toggle-v2/bootstrap-toggle.min.js') }}"></script>
    <script src="{{ asset('frontend/js/pages-js/frontend-profile.js') }} "></script>
@endpush