@extends('layouts.admin')
@section('title','Rates')
@section('page-title','Exchange Rate Management')
@section('content')
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-8">
    {{-- Add New Rate --}}
    <div class="glass-card rounded-2xl p-5 h-fit">
        <h4 class="font-bold text-sm mb-4 flex items-center gap-2"><span class="material-symbols-outlined text-primary text-base">add_circle</span> Add New Asset</h4>
        <form method="POST" action="{{ route('admin.rates.store') }}" class="space-y-3">
            @csrf
            <div>
                <label class="text-[10px] uppercase font-bold tracking-wider text-slate-500 block mb-1">Asset Symbol</label>
                <input type="text" name="asset_type" placeholder="e.g. XRP" required class="w-full bg-white/5 border border-white/10 rounded-lg px-3 py-2 text-sm text-white focus:border-primary/50 focus:ring-0 focus:outline-none placeholder:text-slate-600"/>
            </div>
            <div>
                <label class="text-[10px] uppercase font-bold tracking-wider text-slate-500 block mb-1">Category</label>
                <select name="category" class="w-full bg-white/5 border border-white/10 rounded-lg px-3 py-2 text-sm text-white focus:border-primary/50 focus:ring-0 focus:outline-none">
                    <option value="crypto">Cryptocurrency</option>
                    <option value="giftcard">Gift Card</option>
                </select>
            </div>
            <div>
                <label class="text-[10px] uppercase font-bold tracking-wider text-slate-500 block mb-1">Rate (₦ per unit)</label>
                <input type="number" step="0.01" name="rate" placeholder="e.g. 1650" required class="w-full bg-white/5 border border-white/10 rounded-lg px-3 py-2 text-sm text-white focus:border-primary/50 focus:ring-0 focus:outline-none placeholder:text-slate-600"/>
            </div>
            <button class="w-full py-2.5 bg-primary text-white rounded-xl text-sm font-bold hover:bg-primary/90 transition-all">Add Asset</button>
        </form>
    </div>

    {{-- Rate Tables --}}
    <div class="lg:col-span-2 space-y-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-3 border-b border-white/5 flex items-center gap-2">
                <span class="material-symbols-outlined text-primary text-sm">{{ $icon }}</span>
                <h4 class="font-bold text-sm">{{ $label }}</h4>
            </div>
            <div class="divide-y divide-white/5">
                @foreach($grouped->get($cat, collect()) as $rate)
                <div class="px-5 py-3 flex items-center gap-4">
                    <div class="flex-1">
                        <p class="font-bold text-sm">{{ $rate->asset_type }}</p>
                        <p class="text-xs text-slate-500">Current: <span class="text-primary font-bold">₦{{ number_format($rate->rate, 2) }}</span></p>
                    </div>
                    <form method="POST" action="{{ route('admin.rates.update', $rate) }}" class="flex items-center gap-2">
                        @csrf
                        <input type="number" step="0.01" name="rate" value="{{ $rate->rate }}" class="w-28 bg-white/5 border border-white/10 rounded-lg px-3 py-1.5 text-xs text-white focus:border-primary/50 focus:ring-0 focus:outline-none" required/>
                        <button class="px-3 py-1.5 bg-primary/10 text-primary rounded-lg text-xs font-bold hover:bg-primary hover:text-white transition-all border border-primary/20">Update</button>
                    </form>
                </div>
                @endforeach
            </div>
        </div>
        @endforeach
    </div>
</div>
@endsection