@extends('company_portal.layouts.master')

@section('title','Add User')
@section('header')
	@include('company_portal.partials.header')
@endsection

@section('content')

<section class="main-container">
  <div class="padding">

      <div class="box-white">
        <form action="{{ route('store_company_user') }}" method="POST" enctype="multipart/form-data">
            @csrf
          <div class="d-flex align-items-start justify-content-start align-items-md-center justify-content-md-between flex-column flex-md-row mb-3 mb-md-0">
              <div class="mb-2 m-md-0">
                  <h1 class="mb-0">Add new user</h1>
              </div>
              <div>
                  <ul class="list-inline mb-0">
                      <li class="list-inline-item py-1">
                          <a href="{{route('users_list_commercial_portal')}}" class="btn invert">Cancel</a>
                      </li>
                  </ul>
              </div>
          </div>

          <hr class="my-4">

          {{-- <div class="d-flex avatar-inline flex-row flex-wrap  align-items-center mb-2 mb-sm-4">
              <div class="single">Avatar</div>
              <div class="single">
                    <div class="avatar">
                        <img id="user_image" class="avatar-settings rounded-circle" src="{{asset('images/reef-logo-rounded.png')}}" alt="#">
                    </div>
              </div>
              <div class="single">
                  <p class="mb-1"><a href="#" class="btn upload">Upload new photo</a></p>
                  <p class="mb-0 smaller">Allowed JPG, GIF or PNG. Max Size of 800KB</p>
              </div>
              <div class="single">
                  <p class="mb-0"><a href="#" class="btn reset invert">Reset</a></p>
                  <p class="mb-0 smaller">&nbsp;</p>
              </div>
          </div> --}}

          <div class="form-max">
              <div class="d-flex flex-column flex-sm-row flex-wrap mb-2 align-items-start align-items-sm-center">
                  <div class="label"><label>Name</label></div>
                    <div class="input"><input type="text" name="name" class="form-control" value="{!! old('name') !!}" required placeholder="Full Name">
                        @if ($errors->has('name'))
                            <span class="help-block error">
                                <strong>{{ $errors->first('name') }}</strong>
                            </span>
                        @endif
                    </div>
              </div>

              <div class="d-flex flex-column flex-sm-row flex-wrap mb-2 align-items-start align-items-sm-center">
                  <div class="label"><label>E-mail</label></div>
                  <div class="input"><input type="email" name="email" class="form-control mb-1" value="{!! old('email') !!}" placeholder="E-mail">
                    @if ($errors->has('email'))
                        <span class="help-block error">
                            <strong class="font-medium mb-1 text-danger mt-3 ">{{ $errors->first('email') }}</strong>
                        </span>                
                    @endif
                  </div>
              </div>

              <div class="d-flex flex-column flex-sm-row flex-wrap mb-2 align-items-start align-items-sm-center">
                    <div class="label"><label>Confirm <br>e-mail</label></div>
                    <div class="input"><input  name="username" class="form-control mb-1" value="{!! old('username') !!}" required placeholder="Confirm e-mail">
                        @if ($errors->has('username'))
                            <span class="help-block error">
                                <strong>{{ $errors->first('username') }}</strong>
                            </span>
                        @endif
                    </div>
              </div>
          </div>
                
    @if(session()->has('success-add-user'))
        <p class="font-medium mb-1 text-success mt-3">User has been added sucessfully. Please let him know to check his email and complete the registration.</p>
    @endif

    @if(session()->has('msg_error'))
        <p class="font-medium mb-1 text-danger mt-3">Something went wrong. Please try again.</p>
    @endif
          <hr class="my-4">
          <ul class="list-inline mb-0">
              {{-- <li class="list-inline-item"><a href="#" class="btn">Save User</a></li>
              <li class="list-inline-item"><a href="#" class="btn invert">Cancel</a></li> --}}

              <li class="list-inline-item"><button type="submit" class="btn">Save User</button></li>
              <li class="list-inline-item"><a href="{{route('users_list_commercial_portal')}}" class="btn invert">Cancel</a></li>
          </ul>
        </form>
      </div>

  </div>
</section>


@endsection

@push('scripts')
<script type="text/javascript">

    $(document).ready( function () {


    $(document).on('click','.resetButton',function(e) {
        document.getElementById('user_image').src="{{asset('images/avatar.png')}}";
        $('#imgInp').val('');
    });
        function readURL(input) {
            //console.log(input);
            if (input.files && input.files[0]) {
                var reader = new FileReader();

                reader.onload = function (e) {
                    $('#user_image').attr('src', e.target.result);
                }

                reader.readAsDataURL(input.files[0]);
            }
        }


        $(".imgInp").change(function(){
            readURL(this);
        });

        $('#user_image').click(function(){ $('#imgInp').trigger('click'); });

        $('#role-select').change(function(){
            if($(this).val() == '1' || $(this).val() == '2' || $(this).val() == '3'){
                $('#language-select').css('display', 'block');
            } else {
                $('#language-select').css('display', 'none');
            }
        });

        @if(session()->has('error'))
          $(document).Toasts('create', {
            class: 'bg-danger',
            title: 'Error',
            body: '{!! session()->get('error') !!}',
            autohide: true,
            delay: 5000
          })
        @elseif(session()->has('success'))
          $(document).Toasts('create', {
            class: 'bg-success',
            title: 'Success',
            body: '{!! session()->get('success') !!}',
            autohide: true,
            delay: 5000
          });
        @endif
    } );
</script>
@endpush