@extends('layout')

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

@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_nav_commissions')"
            >
                <a href="{{ route('store.auth.affiliate.dashboard') }}" class="btn btn-outline-secondary">
                    <i class="fas fa-arrow-left me-2"></i>{{ __('store.affiliate_nav_dashboard') }}
                </a>
            </x-clientarea.page-header>

            {{-- Summary --}}
            <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_total_earned') }}</h6>
                            <h3 class="mb-0 text-success">{{ number_format($affiliate->total_earned, 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_pending_balance') }}</h6>
                            <h3 class="mb-0 text-warning">{{ number_format($affiliate->pending_balance, 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_total_paid_out') }}</h6>
                            <h3 class="mb-0 text-info">{{ number_format($affiliate->total_paid, 2) }}</h3>
                        </div>
                    </div>
                </div>
            </div>

            {{-- Commission DataTable --}}
            <div class="card border-0 shadow-sm">
                <div class="card-header">
                    <h5 class="mb-0">
                        <i class="fas fa-list me-2"></i>{{ __('store.affiliate_commission_history') }}
                    </h5>
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table table-hover mb-0" id="commissionsTable" style="width:100%">
                            <thead>
                                <tr>
                                    <th>#</th>
                                    <th>{{ __('store.affiliate_commission_date') }}</th>
                                    <th>{{ __('store.affiliate_commission_buyer') }}</th>
                                    <th>{{ __('store.affiliate_commission_product') }}</th>
                                    <th>{{ __('store.affiliate_commission_type') }}</th>
                                    <th>{{ __('store.affiliate_commission_amount') }}</th>
                                    <th>{{ __('store.affiliate_commission_rate') }}</th>
                                    <th>{{ __('store.affiliate_commission_status') }}</th>
                                </tr>
                            </thead>
                            <tbody></tbody>
                        </table>
                    </div>
                </div>
            </div>

            <div class="mt-3">
                <small class="text-muted">
                    <i class="fas fa-shield-alt me-1"></i>
                    {{ __('store.affiliate_kvkk_notice') }}
                </small>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
window.affiliateCommissionsConfig = {
    routes: {
        records: '{{ route("store.auth.affiliate.commissions.records") }}'
    },
    translations: {
        noRecords: '{{ __("store.affiliate_no_commissions") }}',
        loading: '{{ __("store.common_loading") }}',
        search: '{{ __("store.affiliate_search") }}',
        showing: '{{ __("store.affiliate_showing") }}',
        of: '{{ __("store.affiliate_of") }}',
        entries: '{{ __("store.affiliate_entries") }}',
        previous: '{{ __("store.affiliate_previous") }}',
        next: '{{ __("store.affiliate_next") }}'
    }
};
</script>
@vite('resources/js/store/affiliate/commissions.js')
@endpush
