@extends('layouts.backend.master')
@section('title', e(__('My Profile')))
@section('content-width-class', '')
@section('content')

    <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" data-toggle="tab" href="#tab-1">
                        <span class="step-number"><i class="fas fa-user-secret"></i></span>
                        <span class="step-text">{{__('Profile') }}</span>
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" data-toggle="tab" href="#tab-2">
                        <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>
            </ul>
        </div>

        <div class="col-md-8 col-lg-9 tabDiv">
            <div class="tab-content">
                <div class="tab-pane active show" id="tab-1">
                    <div class="row">
                        <div class="col-lg-12 details">
                            <div class="card">
                                <div class="card-body">
                                    <form class="row" id="profileForm"
                                          action="{{ route('super-user.profile.update',encrypt($superUser->id)) }}"
                                          method="POST"
                                          autocomplete="off"
                                          enctype="multipart/form-data"
                                    >
                                        @csrf 
                                        <div class="col-lg-4 col-md-6">
                                            <div class="card">
                                                <div class="card-body box-profile">
                                                    <div class="setting-profile-info d-none justify-content-center">
                                                        <div class="profile-img">
                                                            <img src="{{ asset('backend/images/default/no-preview-available.png') }}" id="profile-image" alt="dashboard" class="profile-user-img img-fluid img-circle">
                                                            <label for="profile-img">
                                                                <!-- <img src="{{ asset('backend/images/default/camera.svg') }}" alt="dashboard" class="img-fluid"> -->
                                                            </label>
                                                            <!-- <input type="file" name="avatar" id="profile-img"> -->
                                                        </div>
                                                    </div>

                                                    <ul class="list-group mt-3 mb-3">
                                                        <li class="list-group-item">
                                                            <b>{{__('Role') }}</b>
                                                            @foreach($superUser->roles as $role)
                                                                <span class="float-right badge badge-primary mr-1">{{ formatRole($role->name) }}</span>
                                                            @endforeach
                                                        </li>
                                                        <li class="list-group-item">
                                                            <b>{{__('Email') }}</b> <a class="float-right">{{ $superUser->email }}</a>
                                                        </li>
                                                    </ul>
                                                    @if (count($superUser->roles) > 1)
                                                    <div>
                                                        <div class="form-group">
                                                            <label for="password">{{__('Switch Role') }}<span class="text-danger">
                                                                </span></label>
                                                            <select name="switchRole" class="form-control" id="roles-select">
                                                                @foreach($superUser->roles as $role)
                                                                <option value="{{$role->name}}">{{ formatRole($role->name)
                                                                    }}</option>
                                                                @endforeach
                                                            </select>

                                                        </div>

                                                    </div>
                                                    @endif
                                                </div>
                                                <!-- /.card-body -->
                                            </div>
                                        </div>

                                        <div class="col-lg-8 col-md-6">
                                            <div class="form-group">
                                                <label for="name">Name<span class="text-danger"> *</span></label>
                                                <input type="text"
                                                       name="name"
                                                       value="{{ old('name', $superUser->name) }}"
                                                       class="username-validation form-control {{ $errors->has('name') ? ' is-invalid' : '' }}"
                                                       id="name"
                                                       placeholder=""
                                                >
                                                @if($errors->has('name'))
                                                    <span class="invalid-feedback">
                                                        <strong>{{ $errors->first('name') }}</strong>
                                                    </span>
                                                @endif
                                            </div>
                                            <div class="form-group">
                                                <label for="name">Email<span class="text-danger">*</span></label>
                                                <input type="email"
                                                       name="email"
                                                       value="{{ old('email',Auth::user()->email) }}"
                                                       class="email-validation form-control {{ $errors->has('email') ? 'border-danger' : '' }}"
                                                       id="email"
                                                       placeholder="{{__('email')}}"
                                                >
                                                @if($errors->has('email'))
                                                    <span class="invalid-feedback">
                                                        <strong>{{ $errors->first('email') }}</strong>
                                                    </span>
                                                @endif
                                                <div class="text-danger">{{__('If you change email address, you will need to verify again.') }}</div>
                                            </div>
                                            <div class="form-group">
                                                <label for="password">{{__('Old Password') }}<span class="text-danger"> </span></label>
                                                <div class="input-group" id="show_hide_password">
                                                    <input type="password"
                                                           name="old_password"
                                                           value="{{ old('old_password') }}"
                                                           class="form-control {{ $errors->has('old_password') ? ' is-invalid' : '' }}"
                                                           id="old_password"
                                                           placeholder="Type Password"
                                                    >
                                                    <div class="input-group-append">
                                                        <div class="input-group-text">
                                                            <a href="" data-id="old_password">
                                                                <i class="fa fa-eye-slash old_password" aria-hidden="true"></i>
                                                            </a>
                                                        </div>
                                                    </div>
                                                </div>
                                                @if($errors->has('old_password'))
                                                        <span class="invalid-feedback">
                                                        <strong>{{ $errors->first('old_password') }}</strong>
                                                    </span>
                                                @endif
                                            </div>

                                            <div class="form-group">
                                                <label for="password">{{__('New Password') }}<span class="text-danger"> </span></label>
                                                <div class="input-group" id="show_hide_password">
                                                    <input type="password"
                                                           name="password"
                                                           class="form-control {{ $errors->has('password') ? ' is-invalid' : '' }}"
                                                           id="password"
                                                           placeholder="Type Password"
                                                    >
                                                    <div class="input-group-append">
                                                        <div class="input-group-text">
                                                            <a href="" data-id="password">
                                                                <i class="fa fa-eye-slash password" aria-hidden="true"></i>
                                                            </a>
                                                        </div>
                                                    </div>
                                                </div>
                                                @if($errors->has('password'))
                                                        <span class="invalid-feedback">
                                                            <strong>{{ $errors->first('password') }}</strong>
                                                        </span>
                                                @endif
                                            </div>

                                            <div class="form-group">
                                                <label for="password_confirmation">{{__('Confirm Password') }}<span class="text-danger"> </span></label>
                                                <div class="input-group" id="show_hide_password">
                                                    <input type="password"
                                                           name="password_confirmation"
                                                           class="form-control"
                                                           id="password_confirmation"
                                                           placeholder="Re-type Password"
                                                    >
                                                    <div class="input-group-append">
                                                        <div class="input-group-text">
                                                            <a href="" data-id="password_confirmation">
                                                                <i class="fa fa-eye-slash password_confirmation" aria-hidden="true"></i>
                                                            </a>
                                                        </div>
                                                    </div>
                                                </div>
                                                @if($errors->has('password_confirmation'))
                                                        <span class="invalid-feedback">
                                                            <strong>{{ $errors->first('password_confirmation') }}</strong>
                                                        </span>
                                                @endif
                                            </div>

                                            <button type="submit" id="submitBtn" class="btn btn btn-primary float-right">{{__('Update') }}</button>
                                        </div>
                                    </form>
                                </div>
                                <!-- /.card-body -->
                            </div>
                        </div>
                    </div>
                </div>
                <div class="tab-pane" id="tab-2">
                    <div class="row">
                        <div class="col-lg-12 details">
                            @include('backend.super_user.settings.2fa')

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

@endsection
@push('scripts')
    <script src="{{asset('frontend/js/pages-js/super-user-profile.js')}}"></script>
    <script>
let readOnlyMode = '{{ readOnlyMode() }}';
</script>
@endpush