@extends('layouts.app', ['activePage' => 'profile', 'menuParent' => 'laravel', 'titlePage' => __('User Profile')])

@section('content')
  <div class="content">
    <div class="container-fluid">
      <div class="row">
        {{-- Left --}}
          <div class="col-md-12">
            {{-- Edit Profile --}}
            <div class="card">
              <div class="card-header card-header-icon card-header-primary">
                <div class="card-icon">
                  <i class="material-icons">perm_identity</i>
                </div>
                <h4 class="card-title">{{ __('Edit Profile') }}
                </h4>
              </div>
              <div class="card-body">
                <form method="post" enctype="multipart/form-data" action="{{ route('profile.update') }}" autocomplete="off" class="form-horizontal">
                  @csrf
                  @method('put')

                  {{-- Edit Profile Picture --}}
                  <div class="row">
                    <label class="col-sm-2 col-form-label">{{ __('Profile photo') }}</label>
                    <div class="col-sm-7">
                      <div class="fileinput fileinput-new text-center" data-provides="fileinput">
                        <div class="fileinput-new thumbnail img-circle">
                          @if (auth()->user()->picture)
                            <img src="{{ auth()->user()->profilePicture() }}" alt="...">
                          @else
                            <img src="{{ asset('material') }}/img/placeholder.jpg" alt="...">
                          @endif
                        </div>
                        <div class="fileinput-preview fileinput-exists thumbnail img-circle"></div>
                        <div>
                          <span class="btn btn-primary btn-file">
                            <span class="fileinput-new">{{ __('Select image') }}</span>
                            <span class="fileinput-exists">{{ __('Change') }}</span>
                            <input type="file" name="photo" id = "input-picture" />
                          </span>
                            <a href="#pablo" class="btn btn-danger fileinput-exists" data-dismiss="fileinput"><i class="fa fa-times"></i> {{ __('Remove') }}</a>
                        </div>
                        @include('alerts.feedback', ['field' => 'photo'])
                      </div>
                    </div>
                  </div>

                  {{-- Edit First Name --}}
                  <div class="row">
                    <label class="col-sm-2 col-form-label">{{ __('First Name') }}</label>
                    <div class="col-sm-7">
                      <div class="form-group{{ $errors->has('first_name') ? ' has-danger' : '' }}">
                        <input disabled class="form-control{{ $errors->has('first_name') ? ' is-invalid' : '' }}" name="first_name" id="input-first-name" type="text" placeholder="{{ __('First Name') }}" value="{{ old('name', auth()->user()->first_name) }}" required="true" aria-required="true"/>
                        @include('alerts.feedback', ['field' => 'first_name'])
                      </div>
                    </div>
                  </div>

                  {{-- Edit First Name --}}
                  <div class="row">
                    <label class="col-sm-2 col-form-label">{{ __('Last Name') }}</label>
                    <div class="col-sm-7">
                      <div class="form-group{{ $errors->has('last_name') ? ' has-danger' : '' }}">
                        <input disabled class="form-control{{ $errors->has('last_name') ? ' is-invalid' : '' }}" name="last_name" id="input-last-name" type="text" placeholder="{{ __('last Name') }}" value="{{ old('name', auth()->user()->last_name) }}" required="true" aria-required="true"/>
                        @include('alerts.feedback', ['field' => 'last_name'])
                      </div>
                    </div>
                  </div>

                  {{-- Edit Email --}}
                  <div class="row">
                    <label class="col-sm-2 col-form-label">{{ __('Email') }}</label>
                    <div class="col-sm-7">
                      <div class="form-group{{ $errors->has('email') ? ' has-danger' : '' }}">
                        <input disabled class="form-control{{ $errors->has('email') ? ' is-invalid' : '' }}" name="email" id="input-email" type="email" placeholder="{{ __('Email') }}" value="{{ old('email', auth()->user()->email) }}" required />
                        @include('alerts.feedback', ['field' => 'email'])
                      </div>
                    </div>
                  </div>

                  <button type="submit" class="btn btn-primary pull-right">{{ __('Update Profile') }}</button>
                  <div class="clearfix"></div>
                </form>
              </div>
            </div>

            {{-- Edit Password --}}
            <div class="card">
              <div class="card-header card-header-icon card-header-primary">
                <div class="card-icon">
                  <i class="material-icons">lock</i>
                </div>
                <h4 class="card-title">{{ __('Change password') }}</h4>
              </div>
              <div class="card-body">
                <form method="post" action="{{ route('profile.password') }}" class="form-horizontal">
                  @csrf
                  @method('put')

                  <div class="row">
                    <label class="col-sm-2 col-form-label" for="input-current-password">{{ __('Current Password') }}</label>
                    <div class="col-sm-7">
                      <div class="form-group{{ $errors->has('old_password') ? ' has-danger' : '' }}">
                        <input class="form-control{{ $errors->has('old_password') ? ' is-invalid' : '' }}" input type="password" name="old_password" id="input-current-password" placeholder="{{ __('Current Password') }}" value="" required />
                        @include('alerts.feedback', ['field' => 'old_password'])
                      </div>
                    </div>
                  </div>
                  <div class="row">
                    <label class="col-sm-2 col-form-label" for="input-password">{{ __('New Password') }}</label>
                    <div class="col-sm-7">
                      <div class="form-group{{ $errors->has('password') ? ' has-danger' : '' }}">
                        <input class="form-control{{ $errors->has('password') ? ' is-invalid' : '' }}" name="password" id="input-password" type="password" placeholder="{{ __('New Password') }}" value="" required />
                        @include('alerts.feedback', ['field' => 'password'])
                      </div>
                    </div>
                  </div>
                  <div class="row">
                    <label class="col-sm-2 col-form-label" for="input-password-confirmation">{{ __('Confirm New Password') }}</label>
                    <div class="col-sm-7">
                      <div class="form-group">
                        <input class="form-control" name="password_confirmation" id="input-password-confirmation" type="password" placeholder="{{ __('Confirm New Password') }}" value="" required />
                      </div>
                    </div>
                  </div>
                  <button type="submit" class="btn btn-primary pull-right">{{ __('Change password') }}</button>
                  <div class="clearfix"></div>
                </form>
              </div>
            </div>
        </div>
      </div>
    </div>
  </div>
@endsection