@php
if(Request::has('api'))
{
$layout = 'admin.includes.plainbase';
}
else
{
$layout = 'admin.includes.base';
}
@endphp

@extends($layout)


@push('styles')
<style>
.card-body
{
min-height:300px;
}
</style>
<style id="compiled-css" type="text/css">
    #map {
    position:relative
}
.map_title {
    position:absolute;    
	font-size:20px;
}
.icon_title
{
font-size:35px!important;
pointer-events: none;
   cursor: default;
}
/*.social li
{
    list-style: none;
    padding-bottom: 10px;
}*/
/* EOS */
@media print {
    .print-bg {
        background-color: #fff3cd !important; /* light yellow */
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }
}
</style>
@if(Request::has('hide_ui'))
<style>
.page-breadcrumb, .btn-secondary, .btn-warning, .btn-success
{
display:none;
}
.page-wrapper
{
padding-top:0px!important;
}
</style>
@endif  
@endpush
@section('content')
<div class="page-wrapper">
  <!-- ============================================================== -->
  <!-- Bread crumb and right sidebar toggle -->
  <!-- ============================================================== -->
  <div class="page-breadcrumb">
    <div class="row">
      <div class="col-9 align-self-center">
        <h4 class="page-title">Donations :: {{ $donor_email }} :: @if($receipt->is_sent=='1') <span class="label label-success">Receipt Sent</span> @else <span class="label label-danger">Not Sent</span> @endif</h4>
        <div class="d-flex align-items-center"> </div>
      </div>
      <div class="col-3 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">Donations</li>
              </ol>
            </nav>
          </div>
        </div>
      </div>
    </div>
  </div>
  @if(!Request::has('api'))
  @include('common.notify')
  @endif
  <div class="container-fluid">
  
  
    <!-- ============================================================== -->
    <!-- Start Page Content -->
    <!-- ============================================================== -->
	@if($page=='transactions')
	
	@php
  if(Request::has('api'))
  {
  $email_url = route('api.receipt.email',['id'=>$receipt->id,'page'=>'transactions']);
  }
  else
  {
   $email_url = route('admin.receipt.email',['id'=>$receipt->id,'page'=>'transactions']);
  }
  @endphp
	<div class="row">
	<!--<div class="col-md-1"></div>-->
      <div class="col-md-12">
        <div class="card card-body printableArea">
		
		@if(!empty($event_id) && $event_id=='4')
		@include('admin.receipt.partials.thank-you-punjab')
		@else
		@include('admin.receipt.partials.thank-you')  
		  @endif
		  
		  
		  
          <div class="row">			
			<div class="col-md-12">
<!-- Image Map Generated by http://www.image-map.net/ -->
<div id="map">
<img src="{{ url('admin_assets/images/receipt.png') }}" usemap="#planetmap">
</div>

<map name="planetmap">
    <area target="" alt="Receipt No" title="Receipt No" href="" coords="690,22,769,49" shape="rect" data-name="{{ $receipt->receipt_no }}">
    <area target="" alt="Name" title="Name" href="" coords="300,120,760,139" shape="rect" data-name="{{ $receipt->cardholder_name }}">
    <area target="" alt="Address" title="Address" href="" coords="183,163,780,188" shape="rect" data-name="{{ $receipt->address.', '.$receipt->postal_code }}">
    <area target="" alt="Amount in Words" title="Amount in Words" href="" coords="176,209,589,234" shape="rect" data-name="{{ numberToWord($receipt->amount).' only' }}">
    <area target="" alt="Amount" title="Amount" href="" coords="679,214,779,237" shape="rect" data-name="{{ $receipt->amount }}">
    <area target="" alt="Date" title="Date" href="" coords="657,68,703,88" shape="rect" data-name="{{ date('d/m',strtotime($receipt->created_at)) }}">
    <area target="" alt="Year" title="Year" href="" coords="759,68,777,88" shape="rect" data-name="{{ date('y',strtotime($receipt->created_at)) }}">
	
	
	
    <area target="" alt="Cash" title="Cash" href="" coords="372,267,378,260" shape="rect" data-name="" class="icon_title">
	
    <area target="" alt="Cheque" title="Cheque" href="" coords="446,267,471,284" shape="rect" data-name="" class="icon_title">
	
    <area target="" alt="Credit/Debit Card" title="Credit/Debit Card" href="" coords="535,267,559,283" shape="rect" data-name="<img src='{{ url('admin_assets/images/check.png') }}' width='25'>" class="icon_title">
	
    <area target="" alt="E-Transfer" title="E-Transfer" href="" coords="686,267,708,284" shape="rect" data-name="" class="icon_title">
	
	
	
	@if(!empty($signature))
	<area target="" alt="Signature" title="Signature" href="" coords="590,295,595,312" shape="rect" data-name="<img src='{{ url('storage/'.$signature) }}' width='200'>">
	@else
	<area target="" alt="Signature" title="Signature" href="" coords="590,315,595,312" shape="rect" data-name="{{ $name }}">
	@endif
    
	
	<area target="" alt="Signature Name" title="Signature Name" href="" coords="590,365,595,312" shape="rect" data-name=" {{ Auth::guard('admin')->user()->name ?? '' }}">
	
</map>








			</div>
			
			
			
			
			
            
          </div>
        </div>
		<div class="col-md-12">
              <div class="pull-right m-t-30 text-right"> 
			  
			  
			  </div>
              <div class="clearfix"></div>
              <hr>
              <div class="text-right">
			  
			  
			  <a href="{{ route('admin.receipt.emailsms',['id'=>$receipt->id,'page'=>'transactions']) }}" class="btn btn-secondary btn-outline" type="button"> <span><i class="fa fa-comments"></i> Send Email & SMS</span> </a>
			  
			  
			  <a href="{{ route('admin.receipt.sms',['id'=>$receipt->id,'page'=>'transactions']) }}" class="btn btn-warning btn-outline" type="button"> <span><i class="fa fa-comments"></i> SMS</span> </a>
			  
			  <a href="{{ $email_url }}" class="btn btn-success btn-outline" type="button"> <span><i class="fa fa-envelope"></i> Email</span> </a>
			  
			  
			  
			  
                <button id="print" class="btn btn-default btn-outline" type="button"> <span><i class="fa fa-print"></i> Print</span> </button>
              </div>
            </div>
      </div>
    </div>
	@else
	@php
  
  if(Request::has('api'))
  {
  $email_url = route('api.receipt.email',['id'=>$receipt->id]);
  }
  else
  {
   $email_url = route('admin.receipt.email',['id'=>$receipt->id]);
  }
  @endphp
    <div class="row">
	<div class="col-md-1"></div>
      <div class="col-md-10">
        <div class="card card-body printableArea">
          <!--<center><img src="{{ asset('admin_assets/images/logo_new.png') }}" width="150"/></center>-->
		  
          @if(!empty($event_id) && $event_id=='4')
		@include('admin.receipt.partials.thank-you-punjab')
		@else
		@include('admin.receipt.partials.thank-you')  
		  @endif
		    
          <div class="row">
            
            
            
			
			
			<div class="col-md-12">
			
			




<!-- Image Map Generated by http://www.image-map.net/ -->
<div id="map">
<img src="{{ url('admin_assets/images/receipt.png') }}" usemap="#planetmap">
</div>

<map name="planetmap">
    <area target="" alt="Receipt No" title="Receipt No" href="" coords="690,22,769,49" shape="rect" data-name="{{ $receipt->receipt_no }}">
    <area target="" alt="Name" title="Name" href="" coords="300,120,760,139" shape="rect" data-name="{{ $receipt->donorInfo->first_name.' '.$receipt->donorInfo->last_name }}">
    <area target="" alt="Address" title="Address" href="" coords="183,163,780,188" shape="rect" data-name="{{ $receipt->donorInfo->address.', '.$receipt->donorInfo->postal_code }}">
    <area target="" alt="Amount in Words" title="Amount in Words" href="" coords="176,209,589,234" shape="rect" data-name="{{ numberToWord($receipt->amount).' only' }}">
    <area target="" alt="Amount" title="Amount" href="" coords="679,214,779,237" shape="rect" data-name="{{ $receipt->amount }}">
    <area target="" alt="Date" title="Date" href="" coords="657,68,703,88" shape="rect" data-name="{{ date('d/m',strtotime($receipt->created_at)) }}">
    <area target="" alt="Year" title="Year" href="" coords="759,68,777,88" shape="rect" data-name="{{ date('y',strtotime($receipt->created_at)) }}">
	
	
	
    <area target="" alt="Cash" title="Cash" href="" coords="372,267,378,260" shape="rect" data-name="@if($receipt->payment_mode=='Cash') <img src='{{ url('admin_assets/images/check.png') }}' width='25'> @else &nbsp; @endif" class="icon_title">
	
    <area target="" alt="Cheque" title="Cheque" href="" coords="446,267,471,284" shape="rect" data-name="@if($receipt->payment_mode=='Cheque') <img src='{{ url('admin_assets/images/check.png') }}' width='25'> @else &nbsp; @endif" class="icon_title">
	
    <area target="" alt="Credit/Debit Card" title="Credit/Debit Card" href="" coords="535,267,559,283" shape="rect" data-name="@if($receipt->payment_mode=='Online') <img src='{{ url('admin_assets/images/check.png') }}' width='25'> @else &nbsp; @endif" class="icon_title">
	
    <area target="" alt="E-Transfer" title="E-Transfer" href="" coords="686,267,708,284" shape="rect" data-name="@if($receipt->payment_mode=='E-Transfer') <img src='{{ url('admin_assets/images/check.png') }}' width='25'> @else &nbsp; @endif" class="icon_title">
	
	
	
	@if(!empty(Auth::guard('admin')->user()->signature))
	<area target="" alt="Signature" title="Signature" href="" coords="590,295,595,312" shape="rect" data-name="<img src='{{ url('storage/'.Auth::guard('admin')->user()->signature) }}' width='200'>">
	@else
	<area target="" alt="Signature" title="Signature" href="" coords="590,315,595,312" shape="rect" data-name="{{ Auth::guard('admin')->user()->name }}">
	@endif
    
	
	<area target="" alt="Signature Name" title="Signature Name" href="" coords="590,365,595,312" shape="rect" data-name=" {{ Auth::guard('admin')->user()->name ?? '' }}">
	
</map>

@if($receipt->payment_mode=='Non Cash')
<div style="background:#fff3cd;padding:10px;" class="mt-3 print-bg">
<h5>Non Cash Receipt:</h5>
<p class="mb-0">{{ $receipt->remarks }}</p>
</div>
@endif







			</div>
			
			
			
			
			
            
          </div>
        </div>
		<div class="col-md-12">
              <div class="pull-right m-t-30 text-right"> 
			  
			  
			  </div>
              <div class="clearfix"></div>
              <hr>
              <div class="text-right">
			  
			  
			  <a href="{{ route('admin.receipt.emailsms',['id'=>$receipt->id]) }}" class="btn btn-secondary btn-outline" type="button"> <span><i class="fa fa-comments"></i> Send Email & SMS</span> </a>
			  
			  
			  <a href="{{ route('admin.receipt.sms',['id'=>$receipt->id]) }}" class="btn btn-warning btn-outline" type="button"> <span><i class="fa fa-comments"></i> SMS</span> </a>
			  
			  <a href="{{ $email_url }}" class="btn btn-success btn-outline" type="button"> <span><i class="fa fa-envelope"></i> Email</span> </a>
			  
			  
			  
			  
                <button id="print" class="btn btn-default btn-outline" type="button"> <span><i class="fa fa-print"></i> Print</span> </button>
				@if(Auth::guard('admin')->user()->utype=='Staff')
				<a class="btn btn-primary btn-outline" href="{{ url('admin/home') }}"> <span><i class="icon-Add"></i> New Receipt</span> </a>
				@else
				<a class="btn btn-primary btn-outline" href="{{ url('admin/receipt/create') }}"> <span><i class="icon-Add"></i> New Receipt</span> </a>
				@endif
              </div>
            </div>
      </div>
    </div>
	@endif
    <!-- ============================================================== -->
    <!-- End PAge Content -->
    <!-- ============================================================== -->
  </div>
</div>
@endsection

@push('scripts')
<script src="{{ asset('dist/js/pages/samplepages/jquery.PrintArea.js') }}"></script>
    <script>
    $(function() {
	 
        $("#print").click(function() {
		$('.emailinfo a').css({'text-decoration': 'none'});
		$('.emailinfo li').css({'font-size': '18px', 'list-style': 'none', 'text-decoration': 'none'});
		
		$('.print-bg').css({
            'background-color': '#fff3cd',
            '-webkit-print-color-adjust': 'exact',
            'print-color-adjust': 'exact'
        });

		$('.emailinfo p').css('font-size', '18px');
            var mode = 'iframe'; //popup
            var close = mode == "popup";
            var options = {
                mode: mode,
                popClose: close
            };
            $("div.printableArea").printArea(options);
        });
    });
    </script>
	
	
	 <script type="text/javascript">//<![CDATA[


$(function() {
    
    $('area').each(function(){
        var txt=$(this).data('name');
        var coor=$(this).attr('coords');
        var coorA=coor.split(',');
        var left=coorA[0];
        var top=coorA[1];
        
        var $span=$('<span class="map_title">'+txt+'</span>');      
		  
        $span.css({top: top+'px', left: left+'px', position:'absolute'});
        $span.appendTo('#map');
    })
    
})
$('.icon_title').click(function(){
    return false;
});

  //]]></script>
@endpush