@extends('layouts.user', ['heading' => 'Plans & Binary Rules'])

@section('content')
    <div class="grid grid-cols-1 gap-4 md:grid-cols-2 xl:grid-cols-5">
        <div class="user-card p-4">
            <div class="text-xs text-[var(--user-muted)]">Pair Ratio</div>
            <div class="mt-2 text-2xl font-semibold">{{ $settings['pairing_ratio'] }}</div>
        </div>
        <div class="user-card p-4">
            <div class="text-xs text-[var(--user-muted)]">Joining Pair Value</div>
            <div class="mt-2 text-2xl font-semibold">Rs. {{ number_format((float) $settings['joining_pair_value'], 2) }}</div>
        </div>
        <div class="user-card p-4">
            <div class="text-xs text-[var(--user-muted)]">Repurchase Rate</div>
            <div class="mt-2 text-2xl font-semibold">{{ number_format((float) $settings['repurchase_pair_rate'], 2) }}%</div>
        </div>
        <div class="user-card p-4">
            <div class="text-xs text-[var(--user-muted)]">Daily Capping</div>
            <div class="mt-2 text-2xl font-semibold">Rs. {{ number_format((float) $settings['daily_capping'], 2) }}</div>
        </div>
        <div class="user-card p-4">
            <div class="text-xs text-[var(--user-muted)]">Withdrawal Hold</div>
            <div class="mt-2 text-2xl font-semibold">{{ (int) $settings['hold_days'] }} Days</div>
        </div>
    </div>

    <div class="mt-6 grid grid-cols-1 gap-4 xl:grid-cols-2">
        <div class="user-card p-4">
            <div class="mb-2 text-sm font-semibold">Binary BV Status</div>
            <div class="grid grid-cols-2 gap-2 text-sm">
                <div class="rounded bg-slate-50 p-2">Joining Left BV: <span class="font-semibold">{{ number_format((float) $binary['joining_left_bv'], 2) }}</span></div>
                <div class="rounded bg-slate-50 p-2">Joining Right BV: <span class="font-semibold">{{ number_format((float) $binary['joining_right_bv'], 2) }}</span></div>
                <div class="rounded bg-emerald-50 p-2">Joining Matchable BV: <span class="font-semibold">{{ number_format((float) $binary['joining_matchable'], 2) }}</span></div>
                <div class="rounded bg-indigo-50 p-2">Joining Carry (L/R): <span class="font-semibold">{{ number_format((float) $binary['carry_joining_left'], 2) }} / {{ number_format((float) $binary['carry_joining_right'], 2) }}</span></div>
                <div class="rounded bg-slate-50 p-2">Repurchase Left BV: <span class="font-semibold">{{ number_format((float) $binary['repurchase_left_bv'], 2) }}</span></div>
                <div class="rounded bg-slate-50 p-2">Repurchase Right BV: <span class="font-semibold">{{ number_format((float) $binary['repurchase_right_bv'], 2) }}</span></div>
                <div class="rounded bg-emerald-50 p-2">Repurchase Matchable BV: <span class="font-semibold">{{ number_format((float) $binary['repurchase_matchable'], 2) }}</span></div>
                <div class="rounded bg-indigo-50 p-2">Repurchase Carry (L/R): <span class="font-semibold">{{ number_format((float) $binary['carry_repurchase_left'], 2) }} / {{ number_format((float) $binary['carry_repurchase_right'], 2) }}</span></div>
            </div>
        </div>

        <div class="user-card p-4">
            <div class="mb-2 text-sm font-semibold">Referral Placement Links</div>
            <div class="space-y-2 text-xs">
                <div>
                    <div class="text-[var(--user-muted)]">Left Link</div>
                    <div class="break-all rounded bg-slate-50 p-2 font-mono">{{ $links['left'] }}</div>
                </div>
                <div>
                    <div class="text-[var(--user-muted)]">Right Link</div>
                    <div class="break-all rounded bg-slate-50 p-2 font-mono">{{ $links['right'] }}</div>
                </div>
                <div>
                    <div class="text-[var(--user-muted)]">Auto Link</div>
                    <div class="break-all rounded bg-slate-50 p-2 font-mono">{{ $links['auto'] }}</div>
                </div>
            </div>
            <div class="mt-3">
                <a href="{{ route('user.referrals') }}" class="rounded bg-slate-900 px-3 py-2 text-xs text-white">Open Referral Center</a>
            </div>
        </div>
    </div>

    <div class="mt-6 user-card p-4">
        <div class="mb-3 flex items-center justify-between">
            <div class="text-sm font-semibold">Available Plans</div>
            @if($currentPlan)
                <span class="user-badge success">Current: {{ $currentPlan->name }}</span>
            @else
                <span class="user-badge warning">No Active Plan</span>
            @endif
        </div>

        <div class="grid grid-cols-1 gap-3 md:grid-cols-2 xl:grid-cols-3">
            @forelse($plans as $plan)
                <div class="rounded-xl border border-[var(--user-border)] p-4 {{ $currentPlan && $currentPlan->id === $plan->id ? 'bg-emerald-50' : '' }}">
                    <div class="text-base font-semibold">{{ $plan->name }}</div>
                    <div class="mt-1 text-sm text-[var(--user-muted)]">Price: Rs. {{ number_format((float) $plan->price, 2) }}</div>
                    <div class="text-sm text-[var(--user-muted)]">Plan BV: {{ number_format((float) $plan->bv, 2) }}</div>
                    @if(is_array($plan->features) && count($plan->features))
                        <ul class="mt-2 list-disc pl-5 text-xs text-[var(--user-muted)]">
                            @foreach($plan->features as $feature)
                                <li>{{ $feature }}</li>
                            @endforeach
                        </ul>
                    @endif
                    @if($plan->button_text && $plan->button_link)
                        <a href="{{ $plan->button_link }}" class="mt-3 inline-block rounded bg-indigo-600 px-3 py-1 text-xs text-white">
                            {{ $plan->button_text }}
                        </a>
                    @endif
                </div>
            @empty
                <div class="rounded-xl border border-dashed border-[var(--user-border)] p-6 text-sm text-[var(--user-muted)] md:col-span-2 xl:col-span-3">
                    No active plans configured yet.
                </div>
            @endforelse
        </div>
    </div>
@endsection