@extends('buyers_sellers.layout2.master')
@section('title', 'Home')
@section('content')
<style>
/* .card-box {
    background: #fff;
    min-height: 50px;
    box-shadow: none;
    position: relative;
    margin-top: -740px;
    transition: .5s;
    border: 1px solid #f2f2f2;
    border-radius: 0;
}
.card-box1 {
    background: #fff;
    min-height: 50px;
    box-shadow: none;
    position: relative;
    /* margin-top: -740px; */
    transition: .5s;
    border: 1px solid #f2f2f2;
    border-radius: 0;
} */
</style>
    <div class="page-content-wrapper">
        <div class="page-content">
            <div>
                <div class="page-bar" id="payment-heading">
                    <div class="page-title-breadcrumb">
                        <div class=" pull-left" >
                            <div class="page-title">Payment for SR # {{$jobid}}</div>
                        </div>
                        <ol class="breadcrumb page-breadcrumb pull-right">
                            <li><i class="fa fa-home"></i>&nbsp;<a class="parent-item"
                                    href="{{ route('buyer.dashboard') }}">Home</a>&nbsp;<i class="fa fa-angle-right"></i>
                            </li>
                            {{-- <li><a class="parent-item" href="">UI Elements</a>&nbsp;<i class="fa fa-angle-right"></i> --}}
                            </li>
                            <!-- <li class="active">Payment for SR # {{$jobid}}</li> -->
                        </ol>
                    </div>
                </div>
                @if ($charges > 0)
                <div class="row" id="paymentId">
                    <div class="col-sm-12">
                        <div class="card-box1">
                            <div class="container">
                                <div class="row">
                                    <div class="col-md-12 mt-5 mb-5" >
                                            <p class="mt-2">
                                                <b>You have @if($loyaltypoints){{$loyaltypoints}} @else 0 @endif loyalty points available with a cash value of @if($doller){{ $doller }} @else 0 @endif .</b> <br>
                                                <b>Tick the box below to apply this to your payment?</b><br><br>
                                                <label>
                                                    <input type="checkbox" onclick="applyloyality()"  id="loyal" name="loyalty"/>
                                                  Apply $ @if($doller){{ $doller }} @else 0 @endif in Loyalty points to my security deposit payment?
                                                </label>
                                            </p>
                                            <h5>
                                                Please select your preferred payment method:
                                            </h5>
                                            <div>
                                                <label>
                                                    <input type="radio" onclick="paymenttype(2)" name="yes"/>
                                                    Credit Card
                                                </label>
                                                <div class="ml-2 mt-1">

                                            </div>
                                            <div>
                                                <label class="text-dark">
                                                    <input type="radio" onclick="paymenttype(1)" name="yes"/>
                                                    Bank Transfer
                                                </label>
                                                <p class="ml-3 mt-1" id="bank_proof_notice">
                                                    Please send payment of @if($currency){{$currency}}@endif $@if($charges){{$charges}}@endif to Bank of @if($adminBankDeatil) {{ $adminBankDeatil->bank_name }} @endif, Ac Number @if($adminBankDeatil) {{ $adminBankDeatil->account_number }} @endif, @if($adminBankDeatil) {{ $adminBankDeatil->town }} @endif
                                                    Then log in again and provide your payment proof to complete your Service Request 
                                                </p>
                                            </div>
                                            
                                            {{-- @if ($applypoint > 0) --}}

                                            <div>
                                                {{-- <label>
                                                    <input type="checkbox" onclick="applyloyality()"  id="loyal" name="loyalty"/>
                                                   $ @if($doller){{ $doller }} @else 0 @endif loyalty points available apply to payment?
                                                </label> --}}
                                                <div class="ml-2 mt-1">
                                            </div>
                                            {{-- @endif --}}


                                            <button onclick="next()" id="btn-next" class="btn btn-theme" disabled> Continue</button>
                                    </div>
                                </div>
                            </div>    
                        </div>
                    </div>
                </div>
                @endif
                @if ($charges == 0)
                <div class="row">
                    <div class="col-sm-12">
                        <div class="card-box">
                            <div class="container">
                                <div class="row">
                                    <div class="col-md-12 mt-5 mb-5">
                                            Would you like to proceed with this Request?
                                        <form action="{{ route('free.job') }}" method="post">
                                            @csrf
                                            <input type="hidden" name="cart_id" value="1">
                                            <input type="hidden" id="JobIds" name="JobIds" value="{{$jobid}}">
                                            <button type="submit" class="btn-small btn-theme" >Continue</button>
                                        </form>
                                    </div>
                                </div>
                            </div>    
                        </div>
                    </div>
                </div>
            @endif

            </div>
        </div>

    </div>

    <div id="processId" style="display:none">
        <div class="page-bar">
            <div class="page-title-breadcrumb">
                <div class=" pull-left">
                   <h4 style="font-weight: bold;">Please note that the Service Provider search and selection process
                         will only commence after payment of the above required fee has been processed. To avoid
                          delays please ensure that payment reference details provided are correct. Thanks for
                           allowing us to serve you.</h4>
                </div>
                <ol class="breadcrumb page-breadcrumb pull-right">
                    <li><i class="fa fa-home"></i>&nbsp;<a class="parent-item"
                            href="{{ route('buyer.dashboard') }}">Home</a>&nbsp;<i class="fa fa-angle-right"></i>
                    </li>
                    </li>
                </ol>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-12">
                <div class="card-box">
                    <div class="container">
                        <div class="row">
                            <div class="col-md-12 mt-5 mb-5" id="points-div" style="display:none">
                                    Would you like to proceed with this Request?
                                <form action="{{ route('paid.by.points') }}" method="post">
                                    @csrf
                                    <input type="hidden" id="getpoint" class="loyalty_point" name="loyalty_point" value="">
                                    <input type="hidden" id="jobid" name="jobid" value="{{$jobid}}">
                                    <button type="submit" class="btn-small btn-theme" >Continue</button>
                                </form>
                            </div>
                            <div class="col-md-12 mt-5 mb-5" id="bank-div" style="display:none">
                                Would you like to proceed with this Request?
                                <form action="{{ route('paid.by.bank') }}" method="post">
                                    @csrf
                                    <input type="hidden" class="loyalty_point" name="loyalty_point" value="">
                                    <input type="hidden" id="cart_id" name="cart_id" value="1">
                                    <input type="hidden" id="jobid" name="jobid" value="{{$jobid}}">
                                    <button type="submit" class="btn-small btn-theme" >Continue</button>
                                </form>
                            </div>
                            <div class="col-md-12 mt-5 mb-5" id="card-div" style="display:none">
                                Would you like to proceed with this Request?
                                    <form action="{{ route('stripe') }}" method="post" id="payment-form">
                                        @csrf
                                        <input type="hidden" class="loyalty_point" name="loyalty_point" value="">
                                        <input type="hidden" class="payment_type" name="payment_type" value="2">
                                        <input type="hidden" id="job_id" name="job_id" value="{{$jobid}}">
                                    <div class="container">
                                        <div class="row mt-3">
                                            <div class="col-md-12">
                                                <div id="card-element">
                                                <!-- A Stripe Element will be inserted here. -->
                                                </div>
                                            </div>
                                        <div class="col-md-12 mt-4">
                                        <div class="row">
                                        <div class="col-md-4"></div>
                                        <div class="col-md-4">
                                        <button class="btn btn-theme" id="card-button" data-secret="" style="float: left;background: #f0f0f0;">
                                        Payment
                                        </button>
                                    </div>
                                    <div class="col-md-4"></div>
                                    </div>
                                    </div>
                            
                                    <!-- Used to display form errors. -->
                                    <div id="card-errors" role="alert"></div>
                                    </div>
                                    </div>
                                    </form>
                            </div>
                        </div>
                    </div>    
                </div>
            </div>
        </div>
    </div>


    
   
    </div>


    
@endsection
@section('scripts')
<script>
    function next(){
        document.getElementById('paymentId').style.display = "none";
        document.getElementById('payment-heading').style.display = "none";
        document.getElementById('processId').style.display = "block"; 
         
    }

    function paymenttype(id){
        if(id == 1){
            $('#bank_proof_notice').show();
        }else{
            $('#bank_proof_notice').hide();
        }
        document.getElementById('btn-next').disabled = false;
        if(id == 1){
            document.getElementById("bank-div").style.display = "block";
            document.getElementById("card-div").style.display = "none";
            document.getElementById("points-div").style.display = "none";

        }  
        if(id == 2){
            document.getElementById("bank-div").style.display = "none";
            document.getElementById("card-div").style.display = "block";
            document.getElementById("points-div").style.display = "none";
        } 
        if(id == 3){
            document.getElementById("bank-div").style.display = "none";
            document.getElementById("points-div").style.display = "block";
            document.getElementById("card-div").style.display = "none";

        } 


    }

   $(document).ready(function(){
    $('#bank_proof_notice').hide();
   });
    function applyloyality(){

         var inputs = document.getElementsByClassName('loyalty_point');
       console.log(loyal.checked == true)
        if (loyal.checked == true ) {
            $('.loyalty_point').val("yes");
        }else{
            $('.loyalty_point').val("no");
        }
    }


// STRIPE START CODE //

// Create a Stripe client.

var stripe = Stripe("{{env('STRIPE_KEY')}}");

// Create an instance of Elements.
var elements = stripe.elements();

// Custom styling can be passed to options when creating an Element.
// (Note that this demo uses a wider set of styles than the guide below.)
var style = {
  base: {
    color: '#32325d',
    fontFamily: '"Helvetica Neue", Helvetica, sans-serif',
    fontSmoothing: 'antialiased',
    fontSize: '16px',
    '::placeholder': {
      color: '#aab7c4'
    }
  },
  invalid: {
    color: '#fa755a',
    iconColor: '#fa755a'
  }
};

// Create an instance of the card Element.
var card = elements.create('card', {style: style});

// Add an instance of the card Element into the `card-element` <div>.
card.mount('#card-element');

// Handle real-time validation errors from the card Element.
card.on('change', function(event) {
  var displayError = document.getElementById('card-errors');
  if (event.error) {
    displayError.textContent = event.error.message;
  } else {
    displayError.textContent = '';
  }
});

// Handle form submission.
var form = document.getElementById('payment-form');
form.addEventListener('submit', function(event) {
  event.preventDefault();

  stripe.createToken(card).then(function(result) {
    // console.log(result);
    if (result.error) {
      // Inform the user if there was an error.
      var errorElement = document.getElementById('card-errors');
      errorElement.textContent = result.error.message;
    } else {
      // console.log(1);
      // Send the token to your server.
      stripeTokenHandler(result.token);
    }
  });
});

// Submit the form with the token ID.
function stripeTokenHandler(token) {
  // console.log(token);
  // Insert the token ID into the form so it gets submitted to the server
  var form = document.getElementById('payment-form');
  var hiddenInput = document.createElement('input');
  hiddenInput.setAttribute('type', 'hidden');
  hiddenInput.setAttribute('name', 'stripeToken');
  hiddenInput.setAttribute('value', token.id);
  StripeToken = token.id;
  form.appendChild(hiddenInput);
 $('#card-button').text('payment processing.........');
 $('#card-button').prop('disabled', true);

  // Submit the form
  // form.submit();
  $.ajax({
      url: "{{route('stripe')}}",
      type: "POST",
      data: {
        '_token': "{{ csrf_token() }}",
        'stripeToken': token.id,
        'cart_id': $('#cart_id').val(),
        'jobid': $('#job_id').val(),
        'getpoint': $('#getpoint').val(),

      },
      success: function(data){
        data = JSON.parse(data);
        // console.log(data); die();
        if(data.status == true){
            console.log(data);
            // alert(data.jobid);
            // alert();
            window.location.href = "{{url('/job/paymentn/success')}}/"+data.jobid;
        
          
        }
        else if(data.status == false) {
            $('#card-button').text('Payment');
            $('#card-button').prop('disabled', false);

          new swal({
            title: "",
            text: data.message,
            icon: "warning",
          });
        }
      },
      error: function(){
        $('#card-button').text('Payment');  
        $('#card-button').prop('disabled', false);
        new swal({
            title: "",
            text: "Something Went Wrong",
            icon: "warning",
          });
      }
  });
}

</script>
@endsection