@extends('portal.layouts.app', ['activePage' => 'user-management', 'titlePage' => __('User Management')])

@section('content')
  <div class="content">
    <div class="container-fluid">
      <div class="row">
        <div class="col-md-12">
          <form method="post" action="{{ route('user.update', $user) }}" autocomplete="off" class="form-horizontal" enctype="multipart/form-data">
            @csrf
            @method('put')

            <div class="card ">
              <div class="card-header card-header-primary">
                <h4 class="card-title">{{ __('Edit User') }}</h4>
                <p class="card-category"></p>
              </div>
              <div class="card-body ">
                <div class="row">
                  <div class="col-md-12 text-right">
                      <a href="{{ route('user.index') }}" class="btn btn-sm btn-primary">{{ __('Back to list') }}</a>
                  </div>
                </div>
                  <div class="row">
                  <div class="col-md-4">
                      <div class="row">
                          <div class="col-sm-4 text-center">
                              <div class="kv-avatar">
                                  <div class="file-loading">
                                      <input id="avatar-1" name="avatar" type="file">
                                  </div>
                              </div>
                              <div class="kv-avatar-hint">
                                  <small>Select file < 1500 KB</small>
                              </div>
                          </div>
                          <div id="kv-avatar-errors-1" class="center-block"
                               style="width:800px;display:none"></div>
                      </div>
                  </div>
                  <div class="col-md-8">
                      <div class="row">
                          <label class="col-sm-2 col-form-label">{{ __('Role') }}</label>
                          <div class="col-sm-7">
                              <div class="form-group{{ $errors->has('role') ? ' has-danger' : '' }}">
                                  <select class="form-control" name="role_id" required>
                                      @foreach(\TCG\Voyager\Models\Role::all() as $role)
                                          <option @if($user->role->id == $role->id)selected @endif value="{{$role->id}}">{{$role->name}}</option>
                                      @endforeach
                                  </select>
                                  @if ($errors->has('name'))
                                      <span id="name-error" class="error text-danger"
                                            for="input-name">{{ $errors->first('name') }}</span>
                                  @endif
                              </div>
                          </div>
                      </div>

                      <div class="row">
                          <label class="col-sm-2 col-form-label">{{ __('Name') }}</label>
                          <div class="col-sm-7">
                              <div class="form-group{{ $errors->has('name') ? ' has-danger' : '' }}">
                                  <input
                                      class="form-control{{ $errors->has('name') ? ' is-invalid' : '' }}"
                                      name="name" id="input-name" type="text"
                                      placeholder="{{ __('Name') }}"
                                      value="{{ old('name', $user->name) }}" required="true"
                                      aria-required="true"/>
                                  @if ($errors->has('name'))
                                      <span id="name-error" class="error text-danger"
                                            for="input-name">{{ $errors->first('name') }}</span>
                                  @endif
                              </div>
                          </div>
                      </div>
                      <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
                                      class="form-control{{ $errors->has('email') ? ' is-invalid' : '' }}"
                                      name="email" id="input-email" type="text"
                                      placeholder="{{ __('Email') }}"
                                      value="{{ old('email', $user->email) }}"
                                      required="true"
                                      aria-required="true"/>
                                  @if ($errors->has('email'))
                                      <span id="email-error" class="error text-danger"
                                            for="input-email">{{ $errors->first('email') }}</span>
                                  @endif
                              </div>
                          </div>
                      </div>
                      <div class="row">
                          <label class="col-sm-2 col-form-label">{{ __('Phone') }}</label>
                          <div class="col-sm-7">
                              <div class="form-group{{ $errors->has('phone') ? ' has-danger' : '' }}">
                                  <input
                                      class="form-control{{ $errors->has('phone') ? ' is-invalid' : '' }}"
                                      name="phone" type="text" placeholder="{{ __('phone') }}"
                                      value="{{ old('phone', $user->phone) }}" />
                                  @if ($errors->has('phone'))
                                      <span id="email-error" class="error text-danger"
                                            for="input-email">{{ $errors->first('phone') }}</span>
                                  @endif
                              </div>
                          </div>
                      </div>
                      <div class="row">
                          <label class="col-sm-2 col-form-label">{{ __('Location') }}</label>
                          <div class="col-sm-7">
                              <div
                                  class="form-group{{ $errors->has('location') ? ' has-danger' : '' }}">
                                  <input
                                      class="form-control{{ $errors->has('location') ? ' is-invalid' : '' }}"
                                      name="location" type="text" placeholder="{{ __('Location') }}"
                                      value="{{ old('location', $user->location) }}"/>
                                  @if ($errors->has('location'))
                                      <span id="email-error" class="error text-danger"
                                            for="input-email">{{ $errors->first('location') }}</span>
                                  @endif
                              </div>
                          </div>
                      </div>
                      <div class="row">
                          <label class="col-sm-2 col-form-label">{{ __('Bio') }}</label>
                          <div class="col-sm-7">
                              <div class="form-group{{ $errors->has('bio') ? ' has-danger' : '' }}">
                                                <textarea
                                                    class="form-control{{ $errors->has('bio') ? ' is-invalid' : '' }}"
                                                    name="bio" type="text" placeholder="{{ __('Bio') }}"
                                                    value="{{ old('bio', $user->bio) }}"></textarea>
                                  @if ($errors->has('bio'))
                                      <span id="email-error" class="error text-danger"
                                            for="input-email">{{ $errors->first('bio') }}</span>
                                  @endif
                              </div>
                          </div>
                      </div>
                      <div class="row">
                          <label class="col-sm-2 col-form-label" for="input-password">{{ __(' 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' : '' }}" input type="password" name="password" id="input-password" placeholder="{{ __('Password') }}" />
                                  @if ($errors->has('password'))
                                      <span id="name-error" class="error text-danger" for="input-name">{{ $errors->first('password') }}</span>
                                  @endif
                              </div>
                          </div>
                      </div>
                  </div>
                  </div>
              </div>
              <div class="card-footer ml-auto mr-auto">
                <button type="submit" class="btn btn-primary">{{ __('Save') }}</button>
              </div>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
@endsection
@section('script')
    <script src="{{asset('js/plugins/piexif.js')}}" type="text/javascript"></script>
    <script src="{{asset('js/plugins/sortable.js')}}" type="text/javascript"></script>
    <script src="{{asset('js/fileinput.js')}}" type="text/javascript"></script>
    <script src="{{asset('js/locales/fr.js')}}" type="text/javascript"></script>
    <script src="{{asset('js/locales/es.js')}}" type="text/javascript"></script>
    <script src="{{asset('themes/fas/theme.js')}}" type="text/javascript"></script>
    <script src="{{asset('themes/explorer-fas/theme.js')}}" type="text/javascript"></script>

    <!-- the fileinput plugin initialization -->
    <script>
        $("#avatar-1").fileinput({
            theme: 'fas',
            overwriteInitial: true,
            maxFileSize: 1500,
            showClose: false,
            showCaption: false,
            browseLabel: '',
            removeLabel: '',
            browseIcon: '<i class="fa fa-folder-open"></i>',
            removeIcon: '<i class="fa fa-trash"></i>',
            removeTitle: 'Cancel or reset changes',
            elErrorContainer: '#kv-avatar-errors-1',
            msgErrorClass: 'alert alert-block alert-danger',
            defaultPreviewContent: '<img  style="width: 200px" src="{{Storage::disk('public')->url('users/default.png')}}" alt="Your Avatar">',
            layoutTemplates: {main2: '{preview}  {remove} {browse}'},
            allowedFileExtensions: ["jpg", "png", "gif"]
        });
    </script>
@endsection
@section('style')
    <link href="{{asset('css/fileinput.css')}}" media="all" rel="stylesheet" type="text/css"/>
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" crossorigin="anonymous">
    <link href="{{asset('themes/explorer-fas/theme.css')}}" media="all" rel="stylesheet" type="text/css"/>
    <style>
        .kv-avatar .krajee-default.file-preview-frame, .kv-avatar .krajee-default.file-preview-frame:hover {
            margin: 0;
            padding: 0;
            border: none;
            box-shadow: none;
            text-align: center;
        }

        .kv-avatar {
            display: inline-block;
        }

        .kv-avatar .file-input {
            display: table-cell;
            width: 213px;
        }

        .kv-reqd {
            color: red;
            font-family: monospace;
            font-weight: normal;
        }
    </style>
@endsection