@extends('backend.layouts.app')

@section('title', 'Payment Manager')

@section('content')
   <br /><br />
    <div class="container-fluid">
        <h3 class="mb-0">Payment Manager</h3>
    
        <div class="card shadow" style="margin-top: 1%;">
    
            <div class="card-body border-0">
                <div> <h3>Manage your payment settings</h3> </div>

                <div> 
                    <h2>Manual Payments</h2>
                    <p class="text">Provide customers instructions to pay. Choose from COD or Bank Payment.</p> 
                </div>

                <div class="col-lg-12">
                    <div class="row">
                        <div class="col-sm-3 float-right">
                            <div class="row float-center" style="padding-left: 70px;">
                                  <label class="custom-toggle">
                                      <input type="checkbox" class="customSwitches" checked="">
                                      <span class="custom-toggle-slider rounded-circle" data-label-off="No" data-label-on="Yes"></span>
                                  </label>
                                  &nbsp;&nbsp;
                                  <label class="control-label">Cash on Delivery</label>
                              </div>
                        </div>
                        <div class="col-sm-9">
                            <p class="text">Have your customers pay with cash upon delivery.</p> 
                        </div>
                    </div>
                    
                </div>
                <hr class="hr" style="margin-top: -0.5rem; margin-bottom: 0.7rem" />
                <div class="col-lg-12">
                    <div class="row">
                        <div class="col-sm-3 float-right">
                            <div class="row float-center" style="padding-left: 70px;">
                                  <label class="custom-toggle">
                                      <input type="checkbox" class="customSwitches" checked="">
                                      <span class="custom-toggle-slider rounded-circle" data-label-off="No" data-label-on="Yes"></span>
                                  </label>
                                  &nbsp;&nbsp;
                                  <label class="control-label">Bank Deposit</label>
                              </div>
                        </div>
                        <div class="col-sm-9">
                            <p class="text">Deposit thru bank or bank online transfer.</p> 
                        </div>
                    </div>
                </div>
            </div>
            
        </div>

        <div class="card shadow">
            <div class="card-body border-0">
                <div> <h3>Online Payment Options</h3> </div>

                <div> 
                    <h4>Enable customers to pay via Online Payment</h4>
                </div>
                <div class="row" style="margin-top: 1%;">
                    <div class="col-lg-6">
                        <div class="row">
                            <div class="col-md-7">
                                <p class="text-default">
                                        <i class="fa fa-info-circle fa-sm text-warning" aria-hidden="true"></i>&nbsp;For disbursement, please fill up.
                                    </p>
                            </div>
                            <div class="col-md-5">
                                <a href="#" class="text-primary stretched-link" style="font-size: 13px;margin-left:-40px;">
                                   Merchant Registration
                                </a>

                            </div>
                        </div>

                    </div>


                </div>
                <div class="col-lg-12">
                    <div class="row">
                        <div class="col-sm-3 float-right">
                            <div class="row float-center" style="padding-left: 70px;">
                                  <label class="custom-toggle">
                                      <input type="checkbox" class="customSwitches" checked="">
                                      <span class="custom-toggle-slider rounded-circle" data-label-off="No" data-label-on="Yes"></span>
                                  </label>
                                  &nbsp;&nbsp;
                                  <label class="control-label">BPI</label>
                              </div>
                        </div>
                        <div class="col-sm-9">
                            <p class="text">+₱25 Processing Fee</p> 
                        </div>
                    </div>
                    
                </div>
                <hr class="hr" style="margin-top: -0.5rem; margin-bottom: 0.7rem" />
                <div class="col-lg-12">
                    <div class="row">
                        <div class="col-sm-3 float-right">
                            <div class="row float-center" style="padding-left: 70px;">
                                  <label class="custom-toggle">
                                      <input type="checkbox" class="customSwitches" checked="">
                                      <span class="custom-toggle-slider rounded-circle" data-label-off="No" data-label-on="Yes"></span>
                                  </label>
                                  &nbsp;&nbsp;
                                  <label class="control-label">GCash</label>
                              </div>
                        </div>
                        <div class="col-sm-9">
                            <p class="text">+2.5% Processing Fee</p> 
                        </div>
                    </div>
                </div>

                <hr class="hr" style="margin-top: -0.5rem; margin-bottom: 0.7rem" />
                <div class="col-lg-12">
                    <div class="row">
                        <div class="col-sm-3 float-right">
                            <div class="row float-center" style="padding-left: 70px;">
                                  <label class="custom-toggle">
                                      <input type="checkbox" class="customSwitches" checked="">
                                      <span class="custom-toggle-slider rounded-circle" data-label-off="No" data-label-on="Yes"></span>
                                  </label>
                                  &nbsp;&nbsp;
                                  <label class="control-label">Maya</label>
                              </div>
                        </div>
                        <div class="col-sm-9">
                            <p class="text">Payment using debit card.</p> 
                        </div>
                    </div>
                </div>

            </div>
            
        </div>

        <!-- Online payment gateaways -->
        <div class="card shadow">
            <div class="card-body border-0">
                <div> <h3>Online Payment Gateaways</h3> </div>

                <div> 
                    <span class="plan">Provide your Public and Secret Keys to each Online Payment Gateway Partners</span>
                </div>
                <br>
                <div class="list-payment-gateway">
                  @include('backend.my-account.payment-manager.payment-gateway-ajax')
                </div>
                
              

            </div>
            
        </div>
            
    </div>
    @include('backend.my-account.payment-manager.modal-create')

@endsection

@section('after-scripts')
    <script src="{{ asset('js/my-account/payment-manager/index.js') }}"></script>
@endsection