@extends('company_portal.layouts.master')

@section('title','Edit User')

@section('header')
	@include('company_portal.partials.header')
@endsection

@section('content')
<section class="main-container">
  <div class="padding">
    <form action="{{route('update_company_user', ['id' => $user_of_comp->id])}}" method="POST" enctype="multipart/form-data">
        @csrf
      <div class="box-white">
          <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">Edit 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">
                    @if($user_of_comp->avatar)
                        <img id="user_image" class="avatar-settings rounded-circle " src="{{ route('file_storage_serve', ['params' => 'images', 'file' => $user_of_comp->freelancer->avatar]) }}" width="100" style="cursor: pointer">
                    @else 
                        <img id="user_image" class="avatar-settings rounded-circle" src="{{route('file_storage_serve', ['params' => 'images', 'file' => 'avatar.jpg'])}}" alt="#">
                    @endif
                  </div>
              </div>
              <div class="single">
                  <p class="mb-1">
                    {{-- <a href="#" class="btn upload">Upload new photo</a> --}}
                    <input type="file" id="imgInp" class="btn upload account-settings-fileinput imgInp" name="avatar">
                  </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 resetButton">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 name="name" type="text" class="form-control" value="@if($user_of_comp->name){{$user_of_comp->name}} @else{!! old('name') !!} @endif"  required autocomplete="off">
                    @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 name="username" type="text" class="form-control" value="@if($user_of_comp->username){{$user_of_comp->username}} @else{!! old('username') !!} @endif" required autocomplete="off">
                    @if ($errors->has('username'))
                      <span class="help-block error">
                                          <strong>{{ $errors->first('username') }}</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="email" type="text" class="form-control" value="@if($user_of_comp->email){{$user_of_comp->email}} @else{!! old('email') !!} @endif" required autocomplete="off">
                      @if ($errors->has('email'))
                      <div class="alert alert-warning mt-3">
                        Your email is not confirmed. Please check your inbox.<br>
                        <a href="javascript:void(0)">Resend confirmation</a>
                      </div>
                      @endif
                    </div>
                </div>
          </div>

             
          
          <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 green my-3">Save changes</button></li>
                {{-- <a href="{{route('users_list_commercial_portal')}}" class="btn btn-default m-3">Cancel</a> --}}
              <li class="list-inline-item"><a href="{{route('users_list_commercial_portal')}}" class="btn invert">Cancel</a></li>
          </ul>
      </div>
    </form>
  </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