@extends('layouts.main')

@section('content')
<!-- ============================= Content Start ==================================== -->
<span class="display-zero">{!! $Locale = LaravelLocalization::getCurrentLocale() !!}</span>
<!-- =============================  START CONTENT =================================== -->
@if(isset($Cause->ImageUpload->filename))
<style type="text/css">
.banner-area{background:url('{!! asset($Cause->ImageUpload->filename) !!}') no-repeat;background-size:cover}
</style>
@else
@endif 
<!--================ End top-section Area ================================== -->
<section class="banner-area relative">
<div class="overlay overlay-bg"></div> 
<div class="container">
    <div class="row align-items-center banner-content">
        <div class="col-lg-8">
            <!-- ================ Start Popular Causes Area ================= -->
            <h1 class="text-white">{!! $Cause->{'Title_'.$Locale} !!}</h1>
            <!-- ================ Start Popular Causes Area ================= -->
            <p class="mb-0">
              {!! __('main.The_legal_2') !!}
            </p>
        </div>
    </div>
</div>
</section>
<!--================ End top-section Area ==================================== -->
<section class="event_details section-gap-top">
    <div class="container">
        <div class="event_content mb-40">
            <div class="row justify-content-center">
                <div class="col-lg-12">
                <div class="right_content">
                <h2>{!! $Cause->{'Title_'.$Locale} !!}</h2>
                    {!! $Cause->{'body_'.$Locale} !!}
                <!--================ Start Popular Causes Area =================-->    
                <!-- Include PayPal SDK script -->
                <script src="https://www.paypal.com/sdk/js?client-id={!! option('client-id') !!}&currency=USD"></script>
                <div class="row">
                <div class="col-lg-6">
                <figure>
                @if(isset($Cause->ImageUpload->filename))
                    <img class="card-img-top img-fluid rounded" src="{!! asset($Cause->ImageUpload->filename) !!}">
                @else
                @endif
                </figure>
                </div>
                <div class="col-lg-6">
                <div class="form-group">
                    <input class="form-control" id="amount" type="text" name="amount" placeholder="{!! __('main.Enter_Donation_Amount') !!}">
                </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>
                <!--================ Start Popular Causes Area ================= -->
                </div>
                </div>
            </div>
        </div>
    </div>
</section>
<!--================ End Popular Causes Area ==================================== -->
<div class="cta-area banner-area relative">
    <div class="overlay overlay-bg"></div>
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-lg-10">
                <!--================ Start Popular Causes Area =================== -->
                <p class="top_text">{!! __('main.Thanks_heart') !!}</p>
                <h1 class="text-white">{!! __('main.Contribute_heart') !!}</h1>
                 <a href="{!! url('contacts_us') !!}" class="primary-btn primary-btn-log">{!! __('main.donation') !!}</a>
                 <!--================ Start Popular Causes Area =================== -->
            </div>
        </div>
    </div>
</div>
<!-- ============================= END CONTENT ==================================== -->
@endsection