@extends('mix::layouts.master')
@section('title', __('Affiliate'))
@section('namespace', 'user-mix-settings-affiliate')
@section('content')
@section('back-button', route('user-mix-settings'))
<div class="mix-padding-10">
	<div class="relative">

		@if (!__o_feature('feature.affiliate'))
		<div class="not-plan items-start">
			<div class="no-record z-50">
				<div class="rounded-3xl block p-5">
				<div class="text-center flex justify-center flex-col items-center">
		
					{!! ori('Delivery', 'package-box-door', 'w-16 h-16') !!}
					<div class="text-xl font-bold mt-5">{{ __('Upgrade your plan') }}</div>
					<div class="w-3/4 mt-3">
					<div class="text-sm text-gray-400">{{ __('Your plan does not support this feature. Upgrade to access.') }}</div>
			
					<a href="{{ route('user-mix-upgrade-index') }}" class="mt-5 koon-btn-dark">{{ __('Upgrade') }}</a>
					</div>
				</div>
				</div>
			</div>
			<div class="opacity-reduce opacity-90 z-40"></div>
		</div>
		@endif


		<div class="dashboard-header-banner relative mt-0 mb-5">
			<div class="card-container">
				
				<div class="text-lg font-bold">{{ __('Affiliate') }}</div>
				<div class="side-cta">
					<img src="{{ gs('assets/image/emoji/Yellow-1/MoneyMouthFace.png') }}" alt="">
				</div>
			</div>
		</div>
		
		<div class="border-2 border-solid border-gray-100 p-5 rounded-xl bg-gray-100">
			<div class="text-base font-black capitalize c-dark mb-1">
				{{ __("Referral Link") }}
			</div>

			<div class="form-input copy active">
				<input type="text" value="{{ route('auth-refer', $user->aff_key) }}" class="bg-white" readonly="">
				<div class="copy-btn" data-copy="{{ route('auth-refer', $user->aff_key) }}" data-after-copy="{{ __('Copied') }}">
					<i class="la la-copy"></i>
				</div>
			</div>
		</div>

		<div class="mt-5 grid grid-cols-2 md:grid-cols-3 gap-3 md:gap-4">
			<div class="insight-card shadow-none bg-gray-100 relative">
				<div class="text-sticker m-0 mr-2 xs shadow-none absolute right-0 top-2" data-hover="{{ __('Users signed up using your referral link.') }}">
					{!! orion('priority-warning-1', 'w-3 h-3') !!}
				</div>

				<div class="icon px-0 bg-transparent w-5 mt-0">
					{!! orion('config-1', 'h-5 w-5') !!}
				</div>
				<h2>{{ nr($referrals) }}</h2>
				<h5>{{ __('Referrals') }}</h5>
			</div>
			<div class="insight-card shadow-none bg-gray-100 relative">
				<div class="text-sticker m-0 mr-2 xs shadow-none absolute right-0 top-2" data-hover="{{ __('Converted users who have paid for a plan.') }}">
					{!! orion('priority-warning-1', 'w-3 h-3') !!}
				</div>

				<div class="icon px-0 bg-transparent w-5 mt-0">
					{!! orion('people-1', 'h-5 w-5') !!}
				</div>
				<h2>{{ nr($converted_referrals) }}</h2>
				<h5>{{ __('Converted Referrals') }}</h5>
			</div>
			<div class="insight-card shadow-none bg-gray-100 relative">
				<div class="text-sticker m-0 mr-2 xs shadow-none absolute right-0 top-2" data-hover="{{ __('A 30 days confirmation before funds can be withdrawn.') }}">
					{!! orion('priority-warning-1', 'w-3 h-3') !!}
				</div>

				<div class="icon px-0 bg-transparent w-5 mt-0">
					{!! orion('bank-check-1', 'h-5 w-5') !!}
				</div>
				<h2>{!! str_replace('Free', '0', price_with_cur(\Currency::symbol(settings('payment.currency')), $pending_affiliate_amount)) !!}</h2>
				<h5>{{ __('Pending Withdrawal') }}</h5>
			</div>
			<div class="insight-card shadow-none bg-gray-100 relative">
				<div class="text-sticker m-0 mr-2 xs shadow-none absolute right-0 top-2" data-hover="{{ __('Approved funds for withdrawal.') }}">
					{!! orion('priority-warning-1', 'w-3 h-3') !!}
				</div>

				<div class="icon px-0 bg-transparent w-5 mt-0">
					{!! orion('pay-1', 'h-5 w-5') !!}
				</div>
				<h2>{!! str_replace('Free', '0', price_with_cur(\Currency::symbol(settings('payment.currency')), $approved_affiliate_amount)) !!}</h2>
				<h5>{{ __('Approved Withdrawal') }}</h5>
			</div>
		</div>
		<a class="sandy-expandable-btn mt-5 px-5 cursor-pointer withdraw-balance-open"><span>{{ __('Withdraw Earnings') }}</span></a>

		
		<div class="flex-table mt-4 {{ $withdrawals->isEmpty() ? 'hidden' : '' }}">

			<!--Table header-->
			<div class="flex-table-header">
				<span class="is-grow">{{ __('Amount') }}</span>
				<span>{{ __('Status') }}</span>
				<span>{{ __('Date') }}</span>
			</div>
			
			@foreach ($withdrawals as $item)
			<div class="flex-table-item shadow-none border border-solid border-gray-300 rounded-xl">
				<div class="flex-table-cell is-media is-grow" data-th="">
					<div>
						<span class="item-name">{!! str_replace('Free', '0', price_with_cur(\Currency::symbol(settings('payment.currency')), $item->amount)) !!}</span>
						<span class="item-meta">
							<span class="text-xs">{{ $item->note }}</span>
						</span>
					</div>
				</div>
				<div class="flex-table-cell" data-th="{{ __('Status') }}">
					@if ($item->is_paid)
					<span class="bg-green-300 py-1 px-4 gap-3 text-xs rounded-xl flex items-center justify-center">{!! orion('checkmark-1', 'w-3 h-3') !!} {{ __('Approved') }}</span>
						
					 @else
					 <span class="bg-yellow-300 py-1 px-4 text-xs gap-3 rounded-xl flex items-center justify-center">{!! orion('hidden-1', 'w-3 h-3') !!} {{ __('Pending') }}</span>
					@endif
				</div>
				<div class="flex-table-cell" data-th="{{ __('Date') }}">
					<span class="dark-inverted is-weight-600">{{ \Carbon\Carbon::parse($item->created_at)->toFormattedDateString() }}</span>
				</div>
			</div>
			@endforeach
		</div>
		
	</div>
</div>


<div data-popup=".withdraw-balance" class="half-short mobile-modal">
    <div class="modal-handle"></div>



	@if ($pending_withdrawal)
    <div class="rounded-none dashboard-header-banner relative mt-0 bg-white">
        <div class="card-container p-0">
            <img src="{{ gs('assets/image/emoji/Yellow-1/Sad.png') }}" alt="" class="w-32 h-32 mb-5 -ml-5">
            
            <div class="text-lg font-bold -mt-5 mb-2">{{ __('Please, wait...') }}</div>
            <p class="text-xs">{{ __('Please wait while we review your previous pending withdrawal before we can process another.') }}</p>
        </div>
    </div>
		@else
	
		<div class="text-xl font-bold text-center mb-2">{{ __('Withdrawal') }}</div>
		<div class="px-0 mb-10 text-xs text-center">{!! __('Once you reach at least :price, you can create a withdrawal request.', ['price' => str_replace('Free', '0', price_with_cur(\Currency::symbol(settings('payment.currency')), settings("affiliate.min_withdrawal")))]) !!}</div>

		<form action="{{ route('user-mix-settings-affiliate-post') }}" class="mt-5" method="post">
			@csrf
			
			<div class="form-input">
				
				<div class="form-input is-link always-active active">
					<label>{{ __('Amount') }}</label>
					<div class="is-link-inner">
						<div class="side-info pl-2 relative">
							{!! \Currency::symbol(settings('payment.currency')) !!}
						</div>
						<input type="number" disabled name="amount" readonly value="{{ $approved_affiliate_amount }}" class="is-alt-input bg--white">
					</div>
				</div>
	
				<div class="form-input mt-5">
					<label>{{ __('Note') }}</label>
					<textarea name="note"></textarea>
				</div>

				<p class="font-bold text-xs mt-2">{{ settings("affiliate.withdrawal_notes") }}</p>
	
				<button class="sandy-expandable-btn px-5 mt-3"><span>{{ __('Submit') }}</span></button>
	
			</div>
		</form>
	@endif
	

    
    <button class="sandy-expandable-btn bg-transparent w-full withdraw-balance-close text-black mt-5"><span>{{ __('Close') }}</span></button>
</div>
@endsection