@extends('admin.includes.base')
@push('styles')
<style>
.btn-group-custom .btn
{
    padding: 20px 10px;
    box-shadow: 0px 12px 16px 0px #00000017;
    font-size: 14px;
}
.amount-in .form-control
{
/*line-height: 3.5;*/
    font-size: 22px;
}
.amount-in .input-group-text
{
font-size: 22px;
}

.table-donor td, .table-donor th
{
border-top:0px solid #eaeaea;
}
</style>
@endpush
@section('content')
<div class="page-wrapper">
  <!-- ============================================================== -->
  <!-- Bread crumb and right sidebar toggle -->
  <!-- ============================================================== -->
  <div class="page-breadcrumb">
    <div class="row">
      <div class="col-5 align-self-center">
        <h4 class="page-title">Donate Now</h4>
        <div class="d-flex align-items-center"> </div>
      </div>
      <div class="col-7 align-self-center">
        <div class="d-flex no-block justify-content-end align-items-center">
          <div class="d-flex no-block justify-content-end align-items-center">
            <nav aria-label="breadcrumb">
              <ol class="breadcrumb">
                <li class="breadcrumb-item"> <a href="{{ url('admin/home') }}">Home</a> </li>
                <li class="breadcrumb-item active" aria-current="page">Donate Now</li>
              </ol>
            </nav>
          </div>
        </div>
      </div>
    </div>
  </div>
  @include('common.notify')
  <div class="container-fluid">
    <div class="row">
      <div class="col-8">
        <div class="card">
          <div class="card-body padd-10">
            <h4 class="card-title">Donate Now</h4>
          </div>
          <hr class="m-t-0">
          <form class="form-horizontal r-separator" action="{{route('admin.donate.store')}}" method="POST" enctype="multipart/form-data" role="form" id="donorForm">
            {{csrf_field()}}
            <div class="card-body bg-light">
			
			<div class="row">
	  <div class="col-sm-12 col-md-6">
          <div class="form-group" id="the-basics">
            <label for="inputEmail3" class="control-label col-form-label">Search Donor<span class="asterrisk">*</span></label>
            <div class="clearfix"></div>
			<div class="input-group mb-3">
                                        <input type="text" class="form-control donor-text" placeholder="Enter Keyword" aria-label="" aria-describedby="basic-addon1" id="searchDonorBox" autocomplete="off">
                                        <div class="input-group-append">
                                            <button class="btn btn-info" type="button" id="searchDonor"><i class="ti-search"></i></button>
                                        </div>
                                    </div>
            
			
			
			 </div>
        </div>
	  <div class="col-sm-12 col-md-6">
          <div class="form-group">
		  <label for="inputEmail3" class="control-label col-form-label">&nbsp;</label>
            <a href="javascript:;" class="addRecord btn waves-effect waves-light btn-block btn-success">[Add Donation User]</a> 
			</div>
			<input type="hidden" id="donor_id_input" name="donor_id" value="@if(Request::has('donor_id')) {{ Request::get('donor_id') }} @endif"/>
			@if ($errors->has('donor_id')) <span class="help-block"> <strong>{{ $errors->first('donor_id') }}</strong> </span> @endif 
			
        </div>
        
		<div id="donorsInfo" class="col-sm-12 mb-2">
		</div>
      </div>
	  
	  
	  @if(Request::has('donor_id'))
	  <div class="">
	  @php $donorInfo = App\Models\Donor::where('id',Request::get('donor_id'))->first(); @endphp
		<div class="card">
		  <div class="card-body">
		  
		  
		  <div class="form-group row">
                                                    <label class="control-label col-md-4"><strong>Donation User Name</strong></label>
                                                    <div class="col-md-8">
                                                        <p class="form-control-static">{{ $donorInfo->first_name.' '.$donorInfo->last_name }}</p>
                                                    </div>
                                                </div>
		  <div class="form-group row">
                                                    <label class="control-label col-md-4"><strong>Donation User Address</strong></label>
                                                    <div class="col-md-8">
                                                        <p class="form-control-static">{{ $donorInfo->address }}</p>
                                                    </div>
                                                </div>
												<div class="form-group row">
                                                    <label class="control-label col-md-4"><strong>Donation User Contact</strong></label>
                                                    <div class="col-md-8">
                                                        <p class="form-control-static">{{ '+'.$donorInfo->country_code.'-'.$donorInfo->contact }}</p>
                                                    </div>
                                                </div>
		  
		  
		  </div>
		</div>
	  </div>
	  @endif
	  
              <div class="row button-group btn-group-custom">
                <div class="col-12 mb-4">
                  <button class="btn btn-primary waves-effect waves-light" type="button">C$10.00</button>
                  <button class="btn btn-primary waves-effect waves-light" type="button">C$20.00</button>
                  <button class="btn btn-primary waves-effect waves-light" type="button">C$50.00</button>
                  <button class="btn btn-primary waves-effect waves-light" type="button">C$100.00</button>
                  <button class="btn btn-primary waves-effect waves-light" type="button">C$250.00</button>
                  <button class="btn btn-primary waves-effect waves-light" type="button">Custom Amount</button>
                </div>
              </div>
              <div class="row">
                <div class="col-12 amount-in">
                  <div class="input-group mb-3">
                    <div class="input-group-prepend"><span class="input-group-text"><i class="fas fa-donate"></i></span></div>
                    <input type="text" class="form-control amount-text" aria-label="Amount (to the nearest dollar)" name="amount">
                    <div class="input-group-append"> <span class="input-group-text">C<i class="fas fa-dollar-sign"></i></span> </div>
                  </div>
                </div>
              </div>
              <!--<div class="row">
                <div class="col-8">
                  <div class="row">
                    <div class="col-6">
                      <div class="form-group">
                        <label for="inputEmail3" class="control-label col-form-label">First Name<span class="asterrisk">*</span></label>
                        <input type="text" class="form-control" id="inputEmail3" name="first_name" value="{{ old('first_name') }}">
                        @if ($errors->has('first_name')) <span class="help-block"> <strong>{{ $errors->first('first_name') }}</strong> </span> @endif </div>
                    </div>
                    <div class="col-6">
                      <div class="form-group">
                        <label for="inputEmail3" class="control-label col-form-label">Last Name<span class="asterrisk">*</span></label>
                        <input type="text" class="form-control" id="inputEmail3" name="last_name" value="{{ old('last_name') }}">
                        @if ($errors->has('last_name')) <span class="help-block"> <strong>{{ $errors->first('last_name') }}</strong> </span> @endif </div>
                    </div>
                  </div>
                </div>
                <div class="col-4">
                  <div class="form-group">
                    <label for="inputEmail3" class="control-label col-form-label">Email Address<span class="asterrisk">*</span></label>
                    <input type="email" class="form-control" id="inputEmail3" name="email" value="{{ old('email') }}">
                    @if ($errors->has('email')) <span class="help-block"> <strong>{{ $errors->first('email') }}</strong> </span> @endif </div>
                </div>
              </div>-->
            </div>
            <div class="card-body">
              <div class="form-group m-b-0 text-right">
                <button type="submit" class="btn btn-info waves-effect waves-light">Donate Now</button>
				<!--<button id="pay-button">Pay Now</button>-->
              </div>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</div>
@endsection

@push('modals')
@include('admin.donor.partials.addDonorModal',['module'=>'receipt'])
@endpush

@push('scripts')
<script>
$(document).ready(function()
{
$(document).on('click','.btn-group-custom .btn',function()
{
var text = $(this).text();
if(text=='Custom Amount')
{
$('.amount-text').val('').focus();
}
else
{
var text1 = text.replace(/C\$/g, '');
$('.amount-text').val(text1);
}
});
});
</script>
<!--Stripe JS-->
<script src="https://js.stripe.com/v3/"></script>
<script>
        // Include Stripe.js
        const stripe = Stripe('your-publishable-key-here');

        // Create a checkout session
        async function createCheckoutSession(amount) {
            const response = await fetch('/create-checkout-session', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({ amount })
            });
            const session = await response.json();
            return session.id;
        }

        // Handle the payment process
        async function handlePayment() {
            const amount = document.getElementById('amount').value;
            if (!amount || amount <= 0) {
                alert('Please enter a valid amount');
                return;
            }
            const sessionId = await createCheckoutSession(amount);
            const result = await stripe.redirectToCheckout({ sessionId });
            if (result.error) {
                console.error(result.error.message);
            }
        }

        // Add event listener to payment button
        document.getElementById('pay-button').addEventListener('click', handlePayment);
    </script>

<!--JS Part-->
<script>
function loadDonorInfo(donorText)
{
	
	$("#donorsInfo").html('<center><img src="https://donation.gnfb.ca/public/admin_assets/images/loader.gif" width="60" height="60"></center>');
	
	
	var data = {'_token': "<br />
<b>Fatal error</b>:  Uncaught Error: Call to undefined function csrf_token() in /home/donationgnfb/public_html/resources/views/admin/donate/create.blade.php:253
Stack trace:
#0 {main}
  thrown in <b>/home/donationgnfb/public_html/resources/views/admin/donate/create.blade.php</b> on line <b>253</b><br />