@extends('layouts/default')
@section('header_right')
<style type="text/css">
  .validate-button{
    width: 25%;margin: 1%;height: 45px;
    border-color:coral;
    background: -webkit-linear-gradient(left, #fe8464 0%, #fe6e9a 50%, #fe8464 100%);
    background: -o-linear-gradient(left, #fe8464 0%, #fe6e9a 50%, #fe8464 100%);
    background: linear-gradient(to right, #fe8464 0%, #fe6e9a 50%, #fe8464 100%);      
    background-size: 200%;
    border-radius: 3px;
    color: white !important;
    border: 1px solid transparent;
  }
  .alert-success {
    color: #212b36 !important;
    background-color: #e0f5f5 !important;
    border: none;
    box-shadow: inset 0 3px 0 0 #47c1bf, inset 0 0 0 0 transparent, 0 0 0 1px rgba(63,63,68,0.05), 0 1px 3px 0 rgba(63,63,68,0.15);
}
.alert a {
    color: #212b36;
    
    
}
.js-copy{
  padding: 0px 0px;
}
.alert .icon {
     margin-right: 6px; 
     margin-left: 6px; 
}
</style>


@stop
{{-- Page content --}}

@section('content')



    <div class="alert alert-success alert-dismissible show ">
    <button type="button" class="close" onclick="removeWelcomeMessage();">x</button>
    <h4 style="margin-top: 0px;"> Welcome to Parex Technologies</h4>
      <p>Thank you for signing up for our app Parex Bridge. Very soon you will start auto syncing of your Walmart data with your Xero account. To setup the app properly, you need to authorize our app from your Walmart account using the steps below.</p>
      <p>1. <a href="developer.walmart.com" target="_blank">Login to Walmart Developers Portal</a> using your account details - username and password.<!-- <a href="javascript:void(0)" onclick="openInfoImageModel('walmart_login')">Click Here to view.</a> --></p>
      <p>2. Successful login takes you to the API Keys page. On this page there is a section called 'Production Keys' for Solution Providers 
        <!-- <a href="javascript:void(0)" onclick="openInfoImageModel('walmart_find_delegate')">Click Here to view.</a> --><br/>
      Click on the button 'Add New Key For A Solution Provider' button. In the 'Select A Solution Provider' dropdown, please select Parex Technologies option. <!-- <a href="javascript:void(0)" onclick="openInfoImageModel('walmart_add_production')">Click Here to view.</a> --></p>
      <p>3. Please select the access permissions and then click Save button. <!-- <a href="javascript:void(0)" onclick="openInfoImageModel('walmart_delegate_info')">Click Here to view.</a> --></p>
      <p>4. Parex Technologies will be added to your list of Solution Providers.<!-- <a href="javascript:void(0)" onclick="openInfoImageModel('walmart_copy_info')">Click Here to view.</a> --></p>
      <p>5. Please copy the Client ID and Client Secret from the page that follows and share it with us.</p>
      </div>

<div class="modal fade" id="modal-info-image" style="display: none;">
  <div class="modal-dialog" style="width:54% !important; height: 86% !important;" >
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">×</span></button>
      </div>      
      <div class="modal-body">
            <img id="info_img" src="" style="height: 100%;width:100%">
      </div>
    </div>
    <!-- /.modal-content -->
  </div>
  <!-- /.modal-dialog -->
</div>
@section('moar_scripts')
<script type="text/javascript">

function openInfoImageModel(para){
  if(para == 'walmart_login'){
    var newSrc = "{{asset('assets/img/wlamart_login.png')}}";
  }
  if(para == 'walmart_find_delegate'){
    var newSrc = "{{asset('assets/img/walmart_find_delegate.png')}}";
  }
  if(para == 'walmart_add_production'){
    var newSrc = "{{asset('assets/img/walmart_add_production.png')}}";
  }
  if(para == 'walmart_delegate_info'){
    var newSrc = "{{asset('assets/img/walmart_delegate_info.png')}}";
  }
  if(para == 'walmart_copy_info'){
    var newSrc = "{{asset('assets/img/walmart_copy_info.png')}}";
  }

  $('#info_img').attr('src', newSrc);
  $('#modal-info-image').modal('show');
}

function removeWelcomeMessage(){
  //$.cookie('welcomeMessage', 'true', {expires: 365},'/');
  $('.alert-success').parent().remove();
}
</script>
@stop
@stop