@extends('layouts.aura-main')

@section('main-content')
<div class="max-w-7xl mx-auto pb-20">
    <div class="flex justify-between items-end mb-8 border-b border-slate-900 pb-4">
        <div>
            <h1 class="text-3xl font-black text-slate-900">Exchange Rates</h1>
            <p class="text-[10px] font-bold text-slate-400 mt-1 font-sans">Daily currency conversion rates relative to ZMW</p>
        </div>
        <div class="flex gap-3">
            <form action="{{ route('currency-rates.sync') }}" method="POST">
                @csrf
                <button type="submit" class="text-[10px] font-black text-slate-900 border border-slate-900 px-6 py-3 hover:bg-slate-50 transition">
                    <i class="fas fa-sync-alt mr-2"></i> Sync Latest Rates
                </button>
            </form>
        </div>
    </div>

    <div class="bg-white border border-slate-200 rounded-sm shadow-sm overflow-hidden">
        <table class="w-full">
            <thead class="bg-slate-50 border-b border-slate-200">
                <tr class="text-[10px] font-black text-slate-500 text-left">
                    <th class="px-6 py-4">Date</th>
                    <th class="px-6 py-4">Base</th>
                    <th class="px-6 py-4">Target Currency</th>
                    <th class="px-6 py-4">Exchange Rate</th>
                    <th class="px-6 py-4 text-right">Source</th>
                </tr>
            </thead>
            <tbody class="divide-y divide-slate-100 text-sm">
                @forelse($rates as $rate)
                <tr class="hover:bg-slate-50 transition">
                    <td class="px-6 py-4 font-bold text-slate-900">{{ \Carbon\Carbon::parse($rate->rate_date)->format('M d, Y') }}</td>
                    <td class="px-6 py-4 text-slate-500">{{ $rate->baseCurrency->code ?? 'ZMW' }}</td>
                    <td class="px-6 py-4 font-medium text-slate-900">
                        {{ $rate->targetCurrency->code }} — {{ $rate->targetCurrency->name }}
                    </td>
                    <td class="px-6 py-4 font-mono font-bold text-indigo-600">
                        1 {{ $rate->baseCurrency->code ?? 'ZMW' }} = {{ number_format($rate->rate, 4) }} {{ $rate->targetCurrency->code }}
                    </td>
                    <td class="px-6 py-4 text-right text-[10px] text-slate-400 font-bold uppercase">
                        API Automated
                    </td>
                </tr>
                @empty
                <tr>
                    <td colspan="5" class="px-6 py-10 text-center text-slate-400">No exchange rates recorded yet. Click Sync to fetch today's rates.</td>
                </tr>
                @endforelse
            </tbody>
        </table>
    </div>
    <div class="mt-4">
        {{ $rates->links() }}
    </div>
</div>
@endsection