@extends('layouts.innerpage')

@section('title', 'Gold Saving Scheme Payment')

@section('content')
<style>
@media (min-width: 1200px) {
  .table-responsive {
    overflow-x: initial;
  }
}

.ps-table thead > tr > th {
  font-size: 18px;
  font-weight: 700;
  color: #515356;
  text-transform: uppercase;
  border-bottom: 1px solid #e5e5e5;
}

.ps-table tbody > tr > td {
  vertical-align: middle;
  padding: 20px 30px;
  border: 1px solid #ddd;
  color: #666;
}

@media (max-width: 768px) {
  .ps-table--responsive {
    border: none;
    max-width: 100vw;
  }
  .ps-table--responsive .ps-product--cart {
    flex-flow: column nowrap;
    align-items: flex-end;
    margin-left: 30px;
  }
  .ps-table--responsive .ps-product--cart .ps-product__thumbnail {
    display: none;
  }
  .ps-table--responsive .ps-product--cart .ps-product__content {
    padding-left: 0;
  }
  .ps-table--responsive thead {
    display: none;
  }
  .ps-table--responsive tbody {
    display: block;
  }
  .ps-table--responsive tbody tr {
    display: block;
    margin-bottom: 10px;
    border: 1px solid #ddd;
  }
  .ps-table--responsive tbody tr td[data-label] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: none;
    text-transform: capitalize;
    border-top: 1px solid #ddd;
    min-width: 220px;
  }
  .ps-table--responsive tbody tr td[data-label]:before {
    content: attr(data-label) ":";
    font-weight: 600;
    margin-right: 12px;
  }
  .ps-table--responsive tbody tr td[data-label]:first-child {
    border-top: none;
  }
}
</style>

<section class="section-padding bg-dark inner-header" style="padding-top:140px;">
    <div class="container">
        <div class="row">
            <div class="col-md-12 text-center">
                <h1 class="mt-0 mb-3 text-white">My Gold Saving Scheme</h1>
                <div class="breadcrumbs">
                    <p class="mb-0 text-white"><a class="text-white" href="{{url('/')}}">Home</a> / <span class="text-success">My Gold Saving Scheme</span></p>
                </div>
            </div>
        </div>
    </div>
</section>

<section class="account-page section-padding">
    <div class="container">
        <div class="row">
            <div class="col-lg-12">
                <div class="row no-gutters">
                    <div class="col-md-4">
                        <div class="card account-left">
                            <div class="user-profile-header">
                                @if(isset(Auth::user()->profile_picture))
    @php 
        $profileimg = url('/')."/uploads/members/".Auth::user()->profile_picture;
        if(Auth::user()->sm!='') {
            $profileimg = Auth::user()->profile_picture;
        } 
    @endphp
    <img src="{{$profileimg}}">
@else 
    <img alt="logo" src="{{url('/')}}/assets/frontend/img/user.png">
@endif
                                <h5 class="mb-1 text-secondary"><strong>Hi </strong> @if(Auth::user()->name!="") {{Auth::user()->name}} @else User @endif</h5>
                                @if(Auth::user()->phone_no!="") <p> {{Auth::user()->phone_no}} </p> @endif
                                @if(Auth::user()->email!="") <p> {{Auth::user()->email}} </p> @endif
                            </div>
                            @include('includes.profile_menu')
                        </div>
                    </div>

                    <div class="col-md-8">
                        <div class="card card-body account-right">
                            <div class="widget">
                                <div class="order-list-tabel-main table-responsive">
                                    
                                    @php
                                    $totprice = $_GET['amt'];
        $gatewaycharge = ((2 / 100) * $totprice);
        $payable = $gatewaycharge + $totprice;
    @endphp
       @if($totprice>0)                             
    <div class="main_card">
    <div class="select-cards">
    <h5 class="mt-3 text-secondary">Payment Direct</h5>
    <small>You should shell out some quality time but no gateway charges u can  <b>Save 2%</b></small>
    <div class="select" onclick="paymentOpt(2)">
      <div class="check-box">
          <div class="check-dot">            
          </div>
      </div>
      <div class="titles">
        <h4>Pay Using QR Code</h4>
        <small>Scan QR, Pay & Upload screenshot</small>
      </div>
    </div>    
    <div id="payment-transfer" class="select" onclick="paymentOpt(3)">
      <div class="check-box">
          <div class="check-dot">            
          </div>
      </div>
      <div class="titles">
        <h4>Direct Bank Transfer</h4>
        <small>Pay to our Bank Account directly and upload screen shot</small>
      </div>
    </div>
                <div id="directTransfer" style="display:none;margin-top:5px;" class="text-center">
        <p style="margin-top:12px;" class="mb-0 pb-1 pt-1">Account Name : <strong class="text-black">SHRI ARTHI JEWELLERY</strong></p>
        <p style="margin-top:5px;" class="mb-0 pb-1 pt-1">Account Number : <strong class="text-black">35400002403</strong></p>
        <p style="margin-top:5px;" class="mb-0 pb-1 pt-1">IFSC : <strong class="text-black">SBIN0003690</strong></p>
        <p style="margin-top:5px;" class="mb-0 pb-1 pt-1">Bank Name : <strong class="text-black">State Bank of India</strong></p>
        <p style="margin-top:5px;" class="mb-0 pb-1 pt-1">Branch : <strong class="text-black">GANAPATHY</strong></p>
        <p style="margin-top:5px;" class="mb-0 pb-2 pt-1">Payable Amount : <strong class="text-black"><i class="fa fa-rupee-sign"></i> {{number_format($totprice,2)}}</strong></p>
        <p class="font-weight-bold mb-1">(Transfer to Shri Arthi Jewellery)</p>
        <a id="transfer-instructions-btn" href="#" data-target="#transfer-instructions" data-toggle="modal" class="btn btn-danger">View Instructions</a>
        <!--<form action="{{url('/')}}/chitsuccess" enctype="multipart/form-data" method="POST" id="offlinepaymentFrm"> -->
        <!--    @csrf-->
        <!--<fieldset class="form-group text-left" > -->
        <!--    <input type="hidden" name="order_id" id="order_id">-->
        <!--</fieldset>-->
        <!--</form>-->
        </div>

        <div id="offlinePayment" style="display:none;margin-top:5px;" class="text-center">
            <img style="border:1px solid #ccc;" src="{{url('/')}}/assets/images/qrcode.png">
            <p style="margin-top:5px;" class="mb-0 pb-2 pt-1">Payable Amount : <strong class="text-black"><i class="fa fa-rupee-sign"></i> {{number_format($totprice,2)}}</strong></p>
            <p class="font-weight-bold mb-1">(Scan and Pay With Any UPI App)</p>
            <a id="payment-instructions-btn" href="#" data-target="#payment-instructions" data-toggle="modal" class="btn btn-danger">View Instructions</a>
            <!--<form action="{{url('/')}}/chitsuccess" enctype="multipart/form-data" method="POST" id="offlinepaymentFrm">-->
            <!--    @csrf-->

            <!--<fieldset class="form-group text-left" >-->
            <!--    <input type="hidden" name="order_id" id="order_id">-->
            <!--</fieldset>-->
            <!--</form>-->
        </div>
        <div id="offline-button" style="display:none;margin-top:5px;" class="text-center">
            <form action="{{url('/')}}/chitsuccess" enctype="multipart/form-data" method="POST" id="offlinepaymentFrm">
                @csrf
           <!-- <fieldset class="form-group text-left" >
                <label>Transaction Id</label>
                <input type="text" class="form-control" name="transid" id="transid" placeholder="Transaction Id" maxlength="20">
            </fieldset>-->
            <img id="image-preview" class="d-none img-fluid mx-auto mb-3" style="max-width:300px" src="">
            <div class="upload-main-wrapper">
                <div class="upload-wrapper">
                        <input type="file" id="screenshotfile" name="screenshotfile" class="onlyImage" >
                        <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid meet" viewBox="224.3881704980842 176.8527621722847 221.13266283524905 178.8472378277154" width="221.13" height="178.85"><defs><path d="M357.38 176.85C386.18 176.85 409.53 204.24 409.53 238.02C409.53 239.29 409.5 240.56 409.42 241.81C430.23 246.95 445.52 264.16 445.52 284.59C445.52 284.59 445.52 284.59 445.52 284.59C445.52 309.08 423.56 328.94 396.47 328.94C384.17 328.94 285.74 328.94 273.44 328.94C246.35 328.94 224.39 309.08 224.39 284.59C224.39 284.59 224.39 284.59 224.39 284.59C224.39 263.24 241.08 245.41 263.31 241.2C265.3 218.05 281.96 199.98 302.22 199.98C306.67 199.98 310.94 200.85 314.93 202.46C324.4 186.96 339.88 176.85 357.38 176.85Z" id="b1aO7LLtdW"></path><path d="M306.46 297.6L339.79 297.6L373.13 297.6L339.79 255.94L306.46 297.6Z" id="c4SXvvMdYD"></path><path d="M350.79 293.05L328.79 293.05L328.79 355.7L350.79 355.7L350.79 293.05Z" id="b11si2zUk"></path></defs><g><g><g><use xlink:href="#b1aO7LLtdW" opacity="1" fill="#ffffff" fill-opacity="1"></use></g><g><g><use xlink:href="#c4SXvvMdYD" opacity="1" fill="#363535" fill-opacity="1"></use></g><g><use xlink:href="#b11si2zUk" opacity="1" fill="#363535" fill-opacity="1"></use></g></g></g></g></svg>
                        <span class="file-upload-text">Upload Screenshot</span>
                        <div class="file-success-text">
                         <svg version="1.1" id="check" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
                    viewBox="0 0 100 100"  xml:space="preserve">
                <circle style="fill:rgba(0,0,0,0);stroke:#ffffff;stroke-width:10;stroke-miterlimit:10;" cx="49.799" cy="49.746" r="44.757"/>
                <polyline style="fill:rgba(0,0,0,0);stroke:#ffffff;stroke-width:10;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;" points="
                    27.114,51 41.402,65.288 72.485,34.205 "/>
                </svg> <span>Uploaded</span></div>
            </div>
            </div> 
            <fieldset class="form-group text-left" >
                <input type="hidden" name="order_id" id="order_id">
            </fieldset>
            </form>
            <button style="margin-top:10px;" class="btn btn-danger btn-block" onclick="chit_payment('{{$_GET['ins']}}','{{$_GET['cid']}}','{{$totprice}}','{{Auth::user()->id}}')"> Paid </button>
    </div>
    <!--<div id="payment-transfer1" class="select" onclick="paymentOpt(3)">
      <div class="check-box">
          <div class="check-dot">            
          </div>
      </div>
      <div class="titles">
        <h4>Direct Bank Transfer</h4>
        <small>Pay to our Bank Account directly and upload screen shot</small>
      </div>
    </div>-->
    
    
    @php
        $settings = DB::table('settings')->where('id',1)->first();
    @endphp
    @if($settings)
        @if($settings->activate_online_payment==1)
            <h5 class="mt-3 text-secondary">Payment via Gateway</h5>
            <small>Instant but <b>2% gateway charges</b> will be collected on ur billing amount</small>
            <div class="select" onclick="paymentOpt(1,1)">
              <div class="check-box" style="width:50px">
                  <div class="check-dot">            
                  </div>
              </div>
              <div class="titles">
                <h4>Credit / Debit Card</h4>
                <small>Pay using Credit/Debit or International issued cards securely with our trusted payment partners</small>
              </div>
            </div>
            <div id="wallet" class="select" onclick="paymentOpt(1,2)">
              <div class="check-box">
                  <div class="check-dot">            
                  </div>
              </div>
              <div class="titles">
                <h4>Wallets</h4>
                <small>Choose this option to place your order using digital wallet</small>
              </div>
            </div>
            <div id="upi" class="select" onclick="paymentOpt(1,3)">
              <div class="check-box">
                  <div class="check-dot">            
                  </div>
              </div>
              <div class="titles">
                <h4>UPI ID</h4>
                <small>Use our UPI payment options to complete your payment</small>
              </div>
            </div>
        @endif
    @endif
    
    
    
        <div id="razorpayBtn" style="display:none;margin-top:10px;" class="text-center">
        <p class="mb-0 pb-2 pt-1">Gateway Charge (2%) : <strong class="text-black"><i class="fa fa-rupee-sign"></i> {{number_format($gatewaycharge,2)}}</strong></p>
        
        <p class="mb-0 pb-2 pt-1">Payable Amount : <strong class="text-black"><i class="fa fa-rupee-sign"></i> {{number_format($payable,2)}}</strong></p>
        <button style="margin-top:10px;" class="btn btn-danger btn-block" onclick="chitPayment('{{$_GET['ins']}}','{{$_GET['cid']}}','{{$payable}}','{{Auth::user()->id}}')"> Pay Now</button>
        
        @php 
          $amount=$payable*100;
        @endphp
        
        <form action="{{url('/')}}/chitsuccess" id="chitpaymentFrm" method="POST" style="display: none;">         
            <script src="https://checkout.razorpay.com/v1/checkout.js"
                    data-key="{{$_ENV['RAZOR_KEY']}}"
                    data-amount="{{$amount}}"
                    data-currency="INR"
                    data-buttonclass="button-info">
            </script>
            <input type="hidden" name="razorpay_order_id" id="razorpay_order_id">
            <input type="hidden" name="name" id="payment_name">
              <input type="hidden" name="description" id="description">
              <input type="hidden" name="prefill[name]" id="prefill_name" >
              <input type="hidden" name="prefill[contact]" id="prefill_phone_no">
              <input type="hidden" name="prefill[email]" id="prefill_email">
            <input type="hidden" name="_token" value="{!!csrf_token()!!}">
        </form>
    </div>
    <!--<div id="wallet1" class="select" onclick="paymentOpt(1,2)">
      <div class="check-box">
          <div class="check-dot">            
          </div>
      </div>
      <div class="titles">
        <h4>Wallets</h4>
        <small>Choose this option to place your order using digital wallet</small>
      </div>
    </div>
    <div id="upi1" class="select" onclick="paymentOpt(1,3)">
      <div class="check-box">
          <div class="check-dot">            
          </div>
      </div>
      <div class="titles">
        <h4>UPI ID</h4>
        <small>Use our UPI payment options to complete your payment</small>
      </div>
    </div>-->
    </div>
    </div> 
    
    @endif
    
    
    <center><a style=" margin-top: 5%;" href="{{ url()->previous() }}" class="btn btn-primary btn-sm mb-30"><i class="fas fa-angle-left"></i> Go Back </a></center>
    
                                </div>
                            </div>
                        </div>
                    </div>

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

<script type="text/javascript">
     $(document).ready(function(){
        $('#screenshotfile').change(function() {
            checkType($('#screenshotfile')[0].files[0]);
            var filename = $(this).val();
            if(filename!=""){
                $('.upload-wrapper').removeClass("uploaded");
                $('.upload-wrapper').removeClass("success");
                setTimeout(function(){
                    $('.upload-wrapper').addClass("uploaded");
                }, 600);
                setTimeout(function(){
                    $('.upload-wrapper').removeClass("uploaded");
                    $('.upload-wrapper').addClass("success");
                }, 1600);
            }
        });
    });
    function checkType(file){
    let imageType = /image.*/;
    if (!file.type.match(imageType)) {
      return;
    } else {
      previewImage(file);
    }
    }
    function previewImage(file){
    let thumb = document.querySelector('#image-preview'),
    reader = new FileReader();

    reader.onload = function() {
      thumb.setAttribute("src", reader.result);
    }
    reader.readAsDataURL(file);
    thumb.className += ' d-block';
   }
    var select_card = document.querySelectorAll(".select");

    var selected=2;
    
    var reset = ()=>{
      
    select_card.forEach((k)=>{
      
     k.setAttribute("data-selected", "false");
    })
    }
    
    select_card.forEach((a,i)=>{
      
      a.addEventListener("click",(e)=>{
         reset();
       a.setAttribute("data-selected", "true")
        selected=i+1;
      })
    });
    function chit_paynow(noofins,chitid,amount) {
        var formData = new FormData();
        formData.append('noofins', noofins);
        formData.append('cdid', chitid);
        formData.append('amount', amount);
        formData.append('_token', "{{csrf_token()}}");

        $.ajax({
           type: "POST",
           url: "{{url('/')}}/chit/paynow",
           data: formData, 
           processData: false,
           contentType: false,
           success: function(data)
           {
                responseMsg('Successully paid!','Success!','success');
                window.location.reload();
           }
         });
    }
</script>
@endsection