@extends('layout')

@section('title', __('store.affiliate_title'))

@section('content')
<div class="container py-5">
    <div class="row">
        <div class="col-md-10 mx-auto">
            <x-clientarea.page-header
                icon="fas fa-handshake"
                :title="__('store.affiliate_title')"
            >
                <a href="{{ route('store.auth.dashboard') }}" class="btn btn-outline-secondary">
                    <i class="fas fa-arrow-left me-2"></i>{{ __('store.clientarea_nav_dashboard') }}
                </a>
            </x-clientarea.page-header>

            @if($affiliate->status !== 'active')
                
                <div class="card border-0 shadow-sm">
                    <div class="card-body text-center py-5">
                        <i class="fas fa-clock fa-3x text-warning mb-3"></i>
                        <h4>{{ __('store.affiliate_status_' . $affiliate->status) }}</h4>
                        <p class="text-muted mb-0">{{ __('store.affiliate_status_description_' . $affiliate->status) }}</p>
                    </div>
                </div>
            @else
                
                <div class="row mb-4">
                    <div class="col-md-3 mb-3">
                        <div class="card border-0 shadow-sm h-100">
                            <div class="card-body text-center">
                                <h6 class="text-muted mb-2"><i class="fas fa-coins me-1"></i>{{ __('store.affiliate_total_earned') }}</h6>
                                <h3 class="mb-0 text-success">{{ number_format($affiliate->total_earned, 2) }}</h3>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-3 mb-3">
                        <div class="card border-0 shadow-sm h-100">
                            <div class="card-body text-center">
                                <h6 class="text-muted mb-2"><i class="fas fa-wallet me-1"></i>{{ __('store.affiliate_pending_balance') }}</h6>
                                <h3 class="mb-0 text-warning">{{ number_format($affiliate->pending_balance, 2) }}</h3>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-3 mb-3">
                        <div class="card border-0 shadow-sm h-100">
                            <div class="card-body text-center">
                                <h6 class="text-muted mb-2"><i class="fas fa-mouse-pointer me-1"></i>{{ __('store.affiliate_clicks_this_month') }}</h6>
                                <h3 class="mb-0 text-primary">{{ number_format($report['clicks'] ?? 0) }}</h3>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-3 mb-3">
                        <div class="card border-0 shadow-sm h-100">
                            <div class="card-body text-center">
                                <h6 class="text-muted mb-2"><i class="fas fa-exchange-alt me-1"></i>{{ __('store.affiliate_conversions_this_month') }}</h6>
                                <h3 class="mb-0 text-info">{{ number_format($report['conversions'] ?? 0) }}</h3>
                            </div>
                        </div>
                    </div>
                </div>

                
                <div class="row mb-4">
                    <div class="col-md-4 mb-3">
                        <div class="card border-0 shadow-sm h-100">
                            <div class="card-body text-center">
                                <h6 class="text-muted mb-2">{{ __('store.affiliate_commission_rate') }}</h6>
                                <h3 class="mb-0 text-primary">{{ number_format($commissionRate ?? 0, 2) }}%</h3>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4 mb-3">
                        <div class="card border-0 shadow-sm h-100">
                            <div class="card-body text-center">
                                <h6 class="text-muted mb-2">{{ __('store.affiliate_conversion_rate') }}</h6>
                                <h3 class="mb-0">{{ number_format($report['conversion_rate'] ?? 0, 2) }}%</h3>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4 mb-3">
                        <div class="card border-0 shadow-sm h-100">
                            <div class="card-body text-center">
                                <h6 class="text-muted mb-2">{{ __('store.affiliate_this_month') }}</h6>
                                <h3 class="mb-0 text-success">{{ number_format($report['earnings'] ?? 0, 2) }}</h3>
                                @if(($report['month_over_month_change'] ?? 0) != 0)
                                    <span class="badge bg-{{ ($report['month_over_month_change'] ?? 0) >= 0 ? 'success' : 'danger' }} mt-1">
                                        <i class="fas fa-arrow-{{ ($report['month_over_month_change'] ?? 0) >= 0 ? 'up' : 'down' }} me-1"></i>
                                        {{ abs($report['month_over_month_change'] ?? 0) }}%
                                    </span>
                                @endif
                            </div>
                        </div>
                    </div>
                </div>

                
                <div class="card border-0 shadow-sm mb-4">
                    <div class="card-header">
                        <h5 class="mb-0">
                            <i class="fas fa-link me-2"></i>{{ __('store.affiliate_your_referral_link') }}
                        </h5>
                    </div>
                    <div class="card-body">
                        <div class="input-group">
                            <input type="text" class="form-control" id="referralLink" value="{{ $affiliate->getReferralUrl() }}" readonly>
                            <button class="btn btn-primary js-copy-referral-link" type="button">
                                <i class="fas fa-copy me-1"></i>{{ __('store.affiliate_copy_link') }}
                            </button>
                        </div>
                    </div>
                </div>

                
                <div class="row mb-4">
                    <div class="col-md-3 mb-3">
                        <a href="{{ route('store.auth.affiliate.links') }}" class="card border-0 shadow-sm h-100 text-decoration-none">
                            <div class="card-body text-center">
                                <i class="fas fa-link fa-2x text-primary mb-2"></i>
                                <h6 class="mb-0">{{ __('store.affiliate_nav_links') }}</h6>
                            </div>
                        </a>
                    </div>
                    <div class="col-md-3 mb-3">
                        <a href="{{ route('store.auth.affiliate.stats') }}" class="card border-0 shadow-sm h-100 text-decoration-none">
                            <div class="card-body text-center">
                                <i class="fas fa-chart-bar fa-2x text-info mb-2"></i>
                                <h6 class="mb-0">{{ __('store.affiliate_nav_stats') }}</h6>
                            </div>
                        </a>
                    </div>
                    <div class="col-md-3 mb-3">
                        <a href="{{ route('store.auth.affiliate.commissions') }}" class="card border-0 shadow-sm h-100 text-decoration-none">
                            <div class="card-body text-center">
                                <i class="fas fa-coins fa-2x text-success mb-2"></i>
                                <h6 class="mb-0">{{ __('store.affiliate_nav_commissions') }}</h6>
                            </div>
                        </a>
                    </div>
                    <div class="col-md-3 mb-3">
                        <a href="{{ route('store.auth.affiliate.payouts') }}" class="card border-0 shadow-sm h-100 text-decoration-none">
                            <div class="card-body text-center">
                                <i class="fas fa-money-bill-wave fa-2x text-warning mb-2"></i>
                                <h6 class="mb-0">{{ __('store.affiliate_nav_payouts') }}</h6>
                            </div>
                        </a>
                    </div>
                </div>
            @endif
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
window.affiliateConfig = {
    translations: {
        linkCopied: '{{ __("store.affiliate_link_copied") }}'
    }
};
</script>
@vite('resources/js/store/affiliate/dashboard.js')
@endpush
