@extends('layouts.master')
@section('background-image', '/assets/images/donate.jpg')
@section('bg-y', '0px')
@section('content')
    <div class="nk-header-title nk-header-title-xsm bg-transparent">
        <div class="nk-header-table">
            <div class="nk-header-table-cell">
                <div class="container">
                    <div class="nk-header-text">
                        <div class="d-flex flex-row justify-content-center">
                            <h1 class="nk-title display-4 ml-10">
                                Donate Store
                            </h1>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
	<!-- Load Facebook SDK for JavaScript -->
	@if (in_array(request()->server("HTTP_CF_IPCOUNTRY"), ["EGY","DE"]))
      <div id="fb-root"></div>
      <script>
        window.fbAsyncInit = function() {
          FB.init({
            xfbml            : true,
            version          : 'v6.0'
          });
        };

        (function(d, s, id) {
        var js, fjs = d.getElementsByTagName(s)[0];
        if (d.getElementById(id)) return;
        js = d.createElement(s); js.id = id;
        js.src = 'https://connect.facebook.net/ar_AR/sdk/xfbml.customerchat.js';
        fjs.parentNode.insertBefore(js, fjs);
      }(document, 'script', 'facebook-jssdk'));</script>

      <!-- Your customer chat code -->
      <div class="fb-customerchat"
        attribution=setup_tool
        page_id="1906988266180782"
  theme_color="#0084ff"
  logged_in_greeting="مرحبا، اذا كنت تريد الشحن من مصر، برجاء التحدث إلينا."
  logged_out_greeting="مرحبا، اذا كنت تريد الشحن من مصر، برجاء التحدث إلينا.">
      </div>
    @endif
    <div class="container">
        <div class="nk-box bg-dark-2 block-border block-shadow rounded p-20">
            <div class="nk-tabs w-100">
                <ul class="nav nav-tabs" role="tablist">
                    <li class="nav-item">
                        <a class="nav-link" href="#tab-paypal" role="tab" data-toggle="tab">{{ __("donate.ZPPurchase") }}</a>
                    </li>
                </ul>
                <div class="tab-content">
                    <div role="tabpanel" class="tab-pane fade show active" id="tab-paypal">
                        <div class="nk-gap-1"></div>
                        <div class="nk-info-box nk-info-box-sm bg-main-1 rounded shadow">
                            <div class="nk-info-box-icon">
                                <i class="ion-information-circled"></i>
                            </div>
                            All purchases currency is in USD (Dollar)
                        </div>
                        <div class="row">
                            @foreach ($products as $product)
                            <div class="col-lg-4 mt-10">
                                <div class="nk-pricing">
                                    <h3 class="nk-pricing-title">{{ $product->NAME }}</h3>
            
                                    <div class="nk-pricing-price">
                                        <span class="nk-pricing-currency">$</span>{{ number_format($product->PRICE, 2) }}
                                    </div>
            
                                    <ul class="nk-pricing-features">
                                        <li>{{ number_format($product->ZP_AMMOUNT) }} <span class="text-warning">ZP</span></li>
                                    </ul>
            
                                    <div class="nk-pricing-button">
                                        <a href="{{ route('payment.paypal', $product->PID) }}" target="_blank" class="nk-btn nk-btn-block nk-btn-lg nk-btn-bg-info text-white">
                                           {{ __("donate.ZPPurchasePayPal") }}
                                        </a>
                                    </div>
                                </div>
                            </div>
                            @endforeach
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="nk-gap-2"></div>
    </div>
@endsection