@extends("front.layout.master")
@php
    $user = Auth::user();
    require_once(base_path().'/app/Http/Controllers/price.php');
    $defCurValue = $defCurrency->currency_symbol ?? 'fa fa-dollar';
    $referLink = route('register', ['refercode' => $user->refer_code]);
    $totalReferred = $aff_history->total();
    $sessionCur = session()->get('currency');
    $needsConvert = isset($user->wallet) && isset($defCurrency->currency->code) && isset($sessionCur['id']) && $defCurrency->currency->code !== $sessionCur['id'];
@endphp
@section('title', __('staticwords.AffiliateDB') . ' | ')
@section('body')

<div class="max-w-[1400px] mx-auto px-4 lg:px-6 py-6 lg:py-8">
    <nav class="breadcrumb-row text-[12px] text-slate-500 flex items-center gap-1.5 leading-none mb-4">
        <a href="{{ url('/') }}" class="hover:text-brand-600">{{ __('Home') }}</a>
        <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" class="text-slate-300 shrink-0"><path d="m9 6 6 6-6 6"/></svg>
        <span class="text-deep font-medium">{{ __('staticwords.AffiliateDB') }}</span>
    </nav>

    <div class="grid lg:grid-cols-[280px_1fr] gap-6">
        {{-- Sidebar --}}
        <aside class="lg:sticky lg:top-28 lg:self-start">
            @include('user.sidebar')
        </aside>

        {{-- Main column --}}
        <div class="space-y-5 min-w-0">

            {{-- Header --}}
            <div class="flex items-end justify-between flex-wrap gap-3">
                <div>
                    <h1 class="font-display font-extrabold text-3xl text-deep">{{ __('staticwords.AffiliateDB') }}</h1>
                    <p class="text-slate-500 text-[14px] mt-1">{{ __('staticwords.referdesc') }}</p>
                </div>
                <button type="button" data-sh-modal-open="howItWorksModal" class="text-brand-600 hover:text-brand-700 font-semibold text-[14px] inline-flex items-center gap-1.5">
                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6"><circle cx="12" cy="12" r="9"/><path d="M12 8v4l2.5 2.5"/></svg>
                    {{ __('staticwords.howitworks') }}
                </button>
            </div>

            {{-- Stat tiles --}}
            <div class="grid grid-cols-1 sm:grid-cols-3 gap-3">
                <div class="bg-white rounded-2xl shadow-card p-5 flex items-center gap-4">
                    <span class="w-12 h-12 rounded-xl bg-emerald-50 text-emerald-600 grid place-items-center shrink-0">
                        <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6"><path d="M12 1v22M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"/></svg>
                    </span>
                    <div class="min-w-0">
                        <div class="text-[11px] uppercase tracking-wider text-slate-500 font-semibold">{{ __('Total earning') }}</div>
                        <div class="font-display font-extrabold text-[22px] tabular text-deep mt-0.5">
                            <i class="{{ $defCurValue }}"></i> {{ number_format((float) $earning, 2) }}
                        </div>
                        @if($needsConvert)
                            <div class="text-[11px] text-slate-500 mt-0.5">
                                ≈ <i class="{{ $sessionCur['value'] }}"></i> {{ sprintf('%.2f', currency($earning, $defCurrency->currency->code, $sessionCur['id'], false)) }}
                            </div>
                        @endif
                    </div>
                </div>

                <div class="bg-white rounded-2xl shadow-card p-5 flex items-center gap-4">
                    <span class="w-12 h-12 rounded-xl bg-brand-50 text-brand-600 grid place-items-center shrink-0">
                        <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2M9 11a4 4 0 1 0 0-8 4 4 0 0 0 0 8M22 21v-2a4 4 0 0 0-3-3.9M16 3.1a4 4 0 0 1 0 7.8"/></svg>
                    </span>
                    <div class="min-w-0">
                        <div class="text-[11px] uppercase tracking-wider text-slate-500 font-semibold">{{ __('Total referrals') }}</div>
                        <div class="font-display font-extrabold text-[22px] tabular text-deep mt-0.5">{{ $totalReferred }}</div>
                        <div class="text-[11px] text-slate-500 mt-0.5">{{ __('Friends signed up via your link') }}</div>
                    </div>
                </div>

                <div class="bg-white rounded-2xl shadow-card p-5 flex items-center gap-4">
                    <span class="w-12 h-12 rounded-xl bg-amber-50 text-amber-600 grid place-items-center shrink-0">
                        <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6"><path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8A8.5 8.5 0 0 1 8.7 3.9a8.38 8.38 0 0 1 3.8-.9 8.5 8.5 0 0 1 8.5 8.5z"/></svg>
                    </span>
                    <div class="min-w-0">
                        <div class="text-[11px] uppercase tracking-wider text-slate-500 font-semibold">{{ __('Your code') }}</div>
                        <div class="font-display font-extrabold text-[22px] tabular text-deep mt-0.5 truncate">{{ $user->refer_code }}</div>
                        <div class="text-[11px] text-slate-500 mt-0.5">{{ __('Share with friends') }}</div>
                    </div>
                </div>
            </div>

            {{-- Refer link card --}}
            <div class="bg-gradient-to-br from-brand-500 to-brand-700 rounded-2xl shadow-card overflow-hidden p-5 lg:p-7 text-white relative">
                <div class="absolute -top-10 -right-10 w-40 h-40 rounded-full bg-white/10"></div>
                <div class="absolute -bottom-12 -left-12 w-44 h-44 rounded-full bg-white/5"></div>
                <div class="relative">
                    <div class="text-[11px] uppercase tracking-wider text-white/80 font-semibold">{{ __('staticwords.referHeading') }}</div>
                    <h2 class="font-display font-extrabold text-2xl lg:text-3xl mt-1">{{ __('Invite friends, earn rewards') }}</h2>
                    <p class="text-white/85 text-[14px] mt-2 max-w-xl">{{ __('staticwords.referdesc') }}</p>

                    <div class="mt-5 flex flex-col sm:flex-row gap-2 max-w-xl">
                        <input type="text" readonly class="cptext flex-1 h-12 px-4 rounded-lg bg-white text-deep text-[13px] font-medium tabular outline-none border-0" value="{{ $referLink }}">
                        <button type="button" class="copylink h-12 px-5 bg-saffron hover:bg-yellow-400 text-deep font-bold rounded-lg flex items-center justify-center gap-2 transition-colors whitespace-nowrap">
                            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><rect x="9" y="9" width="13" height="13" rx="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg>
                            <span class="copylink-label">{{ __('staticwords.CopyLink') }}</span>
                        </button>
                    </div>

                    <div class="mt-3 flex flex-wrap gap-2">
                        <a target="_blank" href="https://wa.me/?text={{ urlencode(__('Join me on emart!') . ' ' . $referLink) }}" class="inline-flex items-center gap-1.5 bg-white/15 hover:bg-white/25 text-white text-[12px] font-semibold px-3 py-1.5 rounded-lg backdrop-blur transition-colors">
                            <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor"><path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.71.306 1.263.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 0 1-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 0 1-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 0 1 2.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0 0 12.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 0 0 5.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 0 0-3.48-8.413"/></svg>
                            WhatsApp
                        </a>
                        <a target="_blank" href="https://twitter.com/intent/tweet?text={{ urlencode(__('Join me on emart!')) }}&url={{ urlencode($referLink) }}" class="inline-flex items-center gap-1.5 bg-white/15 hover:bg-white/25 text-white text-[12px] font-semibold px-3 py-1.5 rounded-lg backdrop-blur transition-colors">
                            <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/></svg>
                            Twitter
                        </a>
                        <a target="_blank" href="https://www.facebook.com/sharer/sharer.php?u={{ urlencode($referLink) }}" class="inline-flex items-center gap-1.5 bg-white/15 hover:bg-white/25 text-white text-[12px] font-semibold px-3 py-1.5 rounded-lg backdrop-blur transition-colors">
                            <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor"><path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/></svg>
                            Facebook
                        </a>
                    </div>
                </div>
            </div>

            {{-- History list --}}
            <div class="bg-white rounded-2xl shadow-card p-5 lg:p-7">
                <div class="flex items-center justify-between flex-wrap gap-3 mb-5">
                    <h2 class="font-display font-extrabold text-xl text-deep">{{ __('staticwords.affhistory') }}</h2>
                    <span class="text-[12px] text-slate-500">{{ $totalReferred }} {{ __('records') }}</span>
                </div>

                @if($aff_history->count())
                    <div class="space-y-2">
                        @foreach($aff_history as $history)
                            <div class="flex items-center gap-3 p-3 rounded-xl border border-slate-100 hover:border-slate-200 transition-colors">
                                <span class="w-10 h-10 rounded-full bg-emerald-50 text-emerald-600 grid place-items-center shrink-0">
                                    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M12 5v14M5 12h14"/></svg>
                                </span>
                                <div class="flex-1 min-w-0">
                                    <div class="text-[13px] font-semibold text-deep truncate">{{ $history->log }}</div>
                                    <div class="text-[11px] text-slate-500 mt-0.5">
                                        @if(isset($history->user))
                                            {{ $history->user->email }} ·
                                        @endif
                                        {{ \Illuminate\Support\Carbon::parse($history->created_at)->diffForHumans() }}
                                    </div>
                                </div>
                                <div class="text-right shrink-0">
                                    <div class="font-display font-extrabold text-emerald-600 tabular text-[14px]">
                                        +<i class="{{ $defCurValue }}"></i> {{ sprintf('%.2f', $history->amount) }}
                                    </div>
                                    @if($history->procces == 0)
                                        <span class="inline-block mt-1 text-[10px] uppercase tracking-wider font-bold bg-amber-50 text-amber-700 px-2 py-0.5 rounded">{{ __('staticwords.Pending') }}</span>
                                    @else
                                        <span class="inline-block mt-1 text-[10px] uppercase tracking-wider font-bold bg-emerald-50 text-emerald-700 px-2 py-0.5 rounded">{{ __('staticwords.creditedtowallet') }}</span>
                                    @endif
                                </div>
                            </div>
                        @endforeach
                    </div>

                    <div class="mt-5">
                        {!! $aff_history->links() !!}
                    </div>
                @else
                    <div class="text-center py-12">
                        <svg width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.4" class="mx-auto text-slate-300"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2M9 11a4 4 0 1 0 0-8 4 4 0 0 0 0 8M22 21v-2a4 4 0 0 0-3-3.9M16 3.1a4 4 0 0 1 0 7.8"/></svg>
                        <h3 class="font-display font-extrabold text-lg text-deep mt-4">{{ __('No referrals yet') }}</h3>
                        <p class="text-slate-500 text-[14px] mt-1 max-w-md mx-auto">{{ __('Share your link above to start earning when friends sign up and shop with us.') }}</p>
                    </div>
                @endif
            </div>
        </div>
    </div>
</div>

{{-- How it works modal --}}
<div id="howItWorksModal" class="sh-modal" role="dialog" aria-modal="true">
    <div class="sh-modal-backdrop" data-sh-modal-close></div>
    <div class="sh-modal-panel max-w-lg">
        <div class="sh-modal-header">
            <h3 class="font-display font-extrabold text-lg">{{ __('staticwords.howitworks') }}</h3>
            <button type="button" data-sh-modal-close class="w-9 h-9 grid place-items-center hover:bg-slate-100 rounded-full" aria-label="Close">
                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 6 6 18M6 6l12 12"/></svg>
            </button>
        </div>
        <div class="sh-modal-body prose prose-sm max-w-none">
            {!! $aff_system->about_system !!}
        </div>
    </div>
</div>

@endsection

@section('script')
<script>
    document.querySelectorAll('.copylink').forEach(function(btn){
        btn.addEventListener('click', function(){
            var input = document.querySelector('.cptext');
            if (!input) return;
            input.select(); input.setSelectionRange(0, 99999);
            try { document.execCommand('copy'); } catch(e){}
            var label = btn.querySelector('.copylink-label');
            var orig = label ? label.textContent : btn.textContent;
            if (label) label.textContent = '{{ __('Copied!') }}';
            else btn.textContent = '{{ __('Copied!') }}';
            setTimeout(function(){
                if (label) label.textContent = orig;
                else btn.textContent = orig;
            }, 1800);
        });
    });
</script>
@endsection