@extends('layouts/default')

@section('title')
   @if (@$item->id)       
       {{ trans('admin/Sellers/general.update') }}
    @else                      
        {{ trans('admin/Sellers/general.create') }}
    @endif
@parent
@stop

@section('content')

<div class="row px-4 mb-2">
   <div class="col-12 p-0">
      <div class="my-4">
         <div class="alert alert-success alert-dismissible d-flex" role="alert">
            <span class="alert-icon rounded">
              <i class="ti ti-check"></i>
            </span>
            <div class="d-flex flex-column ps-1">
               <h5 class="alert-heading mb-2"> Welcome to Parex Technologies</h5>
               <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="https://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>
               <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close" onclick="removeWelcomeMessage();">
               </button>
            </div>
         </div>
      </div>
   </div>
</div>

<div class="card  no-hover p-5 walmart_seller">
   <div class="row m-0">
      <div class="col-12 col-md-5 p-0">         
          <form id="create-form" class="custom-form" method="post" action="" autocomplete="off" role="form" enctype="multipart/form-data">
            {{ csrf_field() }}
            <input type="hidden" name="module" value="{{$module}}">
            <div class="mb-4 {{ $errors->has('client_id') ? ' has-error' : '' }}">
              <label class="form-label" for="">Client ID <span class="text-danger">*</span></label>
              <input type="text" class="form-control" placeholder="Enter Client ID" name="client_id" id="client_id" value="{{ Input::old('client_id', @$settingData['client_id']) }}">
              {!! $errors->first('client_id', '<span class="alert-msg"><i class="fa fa-times"></i> :message</span>') !!}
            </div>
            <div class="mb-4 {{ $errors->has('client_secret') ? ' has-error' : '' }}">
               <label class="form-label" for="">Client Secret <span class="text-danger">*</span></label>
               <input type="text" class="form-control" placeholder="Enter Client Secret" name="client_secret" id="client_secret" value="{{ Input::old('client_secret', @$settingData['client_secret']) }}">
                  {!! $errors->first('client_secret', '<span class="alert-msg"><i class="fa fa-times"></i> :message</span>') !!}
            </div>
            <div class="mb-4 {{ $errors->has('country') ? ' has-error' : '' }}">
               <label class="form-label" for="">Country <span class="text-danger">*</span></label>
               {{ Form::select('country', array(''=>'Select Country','US'=>'United States','CA'=>'Canada','MX'=>'Mexico','GB'=>'United Kingdom','HK'=>'Hong Kong','JP'=>'Japan') , Input::old('country', @$settingData['country']), array('class'=>'form-control', 'style'=>'width:100%','id'=>'country')) }}
                  {!! $errors->first('country', '<span class="alert-msg"><i class="fa fa-times"></i> :message</span>') !!}               
            </div>
            <div class="row">
               <div class="col-12 text-right">
                  <button type="button" class="btn btn-primary waves-effect waves-light" onclick="storeCredential();"><i class="fa fa-check icon-white" id="walmartSubmit" style="display: none;"></i> Save</button>
               </div>
            </div>
         </form>
      </div>
      <div class="col-12 col-md-2 p-0">
         <div class="divider divider-vertical divider-primary">                                    
         </div>
      </div>
      <div class="col-12 col-md-5 p-0">
         <div class="center p-3 contact-img">
            <img src="{{ asset('assets/img/illustrations/create-seller-img.svg') }}"  atl="create-seller" class="img-fluid" >
         </div>
      </div>
   </div>
</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>
<span style="color:#ecf0f5;">save</span>
@section('moar_scripts')
<script type="text/javascript">
function storeCredential(){
  if($('#create-form').valid())
      { 
        startLoading();
          $.ajaxSetup({
            headers: {
                 'X-CSRF-TOKEN': '{{ csrf_token() }}'
            }
        });

        $.ajax({
                type: 'POST',
                url: "{{route('post/walmartsellers')}}", 
                data:$('#create-form').serialize(),
                success:function( data , code ) 
                { 
                  stopLoading();
                  if(data.success == true)
                  {         
                    window.location.href = data.url;
                  }
                  if(data.success == false){
                  console.log(data);
                    var errorHtml = data.message;
                    $('.walmart_seller').prepend('<div class="alert alert-danger alert-dismissible d-flex" role="alert"><span class="alert-icon rounded"><i class="ti ti-alert-circle"></i></span><div class="d-flex flex-column ps-1"><h5 class="alert-heading mb-2">Error:</h5><p class="mb-0">'+errorHtml+'</p><button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button></div></div>'); 
                  }
                },
                error : function(reject)
                {
                  stopLoading();
                  if(reject.status == 422)
                  {
                    var errorHtml = '<div class="alert alert-danger alert-dismissible d-flex" role="alert"><span class="alert-icon rounded"><i class="ti ti-alert-circle"></i></span><div class="d-flex flex-column ps-1"><h5 class="alert-heading mb-2">Error:</h5><p class="mb-0">Required field error.</p><button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button></div></div>';
                    $('.walmart_seller').prepend(errorHtml);
                   
                  }
                  else if(reject.status == 401)
                  {
                    var errorHtml = '<div class="alert alert-danger alert-dismissible d-flex" role="alert"><span class="alert-icon rounded"><i class="ti ti-alert-circle"></i></span><div class="d-flex flex-column ps-1"><h5 class="alert-heading mb-2">Error:</h5><p class="mb-0">'+reject.responseJSON.errors+'</p><button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button></div></div>';
                    $('.walmart_seller').prepend(errorHtml);
                  }
                  else
                  {
                    var errorHtml = '<div class="alert alert-danger alert-dismissible d-flex" role="alert"><span class="alert-icon rounded"><i class="ti ti-alert-circle"></i></span><div class="d-flex flex-column ps-1"><h5 class="alert-heading mb-2">Error:</h5><p class="mb-0">Something wrong please try again</p><button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button></div></div>';
                    $('.walmart_seller').prepend(errorHtml);
                  }
                  window.scrollTo(0,0);
                }
        });
      }
}
function copyToClipboard(text, el) {
  var copyTest = document.queryCommandSupported('copy');
  var elOriginalText = el.attr('data-original-title');

  if (copyTest === true) {
    var copyTextArea = document.createElement("textarea");
    copyTextArea.value = text;
    document.body.appendChild(copyTextArea);
    copyTextArea.select();
    try {
      var successful = document.execCommand('copy');
      var msg = successful ? 'Copied!' : 'Whoops, not copied!';
      el.attr('data-original-title', msg).tooltip('show');
    } catch (err) {
      console.log('Oops, unable to copy');
    }
    document.body.removeChild(copyTextArea);
    el.attr('data-original-title', elOriginalText);
  } else {
    // Fallback if browser doesn't support .execCommand('copy')
    window.prompt("Copy to clipboard: Ctrl+C or Command+C, Enter", text);
  }
}
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');
}
$(document).ready(function() {
  // Initialize
  // ---------------------------------------------------------------------

  // Tooltips
  // Requires Bootstrap 3 for functionality
  $('.js-tooltip').tooltip();

  // Copy to clipboard
  // Grab any text in the attribute 'data-copy' and pass it to the 
  // copy function
  $('.js-copy').click(function() {
    var text = $(this).attr('data-copy');
    var el = $(this);
    copyToClipboard(text, el);
  });

  $validator = $("#create-form").validate({ 
      rules: {
        client_id: {
          required: true,
        },       
        client_secret: {
          required: true,
        },
        country:{
          required: true,
        }
      }
    });
});

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