%head
  %title Sample 21 - How to Create and Upload Envelop to GroupDocs account
  %link(rel="stylesheet" type="text/css" href="/css/style.css")
  %script{:src=>'//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js'}
%body
  %h3{:style => 'text-align:center;'}
    %a{:href => '/'} GroupDocs Ruby SDK Samples
    %br/
    Sample 21 - How to Create and Upload Envelop to GroupDocs account
  .samplecontent{:style => 'padding:10px;'}
    %i This sample will show how to Create and Upload Envelop to GroupDocs account using Ruby SDK
    %br/
    %br/
    %span.documentation
      %a{:href => '/docs/sample21.html'} Builtin documentation for this sample
    %br/
    %br/
    %p
      You entered:
    %p
      UserId = #{(defined? userId) ? userId : ''}
    %p
      PrivateKey = #{(defined? privateKey) ? privateKey : ''}
    %p
      Email = #{(defined? email) ? email : ''}
    %p
      Name = #{(defined? name) ? name : ''}
    %p
      Last Name = #{(defined? lastName) ? lastName : ''}
    %p
      %font{:color => 'red'} #{(defined? err) ? err : ''}
    %br/
    #requestForm{:style => 'padding:20px; border:1px solid black;'}
      %p Enter data for request and press "Make request" button
      %form{:action => '/sample-21-how-to-create-and-upload-envelop-to-groupdocs-account', :enctype => 'multipart/form-data', :method => 'post'}
        %label{:for => 'clientId'} GroupDocs ClientID
        %br/
        %input{:type=>'text', :name=>'clientId'}
        %br/
        %label{:for => 'privateKey'} GroupDocs PrivateKey
        %br/
        %input{:type=>'text', :name=>'privateKey'}
        %br/
        %label{:for => 'email'} Email
        %br/
        %input{:type=>'text', :name=>'email'}
        %br/
        %label{:for => 'name'} Name
        %br/
        %input{:type=>'text', :name=>'name'}
        %br/
        %label{:for => 'lastName'} Last Name
        %br/
        %input{:type=>'text', :name=>'lastName'}
        %br/
        %div.guid_radio
          %input{:type=>'radio', :name=>'source', :value=>'guid'} File ID (GUID)
          %br/
          %input{:type=>'radio', :name=>'source', :value=>'local', :checked=>'checked'}Upload local file
          %br/
          %input{:type=>'radio', :name=>'source', :value=>'url'} Upload file from URL
          %br/

        %div.guid_field{:style=>'display:none;'}
          %label{:for=>'fileId', :id=>'guid'} File ID (GUID)
          %br/
          %input{:type=>'text', :name=>'fileId'}

        %div.guid_field
          %label{:for=>'file'} Upload local file
          %br/
          %input{:type=>'file', :name=>'file'}

        %div.guid_field{:style=>'display:none;'}
          %label{:for=>'url', :id=>'url'} Upload file from URL
          %br/
          %input{:type=>'text', :name=>'url'}

        %br/
        %label{:for=>'callback'}
          Callback URL
          %span.optional (Optional)
          %br/
          %font{:color=>'grey'} (For test Callback you can use this URL: http://groupdocs-ruby-samples.herokuapp.com/sample21/signature_callback)
        %input{:type=>'text', :size=>'70', :value=>"#{(defined? callback) ? callback : ''}", :name=>'callback'}
        %br/
        %label{:for => 'basePath'} Base Path
        %span{:class => 'optional'} (Optional)
        %br/
        %input{:type=>'text', :name=>'basePath'}
        %br/
        %br/
        %input{:type => 'submit', :value => 'Make request'}
        %span{:id=>'results_status', :style=>'color:red;display:none;'} (Please wait for ajax response)
        %br/
      %iframe{:id=>'downloadframe', :style=>'display:none'}
    %div{:style => 'padding:20px; border:1px solid black;'}
      %p
        Results:
        %br/
      #{(defined? message) ? message : ''}
      #{(defined? iframe) ? iframe : ''}

  = partial :_others_samples
  %script{:src=>'//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js'}
  :javascript
    function check() {
      $.get('/sample21/check', function(data) {
        $('#results_status').fadeOut("slow");
        $('#downloadframe').attr("src", "/sample21/downloads/" + data);
      }, 'text');
    }
    $(function($){
      callbackUrl = $("input[name=callback]").val();
      if(callbackUrl !== "") {
        $('#results_status').fadeIn("slow");
        setTimeout(check, 5000)
      }
       $('.guid_radio input').change(function(){
            var elementIndex = $(this).parent().children('input').index($(this));
            $('.guid_field').hide();
            $('.guid_field').eq(elementIndex).show();
          });
    });