@extends('layouts.app')
@section('title','Market Rates & Trends')
@section('header-left')
<div><h3 class="text-lg font-bold">Market Rates & Trends</h3></div>
@endsection
@section('content')
<div class="mb-6 glass-card rounded-2xl p-5 flex items-center justify-between">
    <div>
        <h4 class="font-bold text-base">Live Exchange Rates</h4>
        <p class="text-xs text-slate-500 mt-0.5">Last updated: {{ now()->format('M d, Y h:i A') }}</p>
    </div>
    <div class="flex items-center gap-2 text-xs font-bold text-green-500 bg-green-500/10 border border-green-500/20 px-3 py-2 rounded-lg">
        <span class="w-2 h-2 bg-green-500 rounded-full animate-pulse"></span> Live
    </div>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
    @foreach([['crypto','Cryptocurrency','currency_bitcoin'],['giftcard','Gift Cards','featured_play_list']] as [$cat, $label, $icon])
    <div class="glass-card rounded-2xl overflow-hidden">
        <div class="px-5 py-4 border-b border-white/5 flex items-center gap-3">
            <div class="w-9 h-9 rounded-xl bg-primary/10 flex items-center justify-center">
                <span class="material-symbols-outlined text-primary text-sm">{{ $icon }}</span>
            </div>
            <h4 class="font-bold">{{ $label }}</h4>
        </div>
        <div class="divide-y divide-white/5">
            @foreach($rates->where('category', $cat) as $rate)
            <div class="px-5 py-4 flex items-center justify-between hover:bg-white/3 transition-colors group">
                <div class="flex items-center gap-3">
                    <div class="w-10 h-10 rounded-xl bg-primary/10 flex items-center justify-center">
                        <span class="material-symbols-outlined text-primary text-lg">{{ $cat === 'crypto' ? 'currency_bitcoin' : 'featured_play_list' }}</span>
                    </div>
                    <div>
                        <p class="font-bold text-sm">{{ $rate->asset_type }}</p>
                        <p class="text-[10px] text-slate-500 uppercase">{{ $rate->category }}</p>
                    </div>
                </div>
                <div class="text-right">
                    <p class="text-base font-black text-primary">₦{{ number_format($rate->rate, 0) }}</p>
                    @if($rate->buy_rate)
                    <div class="flex items-center gap-3 mt-0.5">
                        <span class="text-[10px] text-green-500">Buy: ₦{{ number_format($rate->buy_rate, 0) }}</span>
                        <span class="text-[10px] text-orange-500">Sell: ₦{{ number_format($rate->sell_rate, 0) }}</span>
                    </div>
                    @endif
                </div>
                <a href="{{ route('new_exchange_modal') }}" class="opacity-0 group-hover:opacity-100 transition-all ml-4 px-4 py-2 bg-primary/10 text-primary rounded-lg text-xs font-bold border border-primary/20 hover:bg-primary hover:text-white">Exchange</a>
            </div>
            @endforeach
        </div>
    </div>
    @endforeach
</div>
@endsection