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

@section('content')
  <div class="content">
    <div class="container-fluid">
      <div class="row">
        <a href="{{ route('user.index') }}" class="btn btn-sm btn-default">{{ __('Back to list') }}</a>
      </div>
      <div class="row">
        <div class="col-md-12">
          <form method="post" enctype="multipart/form-data" action="{{ route('user.store') }}" autocomplete="off" class="form-horizontal">
            @csrf
            @method('post')

            <div class="card ">
              <div class="card-header card-header-primary card-header-icon">
                <div class="card-icon">
                  <i class="material-icons">person</i>
                </div>
                <h4 class="card-title">{{ __('Add User') }}</h4>
              </div>
              <div class="card-body">
                {{-- Profile Pic --}}
                <div class="row text-center">
                  <label class="col-sm-2 col-form-label"></label>
                  <div class="col-sm-7">
                    <label class="col-sm-12">{{ __('First Name') }}</label>

                    <div class="fileinput fileinput-new text-center" data-provides="fileinput">

                      <div class="fileinput-new thumbnail img-circle">

                        <img src="{{ asset('material') }}/img/placeholder.jpg" alt="...">
                      </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>
                {{-- First Name --}}
                <div class="row">
                  <label class="col-sm-2 col-form-label"></label>
                  <div class="col-sm-7">
                    <div class="form-group{{ $errors->has('first_name') ? ' has-danger' : '' }}">
                      <label>{{ __('First Name') }}</label>
                      <input class="form-control{{ $errors->has('first_name') ? ' is-invalid' : '' }}" name="first_name" id="input-first_name" type="text" value="{{ old('first_name') }}" required="true" aria-required="true"/>
                      @include('alerts.feedback', ['field' => 'first_name'])
                    </div>
                  </div>
                </div>
                <br>
                {{-- Last Name --}}
                <div class="row">
                  <label class="col-sm-2 col-form-label"></label>
                  <div class="col-sm-7">
                    <div class="form-group{{ $errors->has('last_name') ? ' has-danger' : '' }}">
                      <label>{{ __('Last Name') }}</label>
                      <input class="form-control{{ $errors->has('last_name') ? ' is-invalid' : '' }}" name="last_name" id="input-last_name" type="text" value="{{ old('last_name') }}" required="true" aria-required="true"/>
                      @include('alerts.feedback', ['field' => 'last_name'])
                    </div>
                  </div>
                </div>
                <br>
                {{-- Email --}}
                <div class="row">
                  <label class="col-sm-2 col-form-label"></label>
                  <div class="col-sm-7">
                    <div class="form-group{{ $errors->has('email') ? ' has-danger' : '' }}">
                      <label>{{ __('Email') }}</label>
                      <input class="form-control{{ $errors->has('email') ? ' is-invalid' : '' }}" name="email" id="input-email" type="email" value="{{ old('email') }}" required />
                      @include('alerts.feedback', ['field' => 'email'])
                    </div>
                  </div>
                </div>
                <br>
                {{-- Role --}}
                <div class="row">
                  <label class="col-sm-2 col-form-label"></label>
                  <div class="col-sm-7">
                    <div class="form-group{{ $errors->has('role_id') ? ' has-danger' : '' }}">
                      <label>{{ __('Role') }}</label>
                      <select class="selectpicker col-sm-12 pl-0 pr-0" name="role_id" data-style="select-with-transition" title="" data-size="100">
                        <option value="1" @if (old('role_id') == '1') selected="selected" @endif>{{ __('Admin') }}</option>
                        <option value="2" @if (old('role_id') == '2') selected="selected" @endif>{{ __('Creator') }}</option>
                        <option value="3" @if (old('role_id') == '3') selected="selected" @endif>{{ __('Member') }}</option>
                      </select>
                      @include('alerts.feedback', ['field' => 'role_id'])
                    </div>
                  </div>
                </div>
                <br>
                {{-- Password --}}
                <div class="row">
                  <label class="col-sm-2 col-form-label"></label>
                  <div class="col-sm-7">
                    <div class="form-group{{ $errors->has('password') ? ' has-danger' : '' }}">
                      <label for="input-password">{{ __(' Password') }}</label>
                      <input class="form-control{{ $errors->has('password') ? ' is-invalid' : '' }}" input type="password" name="password" id="input-password" placeholder="{{ __('*****') }}" />
                      @include('alerts.feedback', ['field' => 'password'])
                    </div>
                  </div>
                </div>
                <br>
                {{-- Confirm Password --}}
                <div class="row">
                  <label class="col-sm-2 col-form-label"></label>
                  <div class="col-sm-7">
                    <div class="form-group">
                      <label for="input-password-confirmation">{{ __('Confirm Password') }}</label>
                      <input class="form-control" name="password_confirmation" id="input-password-confirmation" type="password" placeholder="{{ __('*****') }}" />
                    </div>
                  </div>
                </div>

                <button type="submit" class="btn btn-primary pull-right">{{ __('Add User') }}</button>
              </div>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
@endsection