@extends('layouts.main')

@section('content')
<!-- ============================= span Content Start =================================== -->
<span class="display-zero">{!! $Locale = LaravelLocalization::getCurrentLocale() !!}</span>
<style type="text/css">
    .banner-area{background:url('{!! asset(option('Home_background')) !!}') no-repeat;
    background-size:cover}
</style>
    <!-- ===============================  About  ======================================== -->
    <section class="banner-area relative">
        <div class="overlay overlay-bg"></div>
        <div class="container">
            <div class="row justify-content-lg-end align-items-center banner-content">
                <div class="col-lg-12">
                    <h1 class="text-white">{!! __('main.donate_now') !!}</h1>
                    <!-- ===============================  About  ======================================== -->
                     @if($Locale == 'ar')
                      <p> {!! option('Home_ar') !!}. </p>
                     @elseif($Locale == 'fr')
                      <p> {!! option('Home_fr') !!}. </p>
                     @else
                      <p> {!! option('Home_en') !!}. </p>
                     @endif
                    <!-- ===============================  About  ======================================== -->
                </div>
            </div>
        </div>
    </section>
    <!-- ===============================  About area  =================================================== -->
    <section class="about_area lite_bg">
        <div class="container"> 
            <div class="row mt-3 mb-3">
                <div class="col-lg-6">
                   <img src="{!! asset(option('donate_now')) !!}" width="100%">
                </div>
                <div class="col-lg-6 mt-2">
                    <div>
                        <!-- ===============================  Home  ======================================== -->
                        <h2>{!! __('main.How_Donate') !!}</h2>
                        <!-- ===============================  Home  ======================================== -->
                        <p class="mb-0">
                         {!! __('main.donate_content') !!}
                        </p>
                        <!-- Include PayPal SDK script -->
                <script src="https://www.paypal.com/sdk/js?client-id={!! option('client-id') !!}&currency=USD"></script>
                <div class="form-group mt-3">
                <input class="form-control" id="amount" type="text" name="amount" placeholder="{!! __('main.Enter_Now') !!}">
                </div>
                <div id="paypal-button-container"></div>
                </div>
                </div>
                <script>
                    paypal.Buttons({
                        createOrder: function(data, actions) {
                            // Set up the transaction details
                            return actions.order.create({
                                purchase_units: [{
                                    amount: {
                                        value: document.getElementById('amount').value // Get the amount from the input field
                                    }
                                }]
                            });
                        },
                        onApprove: function(data, actions) {
                            // Capture the payment when the user approves
                            return actions.order.capture().then(function(details) {
                                // Handle successful payment
                                alert('Transaction completed by ' + details.payer.name.given_name);
                                // Redirect or perform other actions as needed
                            });
                        }
                    }).render('#paypal-button-container');
                </script>
                    </div>
                </div>
            </div>
        </div>
    </section>
<!--================ End About Area ========================================================================== -->
<section class="callto-area section-gap relative" data-parallax="scroll"  
     style="background:url({!! asset(option('Help_background')) !!}) 
     center no-repeat;background-size:cover;">
<div class="overlay overlay-bg"></div>
<div class="container text-center">
    <div class="row justify-content-center">
        <div class="col-lg-8">
            <p class="top_text">{!! __('main.Need_help') !!}</p>
            <!-- ===============================  Home  ============================ -->
            <div class="call-wrap mx-auto">
                <h1>{!! __('main.Volunteer_Area') !!}</h1>
                <p>{!! __('main.that_Our') !!}</p>
                <!-- ===============================  Home  ======================== -->
                <a href="{!! route('register') !!}" class="primary-btn mt-5 primary-btn-log">
                  {!! __('main.Sign_In') !!} <i class="fas fa-sign-in-alt ml-1"></i>
                </a>
                <!-- ===============================  Home  ========================= -->
            </div>
            <!-- ===============================  Home  ============================= -->
        </div>
    </div>
</div>
</section>
<!-- =============================== Content Start =========================================== -->
@endsection