@extends('layouts.app')

@section('title', 'Dashboard Afiliasi')

@section('content')
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
    <div class="mb-8">
        <h1 class="text-3xl font-bold text-gray-900">Program Afiliasi Anda</h1>
        <p class="text-gray-500 mt-1">Kelola link promosi dan pantau pendapatan komisi afiliasi Anda.</p>
    </div>

    @if($affiliate->status === 'pending')
        <div class="bg-amber-50 border border-amber-200 rounded-2xl p-6 text-center">
            <svg class="w-12 h-12 text-amber-500 mx-auto mb-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
            </svg>
            <h3 class="text-lg font-semibold text-amber-900">Pendaftaran Sedang Ditinjau</h3>
            <p class="text-amber-700 mt-1 max-w-md mx-auto text-sm">Terima kasih telah mendaftar! Permohonan Anda dengan kode referral <strong class="uppercase">{{ $affiliate->code }}</strong> sedang diverifikasi oleh admin. Kami akan segera memberi tahu Anda setelah disetujui.</p>
        </div>
    @elseif($affiliate->status === 'rejected')
        <div class="bg-red-50 border border-red-200 rounded-2xl p-6 text-center">
            <svg class="w-12 h-12 text-red-500 mx-auto mb-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z" />
            </svg>
            <h3 class="text-lg font-semibold text-red-900">Pendaftaran Ditolak</h3>
            <p class="text-red-700 mt-1 max-w-md mx-auto text-sm">Mohon maaf, pendaftaran afiliasi Anda ditolak oleh admin.</p>
            @if($affiliate->notes)
                <div class="mt-3 text-xs bg-white border border-red-100 p-3 rounded-lg max-w-md mx-auto text-left text-gray-600">
                    <strong>Catatan admin:</strong> {{ $affiliate->notes }}
                </div>
            @endif
        </div>
    @else
        <!-- Stats Grid -->
        <div class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-8">
            <div class="bg-white border border-gray-100 rounded-2xl p-6 shadow-sm">
                <p class="text-xs font-semibold text-gray-500 uppercase tracking-wider mb-2">Total Kunjungan Link</p>
                <p class="text-3xl font-bold text-gray-900">{{ number_format($affiliate->total_clicks) }}</p>
                <span class="text-xs text-gray-400">Jumlah klik unik pada link Anda</span>
            </div>

            <div class="bg-white border border-gray-100 rounded-2xl p-6 shadow-sm">
                <p class="text-xs font-semibold text-gray-500 uppercase tracking-wider mb-2">Total Pesanan</p>
                <p class="text-3xl font-bold text-gray-900">{{ number_format($affiliate->total_orders) }}</p>
                <span class="text-xs text-gray-400">Pembelian yang menggunakan link Anda</span>
            </div>

            <div class="bg-white border border-gray-100 rounded-2xl p-6 shadow-sm">
                <p class="text-xs font-semibold text-gray-500 uppercase tracking-wider mb-2">Total Komisi</p>
                <p class="text-3xl font-bold text-teal-600">Rp {{ number_format($affiliate->total_earned, 0, ',', '.') }}</p>
                <span class="text-xs text-gray-400">Total seluruh komisi yang didapat</span>
            </div>

            <div class="bg-white border border-gray-100 rounded-2xl p-6 shadow-sm">
                <p class="text-xs font-semibold text-gray-500 uppercase tracking-wider mb-2">Rate Komisi Anda</p>
                <p class="text-3xl font-bold text-gray-900">{{ $affiliate->commission_rate ?? config('affiliate.default_commission_rate', 5) }}%</p>
                <span class="text-xs text-gray-400">{{ $affiliate->commission_rate ? 'Rate khusus affiliator' : 'Rate default platform' }}</span>
            </div>
        </div>

        <!-- Link Referral Section -->
        <div class="bg-teal-50 border border-teal-100 rounded-2xl p-6 mb-8 flex flex-col md:flex-row justify-between items-center gap-4">
            <div>
                <h3 class="text-lg font-bold text-teal-900">Link Referral Anda</h3>
                <p class="text-teal-700 text-sm mt-1">Bagikan link berikut ini untuk mereferensikan produk & dapatkan komisi penjualan!</p>
            </div>
            <div class="w-full md:w-auto flex gap-2">
                <input type="text" readonly id="refLink" value="{{ route('affiliate.track', $affiliate->code) }}" class="bg-white border border-teal-200 rounded-xl px-4 py-2 text-sm text-gray-700 font-mono w-full md:w-80 select-all">
                <button onclick="navigator.clipboard.writeText(document.getElementById('refLink').value).then(() => { window.dispatchEvent(new CustomEvent('show-toast', { detail: { message: 'Link referral berhasil disalin!', type: 'success' } })) })" class="bg-teal-600 hover:bg-teal-700 text-white font-semibold px-4 py-2 rounded-xl transition text-sm shrink-0 flex items-center gap-1">
                    <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3"/></svg>
                    Salin
                </button>
            </div>
        </div>

        <!-- Informasi Rekening Bank -->
        <div class="bg-white border border-gray-100 rounded-2xl shadow-sm overflow-hidden mb-8">
            <div class="p-6 border-b border-gray-100">
                <h3 class="font-bold text-gray-900">Informasi Rekening Bank</h3>
                <p class="text-sm text-gray-500 mt-1">Rekening yang digunakan admin untuk mengirim komisi afiliasi Anda.</p>
            </div>
            <form method="POST" action="{{ route('affiliate.bank.update') }}" class="p-6 space-y-4">
                @csrf @method('PATCH')
                <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1.5">Nama Bank <span class="text-red-500">*</span></label>
                        <input type="text" name="bank_name" value="{{ old('bank_name', $affiliate->bank_name) }}"
                               placeholder="Contoh: BCA, BRI, Mandiri"
                               class="w-full px-4 py-2.5 border border-gray-200 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-teal-500 focus:border-transparent">
                        @error('bank_name')<p class="text-red-500 text-xs mt-1">{{ $message }}</p>@enderror
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1.5">Nomor Rekening <span class="text-red-500">*</span></label>
                        <input type="text" name="bank_account_number" value="{{ old('bank_account_number', $affiliate->bank_account_number) }}"
                               placeholder="Contoh: 1234567890"
                               class="w-full px-4 py-2.5 border border-gray-200 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-teal-500 focus:border-transparent">
                        @error('bank_account_number')<p class="text-red-500 text-xs mt-1">{{ $message }}</p>@enderror
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1.5">Nama Pemilik Rekening <span class="text-red-500">*</span></label>
                        <input type="text" name="bank_account_name" value="{{ old('bank_account_name', $affiliate->bank_account_name) }}"
                               placeholder="Sesuai buku tabungan"
                               class="w-full px-4 py-2.5 border border-gray-200 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-teal-500 focus:border-transparent">
                        @error('bank_account_name')<p class="text-red-500 text-xs mt-1">{{ $message }}</p>@enderror
                    </div>
                </div>
                @if($affiliate->bank_name)
                    <div class="bg-teal-50 border border-teal-100 rounded-xl px-4 py-3 text-sm text-teal-800">
                        Rekening tersimpan: <strong>{{ $affiliate->bank_name }}</strong> · {{ $affiliate->bank_account_number }} · a/n {{ $affiliate->bank_account_name }}
                    </div>
                @endif
                <div class="flex justify-end">
                    <button type="submit"
                            class="px-6 py-2.5 bg-teal-600 text-white font-semibold rounded-xl hover:bg-teal-700 transition text-sm">
                        Simpan Rekening
                    </button>
                </div>
            </form>
        </div>

        <!-- Commission History Table -->
        <div class="bg-white border border-gray-100 rounded-2xl shadow-sm overflow-hidden">
            <div class="p-6 border-b border-gray-100">
                <h3 class="font-bold text-gray-900">Riwayat Komisi Afiliasi</h3>
            </div>
            @if($commissions->isEmpty())
                <div class="text-center py-12 text-gray-500 text-sm">
                    Belum ada riwayat transaksi komisi yang masuk.
                </div>
            @else
                <div class="overflow-x-auto">
                    <table class="min-w-full divide-y divide-gray-200">
                        <thead class="bg-gray-50">
                            <tr>
                                <th class="px-6 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider">Order ID</th>
                                <th class="px-6 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider">Tanggal</th>
                                <th class="px-6 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider">Total Belanja</th>
                                <th class="px-6 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider">Rate</th>
                                <th class="px-6 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider">Jumlah Komisi</th>
                                <th class="px-6 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider">Status</th>
                            </tr>
                        </thead>
                        <tbody class="bg-white divide-y divide-gray-100">
                            @foreach($commissions as $commission)
                                <tr class="text-sm">
                                    <td class="px-6 py-4 whitespace-nowrap font-medium text-gray-900">
                                        #{{ $commission->order->order_number ?? $commission->order_id }}
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap text-gray-500">
                                        {{ $commission->created_at->format('d M Y, H:i') }}
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap text-gray-700">
                                        Rp {{ number_format($commission->order_amount, 0, ',', '.') }}
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap text-gray-500">
                                        {{ $commission->commission_rate }}%
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap font-bold text-teal-600">
                                        Rp {{ number_format($commission->commission_amount, 0, ',', '.') }}
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap">
                                        @if($commission->status === 'pending')
                                            <span class="px-2.5 py-1 inline-flex text-xs leading-5 font-semibold rounded-full bg-amber-100 text-amber-800">Pending</span>
                                        @elseif($commission->status === 'approved')
                                            <span class="px-2.5 py-1 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-100 text-blue-800">Approved</span>
                                        @else
                                            <span class="px-2.5 py-1 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">Paid</span>
                                        @endif
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
                <div class="px-6 py-4 border-t border-gray-100">
                    {{ $commissions->links() }}
                </div>
            @endif
        </div>
    @endif
</div>

@endsection