@extends('layouts/landing')

@section('title')
  Payme 
@stop

<style type="text/css">
  .error{
    color: red;
  }
.payme-form input {
    border: 2px solid #E1E1E1;
    height: 40px;
    padding: 0 15px;
    border-radius: 5px;
    width: 100%;
    color: #2E2E2E;
}
.payme-form textarea {
    border: 2px solid #E1E1E1;
    height: 40px;
    padding: 10px 15px;
    border-radius: 5px;
    width: 100%;
    color: #2E2E2E;
}
.stripe-button-el{
    background: -webkit-linear-gradient(left, #fe8464 0%, #fe6e9a 50%, #fe8464 100%) !important;
    background: -o-linear-gradient(left, #fe8464 0%, #fe6e9a 50%, #fe8464 100%) !important;
    background: linear-gradient(to right, #fe8464 0%, #fe6e9a 50%, #fe8464 100%) !important;
  }
  .col-md-12,.col-md-6{
    padding-right: 5px!important;
    padding-left: 5px!important;
  }
  /*ssss*/
  .input-icon {
  position: relative;
}

.input-icon > i {
  position: absolute;
  display: block;
  transform: translate(0, -50%);
  top: 50%;
  pointer-events: none;
  width: 30px;
  text-align: center;
  font-style: normal;
  padding-top: 6px;
  height:36px;
  background: #dcdada;
  border-radius: .25em 0 0 .25em;
}

.input-icon > input {
  padding-left: 33px;
  padding-right: 0;
}

.input-icon-right > i {
  right: 0;
}

.input-icon-right > input {
  padding-left: 0;
  padding-right: 25px;
  text-align: right;
}
.next-button{
      display: inline-block;
    font-weight: 500;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    padding: 0 25px;
    font-size: 16px;
    line-height: 48px;
    border-radius: 8px;
    border: 0;
    color: #fff;
    cursor: pointer;
    z-index: 5;
    -webkit-transition: all 0.4s ease-out 0s;
    -moz-transition: all 0.4s ease-out 0s;
    -ms-transition: all 0.4s ease-out 0s;
    -o-transition: all 0.4s ease-out 0s;
    transition: all 0.4s ease-out 0s;
    background: -webkit-linear-gradient(left, #33c8c1 0%, #119bd2 50%, #33c8c1 100%);
    background: -o-linear-gradient(left, #33c8c1 0%, #119bd2 50%, #33c8c1 100%);
    background: linear-gradient(to right, #33c8c1 0%, #119bd2 50%, #33c8c1 100%);
    background-size: 200%;
}
</style>

<link rel="stylesheet" type="text/css" href="{{asset('assets/css/plans.css')}}"/>
@section('content')
<div id="home" class="header-hero bg_cover" style="background-image: url(images/banner-bg.svg);height:300px;">
    <div id="particles-1" class="particles"></div>
</div>
<div class="">
  <div class="row justify-content-center">

    <div class="col-lg-10">
          <div class="section-title text-center pb-10">
              
              <h3 class="title" style="padding-top:0px;"> <span>Payment Details</span></h3>
              <div class="line m-auto"></div>
	      <div class="row justify-content-md-center">
                <div class="col-md-9 col-sm-12">
                  <p>To make payment for any customization, feature or any other service you requested from Parex Technologies, please enter the correct details below so that we can process the request accordingly. You will be redirected to enter payment details in the next page.</p>
                </div>
              </div>
          </div> <!-- section title -->

      </div>
      
    
    
         
     
      
      
    <div class="row justify-content-md-center col-md-4">
    
      @include('notifications')
    <div class="col-md-12  " >
 
           
         
      <!-- <form id="payme-form" class="payme-form" method="post" action="{{ route('payme') }}" autocomplete="off" role="form" enctype="multipart/form-data" onsubmit="startLoading();"> -->
        <form action="{{ route('payme') }}" id="payme_form" method="POST">
        {{ csrf_field() }}

        <div class="row store-info">

          
          <div class="col-md-6 form-group {{ $errors->has('store_name') ? ' has-error' : '' }}">
            <!-- <div class="next-label">Name</div> -->
            <input class="form-control" type="text" name="store_name" id="store_name" value="{{ Input::old('store_name') }}" placeholder="Store Name" />
            {!! $errors->first('store_name', '<span class="alert-msg"><i class="fa fa-times"></i> :message</span>') !!}
          </div>
          <div class="col-md-6 form-group {{ $errors->has('fullname') ? ' has-error' : '' }}">
            <!-- <div class="next-label">Name</div> -->
            <input class="form-control" type="text" name="fullname" id="fullname" value="{{ Input::old('fullname') }}" placeholder="Name" />
            {!! $errors->first('fullname', '<span class="alert-msg"><i class="fa fa-times"></i> :message</span>') !!}
          </div>
        </div>
        <div class="row store-info">
          <div class="col-md-6 form-group {{ $errors->has('email') ? ' has-error' : '' }}">
            <!-- <div class="next-label">E-mail</div> -->
            <input class="form-control" type="text" name="email" id="email" value="{{ Input::old('email') }}" placeholder="Email" />
            {!! $errors->first('email', '<span class="alert-msg"><i class="fa fa-times"></i> :message</span>') !!}
          </div>
          <div class="col-md-6 form-group {{ $errors->has('mobile') ? ' has-error' : '' }}">
            <!-- <div class="next-label">Mobile</div> -->
            <input class="form-control" type="text" name="mobile" id="mobile" value="{{ Input::old('mobile') }}" placeholder="Mobile" />
            {!! $errors->first('mobile', '<span class="alert-msg"><i class="fa fa-times"></i> :message</span>') !!}
          </div>
        </div>

         <div class="row store-info">
        <div class="col-md-12 form-group {{ $errors->has('message') ? ' has-error' : '' }}">
          <!-- <div class="next-label">Message</div> -->
          <textarea class="form-control" name="message" id="message" placeholder="Message details" rows="3">{{ Input::old('message') }}</textarea>
          {!! $errors->first('message', '<span class="alert-msg"><i class="fa fa-times"></i> :message</span>') !!}
        </div>
        </div>

        
        <div class="row store-info">
              <div class="col-md-12 form-group {{ $errors->has('amount') ? ' has-error' : '' }}">
                <!-- <div class="next-label">amount</div> -->
              <div class="input-icon">
               <!--input class="form-control" type="text" name="amount" id="amount" value="{{ Input::old('amount') }}" placeholder="Amount" /-->
                <div class="">
            <!-- Default input -->
            <label class="sr-only" for="inlineFormInputGroup">Username</label>
            <div class="input-group mb-2">
              <div class="input-group-prepend">
                <div class="input-group-text">$</div>
              </div>
              <input type="text" name="amount" class="form-control py-0 amount" style='width:80%' value="{{ Input::old('amount') }}" id="amount" placeholder="Amount" />
      	<br>
      	{!! $errors->first('amount', '<span class="alert-msg"><i class="fa fa-usd"></i> :message</span>') !!}
            </div>
          </div>
      	  
           
          </div>
           
            
              </div>

        </div>
        <h6 class="title text-center pb-10 user-info">Billing Address</h6>
        <div class="row user-info">
           <div class="col-md-12 form-group {{ $errors->has('address1') ? ' has-error' : '' }}">
            <!-- <div class="next-label">E-mail</div> -->
            <input class="form-control" type="text" name="address1" id="address1" value="{{ Input::old('address1') }}" placeholder="Address Line 1" />
            {!! $errors->first('address1', '<span class="alert-msg"><i class="fa fa-times"></i> :message</span>') !!}
          </div>
           <div class="col-md-12 form-group {{ $errors->has('address2') ? ' has-error' : '' }}">
            <!-- <div class="next-label">E-mail</div> -->
            <input class="form-control" type="text" name="address2" id="address2" value="{{ Input::old('address2') }}" placeholder="Address Line 2" />
            {!! $errors->first('address2', '<span class="alert-msg"><i class="fa fa-times"></i> :message</span>') !!}
          </div>
        </div>
        <div class="row user-info">
           <div class="col-md-12 form-group {{ $errors->has('city') ? ' has-error' : '' }}">
            <!-- <div class="next-label">E-mail</div> -->
            <input class="form-control" type="text" name="city" id="city" value="{{ Input::old('city') }}" placeholder="City" />
            {!! $errors->first('city', '<span class="alert-msg"><i class="fa fa-times"></i> :message</span>') !!}
          </div>
           <div class="col-md-12 form-group {{ $errors->has('pincode') ? ' has-error' : '' }}">
            <!-- <div class="next-label">E-mail</div> -->
            <input class="form-control" type="text" name="pincode" id="pincode" value="{{ Input::old('pincode') }}" placeholder="Pincode" />
            {!! $errors->first('pincode', '<span class="alert-msg"><i class="fa fa-times"></i> :message</span>') !!}
          </div>
        </div>
        <div class="row user-info">           
           <div class="col-md-12 form-group {{ $errors->has('state') ? ' has-error' : '' }}">
            <select class="form-control usstate" name="state1" >
              @foreach($state as $state)
              <option value="{{$state['stateName']}}">{{$state['stateName']}}</option>
              @endforeach
            </select>
            <!-- <div class="next-label">E-mail</div> -->
            <input class="form-control usstatetext" type="text" name="state" value="{{ Input::old('state') }}" placeholder="State" style="display: none;" />
            {!! $errors->first('state', '<span class="alert-msg"><i class="fa fa-times"></i> :message</span>') !!}
          </div>
          <div class="col-md-12 form-group {{ $errors->has('country') ? ' has-error' : '' }}">
            <!-- <div class="next-label">E-mail</div> -->
            <select class="form-control" name="country" id="country" onchange="getstatetext();">
              @foreach($country as $country)
              <option value="{{$country['countryCode2']}}"  >{{$country['countryName']}}</option>
              @endforeach
            </select>
            <!-- <input class="form-control" type="text" name="country" id="country" value="{{ Input::old('country') }}" placeholder="Country" /> -->
            {!! $errors->first('country', '<span class="alert-msg"><i class="fa fa-times"></i> :message</span>') !!}
          </div>
        </div>
        
        

        <div class="col-md-12">
       
        <div class="form-group{{ $errors->has('captcha') ? ' has-error' : '' }}">                              
         </div>
        <div class="col-md-12 text-center navbar-btn d-none " >
       
                                          <script
                                            src="https://checkout.stripe.com/checkout.js" id="stripe-script" class="stripe-button "
                                           
                                            data-key="{{$strip_key}}"
                                            data-image="{{asset('assets/img/parexlogo-small.png')}}"
                                            data-name="Parex Technologies"
                                            data-description=""
                                            data-amount="0"
                                            data-email=""
                                            data-label="Pay"
                                            data-locale="auto">
                                          </script>
                                            
                                         
      
        </div>
        </div>
      </form>

      <div class="col-md-12 store-info" style="text-align: center;">
           <button type="button" class="next-button" style="font-size: medium;" onclick="getUserDetailForm();">Next</button><br>
          <!--  <img src="{{asset('assets/img/powerdby_gray.png')}}" alt="Mountains" style="width: 13%;padding: 5px;"> -->
         </div>

        <div class="col-md-12 user-info" style="text-align: center;">
           <button type="submit" class="main-btn" style="font-size: medium;">Pay Now</button><br>
          <!--  <img src="{{asset('assets/img/powerdby_gray.png')}}" alt="Mountains" style="width: 13%;padding: 5px;"> -->
         </div>
       
    </div>


    
    </div>


  </div>
   <div class="row justify-content-center">
       
        <div class="col-md-4 column">
          <img src="{{asset('assets/img/stripe_secure.png')}}" alt="Snow" style="width:100%">
        </div>
        <!-- <div class="col-md-1 column">
          <img src="{{asset('assets/img/mas.png')}}" alt="Forest" style="width:100%">
        </div>
        <div class="col-md-1 column">
          <img src="{{asset('assets/img/3.png')}}" alt="Mountains" style="width:100%">
        </div>
         -->
     
      </div>
      <!-- <div class="row " style="padding: 10px">
        <div class="col-md-2 ">
          <img src="{{asset('assets/img/powerdby.png')}}" alt="Mountains" style="width:65%">
        </div>
      </div> -->

      
</div>
@stop
@section('moar_scripts')
@include ('partials.bootstrap-table', ['exportFile' => 'Sellers-export', 'search' => true])
<script src="{{ asset('assets/js/jquery.validate.min.js') }}"></script>
<script type="text/javascript">
  $( document ).ready(function() {    
    $('.content-wrapper').removeAttr('style');
  });
  // Restricts input for each element in the set of matched elements to the given inputFilter.
(function($) {
  $.fn.inputFilter = function(inputFilter) {
    return this.on("input keydown keyup mousedown mouseup select contextmenu drop", function() {
      if (inputFilter(this.value)) {
        this.oldValue = this.value;
        this.oldSelectionStart = this.selectionStart;
        this.oldSelectionEnd = this.selectionEnd;
      } else if (this.hasOwnProperty("oldValue")) {
        this.value = this.oldValue;
        this.setSelectionRange(this.oldSelectionStart, this.oldSelectionEnd);
      } else {
        this.value = "";
      }
    });
  };
}(jQuery));

$("#mobile").inputFilter(function(value) {
  return /^\d*$/.test(value); });

// Install input filters.
/*$("#intTextBox").inputFilter(function(value) {
  return /^-?\d*$/.test(value); });
$("#uintTextBox").inputFilter(function(value) {
  return /^\d*$/.test(value); });
$("#intLimitTextBox").inputFilter(function(value) {
  return /^\d*$/.test(value) && (value === "" || parseInt(value) <= 500); });*/
$("#amount").inputFilter(function(value) {
  return /^-?\d*[.,]?\d*$/.test(value); });
/*$("#currencyTextBox").inputFilter(function(value) {
  return /^-?\d*[.,]?\d{0,2}$/.test(value); });
$("#latinTextBox").inputFilter(function(value) {
  return /^[a-z]*$/i.test(value); });
$("#hexTextBox").inputFilter(function(value) {
  return /^[0-9a-f]*$/i.test(value); });*/


$("#amount").bind('keyup mouseup', function () {
  $('script.stripe-button').attr('data-amount', this.value*100);
 // var desc = "Pay $ "+this.value;
 //$('.Header-account').html('data-description', "Pay $ "+this.value);
  $('script.stripe-button').attr('data-description', 'Pay $'+this.value);
});
$("#email").bind('keyup mouseup', function () {
  $('script.stripe-button').attr('data-email', this.value);
});
$(document).ready(function() {
    $('.user-info').css('display','none');
    $("#payme_form").validate({
        rules: {
            fullname: { required: true},
            store_name: { required: true},
            email: {
                    required: true,
                    email: true
                  },
            mobile: { required: true},
            message: { required: true},
            address1: { required: true,minlength: 5},            
            country: { required: true},            
            state: { required: true},            
            city: { required: true},            
            pincode: { required: true},            
            amount: { required: true},
        },
        messages: {
            fullname: {required:"Name is required"},
            store_name: {required:"Store Name is required"},
            email: {required:"Email is required"},
            mobile: {required:"Mobile is required"},
            message: {required:"Message details is required"},
            address1: {required:"Address Line 1 is required",minlength:"Address1 must be at least 5 characters long"},            
            
            
            
            country: {required:"Country is required"},            
            state: {required:"State is required"},            
            city: {required:"City is required"},            
            pincode: {required:"Pincode is required"},            
            amount: {required:"Amount is required"},
           

        }
    })

    $('.stripe-button-el').click(function() {
        $("#payme_form").valid();
    });
});
 $('.main-btn').click(function() {
       if($("#payme_form").valid()){


         var token = function(res){
            var $id = $('<input type=hidden name=stripeToken />').val(res.id);
            var $email = $('<input type=hidden name=stripeEmail />').val(res.email);
            $('form').append($id).append($email).submit();
          };


        StripeCheckout.open({
            key:         '{{$strip_key}}',
            amount:      $('.amount').val()*100,
            name:        'Parex Technologies',
            image:       '{{asset('assets/img/parexlogo-small.png')}}',
            description: 'Payment Amount $'+$('.amount').val(),
            locale:"auto",
            token:       token
          });


        //$('.stripe-button-el').click();

        /* var amt= $('#amount').val();
         setTimeout( function(){
          alert(1);
          $('Checkout is-desktop.Header-account').html('Pay $'+amt);
         },3000);*/
       

      }
    });
 function getUserDetailForm(){
  if($("#payme_form").valid()){ 
    var amount = $('.amount').val();

    var html = "Pay "+"$"+parseFloat($('.amount').val()).toFixed(2);
    $(".main-btn").html(html);   
    $('.store-info').css('display','none');
    $('.user-info').css('display','block');
  }
 }
 function getstatetext(){
  
    if($('#country').val() != 'US'){      
      $('.usstatetext').css('display','block');
      $('.usstate').css('display','none');
    }else{
      $('.usstatetext').css('display','none');
      $('.usstate').css('display','block');
    }
 }

</script>
@stop