@extends('layouts.app')

@section('content')
<style>
    .partners{
        width: 100%;
        padding:1em;
    }
</style>
<!-- Page Heading -->
<!--<style>-->
<!--    .col-md-4:hover {-->
<!--      background-color:#81dafc;-->
<!--      border-radius: 20px;-->
<!--    }-->
<!--</style>-->
    </head>
<div class="d-sm-flex align-items-center mb-4">
    <div class="h4 mb-0 text-warning text-uppercase font-weight-bold mb-1">Location: </div>
  <div class="h4 mb-0 text-gray-800 text-uppercase font-weight-bold mb-1">&nbsp; {{ $location->location_description }}</div>
</div>

@if($errors->any())
    <div class="alert alert-danger">
        <ul>
        @foreach($errors->all() as $error)
            <li>{{ $error }}</li>
        @endforeach
        </ul>
    </div>
@endif

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalLabel">Available Outlets for Payment</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
            <h5>Online Banking</h5>
            <ul class="ml-5">
            <li>Dragonpay Prepaid Credits </li>
                <li>Bank of Commerce Online</li>
                    <li>BDO Internet Banking</li>
                        <li>BPI ExpressOnline (Bills Payment)</li>
                            <li>BPI Online/Mobile (NEW)</li>
<li>Chinabank Online</li>
    <li>Landbank ATM Online</li>
<li>Maybank Online Banking</li>
    <li>PSBank Online</li>
        <li>RCBC Online Banking</li>
            <li>RobinsonsBank Online Bills Payment</li>
                <li>UCPB Connect/Mobile</li>
                    <li>Unionbank Internet Banking</li>
<li>Coins.ph</li>
    <li>GrapPay</li>
            </ul>

            <h5> Over-the-Counter Banking and ATM</h5>
            <ul class="ml-5">
              <li>  AUB Online/ Cash Payment</li>
                <li>Banco de Oro ATM</li>
                    <li>BDO Cash Depositw/ Ref</li>
                        <li>BDO Network Bank (formerly ONB) Cash Dep</li>
                            <li>BPI Bills  Payment</li>
                                <li>Chinabank ATM/Cash Payment</li>
                                    <li>Eastwest Online/Cash Payment</li>
                                        <li>I2I Rural Banks</li>
                                            <li>Landbank Cash Payment</li>
                                                <li>PNB Cash Payment</li>
                                                    <li>PNB e-Banking Bills Payment</li>
                                                        <li>RCBC Cash Payment</li>
                                                            <li>RobonsonsBank Over-the-Counter</li>
                                                                <li>UCPB ATM/CASH Payment </li>
                                                                    <li>Unionbank Cash Payment</li>
            </ul>

            <h5>Over-the-Counter non-Bank</h5>
            <ul class="ml-5">
               <li> Bayad Center</li>
                <li>Cebuana Lhuiller Bills Payment</li>
                    <li>ECPay </li>
                        <li>LBC</li>
                            <li>M. Lhuiller</li>
                                <li>Palawan Pawnshop</li>
                                    <li>Posible Partners</li>
                                        <li>RD Pawnshop</li>
                                            <li>Robinsons Dept Store</li>
                                                <li>RuralNet Banks and Coops</li>
            </ul>

            <p>*Note - You will receive your policy via email if the chosen mode of payment is one of the above</p>

            <h5>CASH</h5>
            <P class="ml-4">For cash payments, you will need to go to our designated cashier in your city's municipal hall for the payment.</P>


        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
         
        </div>
      </div>
    </div>
  </div>

  

<div class="card border-left-primary shadow  py-2 mb-5">
    <div class="card-body">
       <h5><strong>Choose Payment Method</strong>  <button type="button" class="btn btn-default btn-sm ml-2" data-toggle="modal" data-target="#exampleModal">
        See details
      </button></h5>
       <br>   
       <div class="row">
            <div class="col-md-3">
                <input type="radio" id="onlinebank" name="paymentmethod" value="1" class="">
                <label for="male"><strong>Online Banking</strong></label>
            </div>
            <div class="col-md-3">
                <input type="radio" id="otcb" name="paymentmethod" value="2" class="">
                <label for="male"><strong>Over-the-Counter Banking and ATM  </strong>              </label>
            </div> 
            <div class="col-md-3">
                <input type="radio" id="otcnb" name="paymentmethod" value="4" class="">
                <label for="male"><strong>Over-the-Counter non-Bank </strong>               </label>
            </div> 
            
       </div>
    </div>
</div>

<div class="card border-left-primary shadow  py-2 mb-5">
    <div class="card-body">
       <h5><strong>Payment Summary</strong></h5>
       <div class="row">
        <div class="col-md-6">
         <table class="table table-bordered table-condensed">
                <tr>
                    <td width="25%">Principal: </td>
                    <td width="75%" id="sumInsured" style="text-align:right">{{strtoupper($transaction->business_name)}}</td>
                </tr>
                 <tr>
                    <td width="25%">Address: </td>
                    <td width="75%" id="sumInsured" style="text-align:right">{{strtoupper($transaction->business_address)}},{{ $location->location_description }}</td>
                </tr>
                <tr>
                    <td width="25%">Policy No: </td>
                    <td width="75%" id="sumInsured" style="text-align:right"><small>*Not yet assigned</small></td>
                </tr>
                 <tr>
                    <td width="25%">Inception Date: </td>
                    <td width="75%" id="sumInsured" style="text-align:right"><small>*Not yet assigned</small></td>
                </tr>
                 <tr>
                    <td width="25%">Expiry Date: </td>
                    <td width="75%" id="sumInsured" style="text-align:right"><small>*Not yet assigned</small></td>
                </tr>
                <tr>
                    <td width="25%">Total Sum Insured: </td>
                    <td width="75%" id="sumInsured" style="text-align:right">PHP 500,000.00</td>
                </tr>
            </table>
            <small>* Note that the Policy Number and Inception Date will be assigned after the payment is posted</small>
            </div>
            <div class="col-md-6">
            <table class="table table-bordered">
                <tr>
                    <td width="60%">Total Premium: </td>
                    <td width="40%" id="premium" style="text-align:right">PHP 4,992.00</td>
                </tr>
                <tr>
                    <td>Doc. Stamps: </td>
                    <td id="docStamp" style="text-align:right">624.00</td>
                </tr>
                <tr>
                    <td>V.A.T.: </td>
                    <td id="vat" style="text-align:right">599.04</td>
                </tr>
                <tr>
                    <td>L.G.T.: </td>
                    <td id="lgt" style="text-align:right">9.98</td>
                </tr>
                <tr>
                    <td>Notarial Fee.: </td>
                    <td id="lgt" style="text-align:right">300.00</td>
                </tr>
                <tr>
                    <td>ACK.: </td>
                    <td id="lgt" style="text-align:right">30.00</td>
                </tr>
                <tr>
                    <td>Convenience Fee: </td>
                    <td  style="text-align:right"><strong id="convenience_fee">0.00</strong></td>
                </tr>
                <tr>
                    <td>Total Amount Due: </td>
               
                    <td id="due" style="text-align:right">PHP <strong id="totaldue">6,555.02</strong> </td>
                </tr>
            </table><br>
            <span class="float-right"><input type = "checkbox" id="chkTerms"> I agree to <a href="{{url('terms-and-conditions')}}" style="color:blue">Terms and Condition </a> and <a href="{{url('data-privacy')}}" style="color:blue">Privacy Policy</a> </span><br>
            <span class="float-right" style="color:red" id="plschs">Please choose a payment method</span>
                <form action="{{ action('DragonpayController@index') }}" method="POST">
                {!! csrf_field() !!}
                <input type="hidden" id="pay_method" value="0" name="payment_method">
                <input type="hidden" id="transaction_fee" value="0" name="transaction_fee">
                <input type="hidden" value="{{$transaction->transaction_id}}" name="transaction_id">
                <input type="hidden" value="{{$digest}}" name="digest">
                <input type="hidden" value="{{$merchant_id}}" name="merchant_id">
                <input type="hidden" value="{{'Bond-'.$transaction->transaction_id}}" name="txnid">
                <input type="hidden" value="6555.02" name="amount" id="amount">
                <input type="hidden" value="PHP" name="ccy">
                <input type="hidden" value="{{$transaction->business_name}}" name="description">
                <input type="hidden" value="{{ Auth::user()->email }}" name="email">
                 <button type="Submit" class="btn btn-primary float-right" id="btnSubmit" disabled="true" style="display:none">Go to Payment</button>
                 </form>
            </div>
            </div>
           
    </div>
</div>




        
@endsection
<script src="{{asset('vendor/jquery/jquery.min.js')}}"></script>
<script>
    $(document).ready(function(){

        function numberWithCommas(x) {
            return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
        }


        $('input[type="checkbox"]').click(function(){
            if($(this).prop("checked") == true && $('#pay_method').val()!=0){
               $('#btnSubmit').prop('disabled',false);
            }
            else if($(this).prop("checked") == false || $('#pay_method').val()==0){
                $('#btnSubmit').prop('disabled',true);
            }
        });


        $("input[name='paymentmethod']").click(function(){
            $('#btnSubmit').show();
            $('#plschs').hide();
            var radioValue = $(this).val(); 
            //console.log(radioValue);
            $('#pay_method').val(radioValue*1);
                var fee = 0;
            switch(radioValue*1) {
                case 1:
                    fee = 10;
                    $('#convenience_fee').text('10.00');
        
                    break;
                case 2:
                    fee = 15;
                 
                    $('#convenience_fee').text('15.00');
                    break;
                case 4:
                    fee = 20;
                 
                    $('#convenience_fee').text('20.00');
                    break;
                case 816:
                    fee = 0;
                   
                    $('#convenience_fee').text('0.00');
                    break;
                default:
                    $('#btnSubmit').prop('disabled',true);
            }

                 $('#transaction_fee').val(fee);
                 var totaldue = ($('#amount').val()*1) + fee;
                 $('#totaldue').text(numberWithCommas(totaldue));
                    
            });

    });
</script>