@extends('app')
@section('content')
    <div class="mobile-app-payitforward">
        <div class="top-banner">
            <div class="d-flex justify-content-center">
                <h6 class="text-div d-flex">
                    <img src="{{ Vite::asset('resources/images/mobile_logo.webp') }}" alt="" class="logo-image"><span
                        class="ps-1 pt-3 text-white">Pay It Forward™</span>
                </h6>
            </div>
        </div>
        <div class="bottom-banner ">
            <div class="p-3">
                <div class="row d-flex justify-content-center">
                    <div class="col-xs-12 col-sm-8 col-sm-offset-2 col-md-6 col-md-offset-3">
                        <div class="panel panel-default credit-card-box">
                            <div class="panel-body">
                                <div class="text-center my-2 pb-2 cursor-pointer" id="goback-btn" data-timestamp="{{$timeStamp}}" data-mobile-app-token="{{ env('APP_TOKEN') }}"> <i class="fa-solid fa-circle-arrow-left"></i> Go Back</div>

                                <div class="my-2 pb-2 fw-bold" id="payable-amount">Payable Amount: $5.00</div>

                                <form id="checkout-form">
                                    <!-- Card Number -->
                                    <label for="card-number" class="card-label" style="font-size: .8rem;">
                                        Card Number<span class="text-danger">*</span>
                                    </label>
                                    <div class="input-group mb-3">
                                        <div class="input-group-prepend">
                                            <span class="input-group-text bg-white border-right-0 rounded-end-0 py-2">
                                                <i id="card-brand-icon" class="fas fa-credit-card"></i>
                                            </span>
                                        </div>
                                        <div id="card-number" class="form-control border-left-0"></div>
                                    </div>

                                    <!-- Expiration Date -->
                                    <label for="card-expiry" class="card-label" style="font-size: .8rem;">
                                        Expiration Date<span class="text-danger">*</span>
                                    </label>
                                    <div class="form-control mb-3" id="card-expiry"></div>

                                    <!-- CVC -->
                                    <label for="card-cvc" class="card-label" style="font-size: .8rem;">
                                        CVC<span class="text-danger">*</span>
                                    </label>
                                    <div class="form-control mb-3" id="card-cvc"></div>

                                    <!-- Submit Button -->
                                    <div class="d-flex justify-content-center align-items-center">
                                        <button id="stripe-pay-btn" class="btn btn-blue stripe-pay-btn mt-3 w-50" type="button">PAY $10</button>
                                    </div>
                                </form>

                                <hr>
                                <div class="text-center" style="font-size: 0.9em; color: #333;">
                                    <p>
                                        <strong>FundMeSmart™ protects your donation</strong>
                                        <br>
                                        We guarantee you a full refund for up to a year in the rare case that fraud occurs.
                                        <a href="/giving-guarantee-policy" style="color: #004080; text-decoration: underline;">See our FundMeSmart™ Giving Guarantee.</a>
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>
    <div id="successModal" class="modal fade" tabindex="-1" aria-labelledby="successModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="successModalLabel">Payment Successful</h5>
                    {{-- <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> --}}
                </div>
                <div class="modal-body">
                    Your payment has been processed successfully.
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" id="modal-ok-btn" data-timestamp-id="{{$timeStamp}}" data-org-name="{{$profileInfo->organization_name}}" data-donor-name="{{$profileInfo->participant_fname ." ".$profileInfo->participant_lname}}">OK</button>
                </div>
            </div>
        </div>
    </div>
    <script>
        var STRIPE_PUBLISHABLE_KEY = "{{ env('STRIPE_PUBLISHABLE_KEY') }}";
    </script>
    <script src="https://js.stripe.com/v3/"></script>
@Vite(['resources/js/admin_panel/stripe/mobile_app_payment.js'])
@endsection