@extends('admin.layouts.app')

@section('content')
<div class="container-fluid px-4">
    <x-admin.page-header
        :title="__('admin/affiliates.show_title') . ' #' . $affiliate->id"
        :subtitle="($affiliate->client->first_name ?? '') . ' ' . ($affiliate->client->last_name ?? '') . ' - ' . $affiliate->referral_code"
        icon="fas fa-handshake"
        :buttons="[
            ['label' => __('admin/affiliates.show_back'), 'route' => route('admin.affiliates.index'), 'icon' => 'fas fa-arrow-left', 'color' => 'outline-secondary'],
        ]"
    />

    <!-- Summary Cards -->
    <div class="row g-3 mb-3">
        <div class="col-md-2">
            <x-admin.stat-card :title="__('admin/affiliates.summary_total_earned')" :value="$stats['total_earned']" icon="fas fa-coins" color="success" />
        </div>
        <div class="col-md-2">
            <x-admin.stat-card :title="__('admin/affiliates.summary_total_paid')" :value="$stats['total_paid']" icon="fas fa-check-circle" color="info" />
        </div>
        <div class="col-md-2">
            <x-admin.stat-card :title="__('admin/affiliates.summary_pending_balance')" :value="$stats['pending_balance']" icon="fas fa-wallet" color="primary" />
        </div>
        <div class="col-md-2">
            <x-admin.stat-card :title="__('admin/affiliates.summary_pending_commissions')" :value="$stats['pending_commissions']" icon="fas fa-hourglass-half" color="warning" />
        </div>
        <div class="col-md-2">
            <x-admin.stat-card :title="__('admin/affiliates.summary_conversions')" :value="$stats['total_conversions']" icon="fas fa-exchange-alt" color="secondary" />
        </div>
        <div class="col-md-2">
            <x-admin.stat-card :title="__('admin/affiliates.summary_visitors')" :value="$stats['total_visitors']" icon="fas fa-users" color="secondary" />
        </div>
    </div>

    <!-- Client Info & Status Card -->
    <div class="row g-3 mb-3">
        <div class="col-md-6">
            <x-admin.card :title="__('admin/affiliates.show_client_info')" icon="fas fa-user">
                <table class="table table-sm mb-0">
                    <tr>
                        <td class="text-muted" style="width: 40%">{{ __('admin/affiliates.show_client_name') }}</td>
                        <td>{{ $affiliate->client->first_name ?? '' }} {{ $affiliate->client->last_name ?? '' }}</td>
                    </tr>
                    <tr>
                        <td class="text-muted">{{ __('admin/affiliates.show_client_email') }}</td>
                        <td>{{ $affiliate->client->email ?? '-' }}</td>
                    </tr>
                    <tr>
                        <td class="text-muted">{{ __('admin/affiliates.show_client_phone') }}</td>
                        <td>{{ $affiliate->client->phone ?? '-' }}</td>
                    </tr>
                    <tr>
                        <td class="text-muted">{{ __('admin/affiliates.show_referral_code') }}</td>
                        <td><code>{{ $affiliate->referral_code }}</code></td>
                    </tr>
                    <tr>
                        <td class="text-muted">{{ __('admin/affiliates.show_referral_url') }}</td>
                        <td><code class="small">{{ $affiliate->getReferralUrl() }}</code></td>
                    </tr>
                </table>
            </x-admin.card>
        </div>
        <div class="col-md-6">
            <x-admin.card :title="__('admin/affiliates.show_status')" icon="fas fa-info-circle">
                <table class="table table-sm mb-0">
                    <tr>
                        <td class="text-muted" style="width: 40%">{{ __('admin/affiliates.show_status') }}</td>
                        <td>
                            @switch($affiliate->status)
                                @case('pending')
                                    <span class="badge bg-warning">{{ __('admin/affiliates.status_pending') }}</span>
                                    @break
                                @case('active')
                                    <span class="badge bg-success">{{ __('admin/affiliates.status_active') }}</span>
                                    @break
                                @case('rejected')
                                    <span class="badge bg-danger">{{ __('admin/affiliates.status_rejected') }}</span>
                                    @break
                                @case('suspended')
                                    <span class="badge bg-secondary">{{ __('admin/affiliates.status_suspended') }}</span>
                                    @break
                            @endswitch
                        </td>
                    </tr>
                    <tr>
                        <td class="text-muted">{{ __('admin/affiliates.show_joined_at') }}</td>
                        <td>{{ $affiliate->created_at->format('d.m.Y H:i') }}</td>
                    </tr>
                    @if($affiliate->approved_at)
                    <tr>
                        <td class="text-muted">{{ __('admin/affiliates.show_approved_at') }}</td>
                        <td>{{ $affiliate->approved_at->format('d.m.Y H:i') }}</td>
                    </tr>
                    @endif
                    <tr>
                        <td class="text-muted">{{ __('admin/affiliates.show_commission_rate') }}</td>
                        <td>{{ $affiliate->commission_rate ?? '-' }}%</td>
                    </tr>
                    @if($affiliate->rejected_reason)
                    <tr>
                        <td class="text-muted">{{ __('admin/affiliates.show_rejected_reason') }}</td>
                        <td class="text-danger">{{ $affiliate->rejected_reason }}</td>
                    </tr>
                    @endif
                </table>

                <!-- Action Buttons -->
                <div class="mt-3 d-flex gap-2">
                    @if($affiliate->status === 'pending')
                        <button class="btn btn-success btn-sm action-btn" data-action="approve" data-id="{{ $affiliate->id }}">
                            <i class="fas fa-check me-1"></i>{{ __('admin/affiliates.button_approve') }}
                        </button>
                        <button class="btn btn-danger btn-sm" data-bs-toggle="modal" data-bs-target="#rejectModal">
                            <i class="fas fa-times me-1"></i>{{ __('admin/affiliates.button_reject') }}
                        </button>
                    @elseif($affiliate->status === 'active')
                        <button class="btn btn-warning btn-sm action-btn" data-action="suspend" data-id="{{ $affiliate->id }}">
                            <i class="fas fa-ban me-1"></i>{{ __('admin/affiliates.button_suspend') }}
                        </button>
                    @elseif($affiliate->status === 'suspended' || $affiliate->status === 'rejected')
                        <button class="btn btn-success btn-sm action-btn" data-action="activate" data-id="{{ $affiliate->id }}">
                            <i class="fas fa-play me-1"></i>{{ __('admin/affiliates.button_activate') }}
                        </button>
                    @endif
                </div>

                
                <div class="mt-4 pt-3 border-top">
                    <label class="form-label small text-muted mb-1">{{ __('admin/affiliates.payout_currency_label') }}</label>
                    @can('manage affiliates')
                        <div class="input-group input-group-sm" style="max-width: 320px;">
                            <select id="payoutCurrencySelect" class="form-select"
                                @if((float) $affiliate->pending_balance != 0.0) disabled @endif>
                                @foreach($currencies as $currency)
                                    <option value="{{ $currency->id }}" @selected($affiliate->payout_currency_id == $currency->id)>
                                        {{ $currency->code }}@if($currency->name) — {{ $currency->name }}@endif
                                    </option>
                                @endforeach
                            </select>
                            <button class="btn btn-outline-primary" id="savePayoutCurrencyBtn"
                                data-id="{{ $affiliate->id }}"
                                @if((float) $affiliate->pending_balance != 0.0) disabled @endif>
                                <i class="fas fa-save me-1"></i>{{ __('admin/affiliates.button_save') }}
                            </button>
                        </div>
                        @if((float) $affiliate->pending_balance != 0.0)
                            <div class="form-text small text-warning">{{ __('admin/affiliates.payout_currency_locked_pending') }}</div>
                        @endif
                    @else
                        <div>{{ $affiliate->payoutCurrency->code ?? '-' }}</div>
                    @endcan
                </div>
            </x-admin.card>
        </div>
    </div>

    <!-- Tabs -->
    <x-admin.card>
        <x-slot:header>
            <ul class="nav nav-tabs card-header-tabs" id="affiliateTabs" role="tablist">
                <li class="nav-item" role="presentation">
                    <button class="nav-link active" id="commissions-tab" data-bs-toggle="tab" data-bs-target="#commissions-pane" type="button" role="tab">
                        <i class="fas fa-coins me-1"></i>{{ __('admin/affiliates.tab_commissions') }}
                    </button>
                </li>
                <li class="nav-item" role="presentation">
                    <button class="nav-link" id="payouts-tab" data-bs-toggle="tab" data-bs-target="#payouts-pane" type="button" role="tab">
                        <i class="fas fa-money-bill-wave me-1"></i>{{ __('admin/affiliates.tab_payouts') }}
                    </button>
                </li>
                <li class="nav-item" role="presentation">
                    <button class="nav-link" id="links-tab" data-bs-toggle="tab" data-bs-target="#links-pane" type="button" role="tab">
                        <i class="fas fa-link me-1"></i>{{ __('admin/affiliates.tab_links') }}
                    </button>
                </li>
            </ul>
        </x-slot:header>

        <div class="tab-content" id="affiliateTabsContent">
            <!-- Commissions Tab -->
            <div class="tab-pane fade show active" id="commissions-pane" role="tabpanel">
                <div class="table-responsive">
                    <table class="table table-hover align-middle mb-0" id="commissions-table">
                        <thead>
                            <tr>
                                <th>{{ __('admin/affiliates.commission_id') }}</th>
                                <th>{{ __('admin/affiliates.commission_client') }}</th>
                                <th>{{ __('admin/affiliates.commission_product') }}</th>
                                <th>{{ __('admin/affiliates.commission_invoice') }}</th>
                                <th>{{ __('admin/affiliates.commission_type') }}</th>
                                <th class="text-end">{{ __('admin/affiliates.commission_amount') }}</th>
                                <th>{{ __('admin/affiliates.commission_rate') }}</th>
                                <th class="text-center">{{ __('admin/affiliates.commission_status') }}</th>
                                <th>{{ __('admin/affiliates.commission_date') }}</th>
                            </tr>
                        </thead>
                        <tbody></tbody>
                    </table>
                </div>
            </div>

            <!-- Payouts Tab -->
            <div class="tab-pane fade" id="payouts-pane" role="tabpanel">
                <div class="table-responsive">
                    <table class="table table-hover align-middle mb-0" id="affiliate-payouts-table">
                        <thead>
                            <tr>
                                <th>{{ __('admin/affiliates.payout_id') }}</th>
                                <th class="text-end">{{ __('admin/affiliates.payout_amount') }}</th>
                                <th class="text-center">{{ __('admin/affiliates.payout_status') }}</th>
                                <th>{{ __('admin/affiliates.payout_method') }}</th>
                                <th>{{ __('admin/affiliates.payout_admin') }}</th>
                                <th>{{ __('admin/affiliates.payout_notes') }}</th>
                                <th>{{ __('admin/affiliates.payout_paid_at') }}</th>
                                <th>{{ __('admin/affiliates.payout_created_at') }}</th>
                            </tr>
                        </thead>
                        <tbody></tbody>
                    </table>
                </div>
            </div>

            <!-- Links Tab -->
            <div class="tab-pane fade" id="links-pane" role="tabpanel">
                <div class="table-responsive">
                    <table class="table table-hover align-middle mb-0">
                        <thead>
                            <tr>
                                <th>{{ __('admin/affiliates.link_id') }}</th>
                                <th>{{ __('admin/affiliates.link_label') }}</th>
                                <th>{{ __('admin/affiliates.link_url') }}</th>
                                <th class="text-center">{{ __('admin/affiliates.link_clicks') }}</th>
                                <th class="text-center">{{ __('admin/affiliates.link_unique_clicks') }}</th>
                                <th class="text-center">{{ __('admin/affiliates.link_conversions') }}</th>
                                <th class="text-center">{{ __('admin/affiliates.link_active') }}</th>
                                <th>{{ __('admin/affiliates.link_created_at') }}</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($links as $link)
                            <tr>
                                <td>{{ $link->id }}</td>
                                <td>{{ $link->label ?? '-' }}</td>
                                <td><code class="small">{{ $link->target_url }}</code></td>
                                <td class="text-center">{{ $link->clicks }}</td>
                                <td class="text-center">{{ $link->unique_clicks }}</td>
                                <td class="text-center">{{ $link->conversions }}</td>
                                <td class="text-center">
                                    @if($link->is_active)
                                        <span class="badge bg-success">{{ __('admin/affiliates.status_active') }}</span>
                                    @else
                                        <span class="badge bg-secondary">-</span>
                                    @endif
                                </td>
                                <td>{{ $link->created_at->format('d.m.Y H:i') }}</td>
                            </tr>
                            @empty
                            <tr>
                                <td colspan="8" class="text-center text-muted py-4">-</td>
                            </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </x-admin.card>
</div>

<x-admin.modal id="rejectModal" :title="__('admin/affiliates.reject_modal_title')">
    <div class="mb-3">
        <label for="rejectReason" class="form-label">{{ __('admin/affiliates.reject_modal_reason') }}</label>
        <textarea class="form-control" id="rejectReason" rows="3" placeholder="{{ __('admin/affiliates.reject_modal_reason_placeholder') }}"></textarea>
    </div>
    <x-slot:footer>
        <button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="modal">{{ __('admin/affiliates.reject_modal_cancel') }}</button>
        <button type="button" class="btn btn-danger btn-sm" id="confirmReject">{{ __('admin/affiliates.reject_modal_submit') }}</button>
    </x-slot:footer>
</x-admin.modal>
@endsection

@push('scripts')
<script>
    window.affiliateShowConfig = {
        affiliateId: {{ $affiliate->id }},
        routes: {
            commissionRecords: '{{ route("api.admin.affiliates.commission-records", $affiliate) }}',
            payoutRecords: '{{ route("api.admin.affiliates.affiliate-payout-records", $affiliate) }}',
            approve: '{{ route("api.admin.affiliates.approve", $affiliate) }}',
            reject: '{{ route("api.admin.affiliates.reject", $affiliate) }}',
            suspend: '{{ route("api.admin.affiliates.suspend", $affiliate) }}',
            activate: '{{ route("api.admin.affiliates.activate", $affiliate) }}',
            payoutCurrency: '{{ route("api.admin.affiliates.payout-currency", $affiliate) }}'
        },
        translations: {
            commission_type_initial: '{{ __("admin/affiliates.commission_type_initial") }}',
            commission_type_recurring: '{{ __("admin/affiliates.commission_type_recurring") }}',
            commission_status_pending: '{{ __("admin/affiliates.commission_status_pending") }}',
            commission_status_approved: '{{ __("admin/affiliates.commission_status_approved") }}',
            commission_status_paid: '{{ __("admin/affiliates.commission_status_paid") }}',
            commission_status_cancelled: '{{ __("admin/affiliates.commission_status_cancelled") }}',
            payout_status_pending: '{{ __("admin/affiliates.payout_status_pending") }}',
            payout_status_paid: '{{ __("admin/affiliates.payout_status_paid") }}',
            payout_status_rejected: '{{ __("admin/affiliates.payout_status_rejected") }}',
            messages_confirm_approve: '{{ __("admin/affiliates.messages_confirm_approve") }}',
            messages_confirm_suspend: '{{ __("admin/affiliates.messages_confirm_suspend") }}',
            messages_confirm_activate: '{{ __("admin/affiliates.messages_confirm_activate") }}',
            payout_currency_updated: '{{ __("admin/affiliates.payout_currency_updated") }}'
        }
    };
</script>
@vite('resources/js/admin/affiliates/show.js')
@endpush
