@extends('layouts.admin')

@section('title', 'Exchange Rates — Global Supply Chain')
@section('page_title', 'Exchange Rates')

@section('content')

{{-- ── Header ──────────────────────────────────────────────────── --}}
<div class="flex flex-wrap items-center justify-between gap-4 mb-6">
    <div>
        <h2 class="text-lg font-semibold text-white">Exchange Rates</h2>
        <p class="text-sm text-slate-400 mt-0.5">
            Base: USD
            @if($lastUpdated)
                &middot; Last updated {{ \Carbon\Carbon::parse($lastUpdated)->diffForHumans() }}
            @endif
        </p>
    </div>
    <form method="POST" action="{{ route('admin.exchange_rates.sync') }}">
        @csrf
        <button type="submit"
                class="inline-flex items-center gap-2 rounded-lg bg-sky-600 hover:bg-sky-500 px-4 py-2 text-sm font-semibold text-white transition-colors">
            🔄 Sync Rates
        </button>
    </form>
</div>

{{-- ── Search ───────────────────────────────────────────────────── --}}
<form method="GET" class="mb-4 flex gap-2">
    <input type="text" name="search" value="{{ request('search') }}"
           placeholder="Search currency code or name…"
           class="flex-1 rounded-lg bg-slate-800 border border-slate-700 px-4 py-2 text-sm text-slate-200 placeholder-slate-500 focus:outline-none focus:ring-2 focus:ring-sky-500">
    <button type="submit"
            class="rounded-lg bg-slate-700 hover:bg-slate-600 px-4 py-2 text-sm font-medium text-white transition-colors">
        Search
    </button>
    @if(request('search'))
        <a href="{{ route('admin.exchange_rates.index') }}"
           class="rounded-lg bg-slate-700 hover:bg-slate-600 px-4 py-2 text-sm font-medium text-slate-300 transition-colors">
            Clear
        </a>
    @endif
</form>

{{-- ── Table ────────────────────────────────────────────────────── --}}
<div class="rounded-xl bg-slate-800 border border-slate-700 overflow-hidden">
    <div class="overflow-x-auto">
        <table class="min-w-full text-sm">
            <thead>
                <tr class="text-xs text-slate-500 uppercase tracking-wider border-b border-slate-700 bg-slate-800/80">
                    <th class="px-5 py-3 text-left font-medium">Currency</th>
                    <th class="px-5 py-3 text-left font-medium">Code</th>
                    <th class="px-5 py-3 text-right font-medium">Rate (vs USD)</th>
                    <th class="px-5 py-3 text-right font-medium">Change %</th>
                    <th class="px-5 py-3 text-left font-medium">Source</th>
                    <th class="px-5 py-3 text-left font-medium">Recorded</th>
                </tr>
            </thead>
            <tbody class="divide-y divide-slate-700/50">
                @forelse($rates as $rate)
                    <tr class="hover:bg-slate-700/30 transition-colors">
                        <td class="px-5 py-3 text-slate-200 font-medium">
                            {{ $rate->targetCurrency?->name ?? '—' }}
                        </td>
                        <td class="px-5 py-3 font-mono text-xs text-slate-400">
                            {{ $rate->targetCurrency?->code ?? '—' }}
                            @if($rate->targetCurrency?->symbol)
                                <span class="text-slate-600">({{ $rate->targetCurrency->symbol }})</span>
                            @endif
                        </td>
                        <td class="px-5 py-3 text-right font-mono font-semibold text-white">
                            {{ number_format($rate->exchange_rate, 4) }}
                        </td>
                        <td class="px-5 py-3 text-right font-mono text-xs">
                            @if($rate->change_percentage !== null)
                                <span class="{{ $rate->change_percentage >= 0 ? 'text-emerald-400' : 'text-red-400' }}">
                                    {{ $rate->change_percentage >= 0 ? '+' : '' }}{{ number_format($rate->change_percentage, 2) }}%
                                </span>
                            @else
                                <span class="text-slate-600">—</span>
                            @endif
                        </td>
                        <td class="px-5 py-3 text-slate-500 text-xs">
                            {{ $rate->source ?? '—' }}
                        </td>
                        <td class="px-5 py-3 text-slate-400 text-xs">
                            {{ $rate->recorded_at?->format('Y-m-d H:i') ?? '—' }}
                        </td>
                    </tr>
                @empty
                    <tr>
                        <td colspan="6" class="px-5 py-12 text-center text-slate-500 text-sm">
                            No exchange rates yet.
                            Run <code class="text-slate-400">php artisan countries:sync --exchange</code> to import.
                        </td>
                    </tr>
                @endforelse
            </tbody>
        </table>
    </div>

    @if($rates->hasPages())
        <div class="px-5 py-4 border-t border-slate-700">
            {{ $rates->links() }}
        </div>
    @endif
</div>

@endsection