@extends('layouts.app')

@section('content')

<div class='container pb-5'>
    <div class='row d-flex my-5 justify-content-center cart-main-row'>
        <div class='col-md-7 order-details-col'>
            <div class='row'>
                <div class='col-md-6'>
                    
                </div>
                <div class='col-md-6 text-end pb-3'>
                     <a class='text-primary' style='font-weight:bold;font-size:14px;' href='{{ route("edit-business-details") }}'><i class="fa fa-pencil-square-o" aria-hidden="true"></i>
                Edit Information</a>
                </div>
            </div>
            @foreach($data as $info)
            <div class='row cart-row'>
                <div class='col-md-9 cart-detail-col col-12'>
                    <div class='cart-detail'>
                        <h2>{{$info->bname}}</h2>
                        <p>{{$info->radius_address}}</p>
                        <strong>{{$info->radius}} miles</strong>
                        <p>{{$info->productname}} - <b>{{($info->closer_name)}}</b></p>
                    </div>
                </div>
                <div class='col-md-3 col-12'>
                    <h2 class='text-end'>${{$info->oldprice}}</h2>
                </div>
            </div>
            @endforeach
            @foreach($data as $binfo)
            @if($binfo->code != '')
            <div class='row d-flex justify-content-end mt-4'>
                <div class='col-md-4'>
                <div class='discount-div'>
                <a class='d-block text-end link-danger' href='{{ route("remove-coupon", $binfo->couponid) }}'>Remove discount <i class="fa fa-times" aria-hidden="true"></i>
</a>
                <table>
                        <tr>
                            <th>Coupon Code:</th>
                            <td>{{$binfo->code}}</td>
                        </tr>
                        <tr>
                            <th>Price:</th>
                            <td>${{$binfo->oldprice}}</td>
                            </tr>
                        <tr>
                            <th>Discount:</th>
                            <td>-{{$binfo->discount_price}}</td>
                            </tr>
                        <tr>
                            <th>New Price:</th>
                            <td>${{$binfo->newprice}}</td>
                        </tr>
                    </table>
                    </div>  
                </div>
            </div>
            @endif
            @endforeach
            @if (Session::has('error'))
                <div class='alert alert-danger alert-dismissible fade show mt-3' role='alert'>
                {{ Session::get('error') }}
                </div>
                @endif
            <div class='payment-div text-end'>
                <a id='paycardbtn' class='btn btn-primary px-3 py-2 text-white'><i class="fa fa-credit-card" aria-hidden="true"></i>
 Pay from Card</a>
            @foreach($data as $package)
                <a href="{{ route('payment') }}" id='paypal-btn' class="btn btn-success my-3 mx-2 px-3 py-2"><i class="fa fa-paypal text-white" aria-hidden="true"></i>
 Pay from Paypal</a>
                @endforeach
            </div>
            
                <div class='order-save-box d-none'>
                @if(Session::has('paymentpending'))
                    <p class='text-success'><strong>your order information is saved you can pay now and complete your package order.</strong></p>
                    @else
                    <h3 class='text-danger'>Save Order Information & Pay Later</h3>
                    <form action='order-submit' method='post'>
                            @csrf
                        @foreach($data as $info)
                        <input type='hidden' name='client_id' value='{{$info->client_id}}'>
                        <input type='hidden' name='product_id' value='{{$info->pid}}'>
                        @endforeach
                        <button class='btn btn-warning' type='submit'>Save order Details</button>
                    </form>
                @endif
                </div>
                
            </div>
    </div>

    @if (Session::has('payment-error'))
    <div class='row d-flex justify-content-center'>
        <div class='col-md-7'>
            <div class="alert alert-danger" role="alert">
            {{ Session::get('payment-error') }}
            </div>
        </div>
    </div>
    @endif

    <div class='row d-flex justify-content-center'>
        <div class='col-md-7 order-details-col card_payment_col' style='display:none;'>
            <!-- card payment -->
            <div class='card-payment-box'>
                <h3 class='text-center pb-3'>Basic Information</h3>
                <form class="theForm" action="{{ route('process.payment') }}" method='post'>
    @csrf
  <div class="formInner">

  <div class='row'>
    <div class='col-md-6'>
        <div class="form-group">
            <label for='fname'>First Name</label> 
        <input type="text" id='fname' class="form-control" placeholder="First Name" name="fname" autofocus>
        </div>
    </div>
    <div class='col-md-6'>
        <div class="form-group">
        <label for='lname'>Last Name</label> 
        <input type="text" id='lname' class="form-control" placeholder="Last Name" name="lname">
        </div>
    </div>
  </div>
  <div class='row'>
    <div class='col-md-6'>
        <div class="form-group">
        <label for='saddress'>Address</label> 
        <input type="text" class="form-control" id='saddress' placeholder="Street Address" name="address1">
        </div>
    </div>
    <div class='col-md-6'>
        <div class="form-group">
        <label for='city'>City</label> 
        <input type="text" class="form-control" id='city' placeholder="City" name="city">
        </div>
    </div>
  </div>

  <div class='row'>
    <div class='col-md-6'>
    <div class="form-group">
    <label for='state'>State</label> 
      <input type="state" class="form-control" id='state' placeholder="State" name="state">
    </div>
    </div>
    <div class='col-md-6'>
    <div class="form-group">
    <label for='zip'>Zip Code</label> 
      <input type="text" class="form-control" id='zip' placeholder="Zip code" name="zip">
    </div>
    </div>
  </div>
  <input id='payment_token' name='payment_token' hidden>
  
  @foreach($data as $binfo)
    @if($binfo->code != '')
    <input id='amount' name='amount' value='{{$binfo->newprice}}' hidden>
    @else
    <input id='amount' name='amount' value='{{$info->oldprice}}' hidden>
    @endif
    @endforeach

  <input type="button" id="payButton" value="Pay Now" class="btn btn-primary btn-block">
  </div>
  

</form>

<div id="paymentTokenInfo"></div>

            </div>

            <!-- card payment end -->

        </div>
    </div>
</div>

<script type="text/javascript" src="https://js.stripe.com/v2/"></script>
    
<script type="text/javascript">
  
$(function() {
  
    /*------------------------------------------
    --------------------------------------------
    Stripe Payment Code
    --------------------------------------------
    --------------------------------------------*/
    
    var $form = $(".require-validation");
     
    $('form.require-validation').bind('submit', function(e) {
        var $form = $(".require-validation"),
        inputSelector = ['input[type=email]', 'input[type=password]',
                         'input[type=text]', 'input[type=file]',
                         'textarea'].join(', '),
        $inputs = $form.find('.required').find(inputSelector),
        $errorMessage = $form.find('div.error'),
        valid = true;
        $errorMessage.addClass('hide');
    
        $('.has-error').removeClass('has-error');
        $inputs.each(function(i, el) {
          var $input = $(el);
          if ($input.val() === '') {
            $input.parent().addClass('has-error');
            $errorMessage.removeClass('hide');
            e.preventDefault();
          }
        });
     
        if (!$form.data('cc-on-file')) {
          e.preventDefault();
          Stripe.setPublishableKey($form.data('stripe-publishable-key'));
          Stripe.createToken({
            number: $('.card-number').val(),
            cvc: $('.card-cvc').val(),
            exp_month: $('.card-expiry-month').val(),
            exp_year: $('.card-expiry-year').val()
          }, stripeResponseHandler);
        }
    
    });
      
    /*------------------------------------------
    --------------------------------------------
    Stripe Response Handler
    --------------------------------------------
    --------------------------------------------*/
    function stripeResponseHandler(status, response) {
        if (response.error) {
            $('.error')
                .removeClass('hide')
                .find('.alert')
                .text(response.error.message);
        } else {
            /* token contains id, last4, and card type */
            var token = response['id'];
                 
            $form.find('input[type=text]').empty();
            $form.append("<input type='hidden' name='stripeToken' value='" + token + "'/>");
            $form.get(0).submit();
        }
    }
     
});
</script>


<script>
 $(document).ready(function(){
    $('#paycardbtn').click(function(){
        $('.card_payment_col').toggle();
    });
 });

</script>

<script>
    // This prints out the contents of the payment token to the page.
document.addEventListener('DOMContentLoaded', function () {
  CollectJS.configure({
    'paymentType': 'cc',
    'callback': function (response) {
      document.getElementById("paymentTokenInfo").innerHTML =
        '<b>Payment Token:</b> ' + response.token +
        '<br><b>Card:</b> ' + response.card.number +
        '<br><b>BIN/EIN:</b> ' + response.card.bin +
        '<br><b>Expiration:</b> ' + response.card.exp +
        '<br><b>Hash:</b> ' + response.card.hash +
        '<br><b>Card Type:</b> ' + response.card.type +
        '<br><b>Check Account Name:</b> ' + response.check.name +
        '<br><b>Check Account Number:</b> ' + response.check.account +
        '<br><b>Check Account Hash:</b> ' + response.check.hash +
        '<br><b>Check Routing Number:</b> ' + response.check.aba;
        document.getElementById('payment_token').value == response.token;
    }
    document.getElementsByClassName('theForm').submit();
  });
});
</script>
<!-- <script>
    $(document).ready(function(){
        const xd = sessionStorage.getItem('productid');
    $('.prodid').val(xd);
    console.log(xd);
    });
   
</script> -->

@endsection