@extends('layouts.user')

@section('title', $currency->name . ' (' . $currency->code . ') - Currency Details')

@push('styles')
<link rel="stylesheet" href="{{ asset('css/user-dashboard.css') }}">
<style>
.currency-detail-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 16px;
    color: white;
    padding: 2rem;
    margin-bottom: 2rem;
}

.correlation-card {
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 1.5rem;
    transition: all 0.3s ease;
}

.correlation-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.1);
}

.correlation-bar {
    height: 8px;
    border-radius: 4px;
    transition: width 0.5s ease;
}

.correlation-positive { background: linear-gradient(90deg, #10b981, #34d399); }
.correlation-negative { background: linear-gradient(90deg, #ef4444, #f87171); }
.correlation-neutral { background: linear-gradient(90deg, #6b7280, #9ca3af); }

.metric-card {
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 1.5rem;
    text-align: center;
    transition: all 0.3s ease;
}

.metric-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.1);
}

.metric-value {
    font-size: 2rem;
    font-weight: bold;
    margin-bottom: 0.5rem;
}

.metric-label {
    color: #64748b;
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.countries-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1rem;
    margin-top: 1rem;
}

.country-card {
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 1rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    transition: all 0.3s ease;
}

.country-card:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.period-selector {
    display: flex;
    background: #f8fafc;
    border-radius: 8px;
    padding: 4px;
    gap: 4px;
}

.period-btn {
    padding: 0.5rem 1rem;
    border: none;
    background: transparent;
    border-radius: 6px;
    font-size: 0.875rem;
    font-weight: 500;
    color: #64748b;
    cursor: pointer;
    transition: all 0.2s ease;
}

.period-btn.active {
    background: white;
    color: #1e293b;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.period-btn:hover:not(.active) {
    color: #1e293b;
}

@media (max-width: 768px) {
    .currency-detail-header {
        padding: 1.5rem;
    }
    
    .countries-grid {
        grid-template-columns: 1fr;
    }
}
</style>
@endpush

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
@endpush

@section('content')

{{-- Flower Decorations --}}
<div class="flower-decorations">
    <div class="flower-left">
        <img src="{{ asset('assets/bunga1.png') }}" alt="Decorative Flower">
    </div>
    <div class="flower-right">
        <img src="{{ asset('assets/bunga2.png') }}" alt="Decorative Flower">
    </div>
</div>

<div class="dashboard-content">
    {{-- Breadcrumb --}}
    <nav class="mb-4" aria-label="Breadcrumb">
        <ol class="flex items-center space-x-2 text-sm">
            <li><a href="{{ route('user.currency.index') }}" class="text-blue-600 hover:text-blue-800">Currency Dashboard</a></li>
            <li class="text-slate-400">/</li>
            <li class="text-slate-600 font-medium">{{ $currency->code }}</li>
        </ol>
    </nav>

    {{-- Currency Header --}}
    <div class="currency-detail-header">
        <div class="flex flex-col md:flex-row md:items-center md:justify-between gap-4">
            <div>
                <h1 class="text-3xl font-bold mb-2">{{ $currency->name }}</h1>
                <p class="text-blue-100 text-lg">{{ $currency->code }} • {{ $currency->symbol ?? $currency->code }}</p>
                @if($latestRate)
                    <div class="flex items-center gap-3 mt-3">
                        <span class="text-2xl font-bold">{{ $currency->symbol ?? $currency->code }}{{ number_format($latestRate->exchange_rate, 4) }}</span>
                        <span class="text-blue-100">vs {{ $baseCur->code }}</span>
                        @if($latestRate->change_percentage)
                            @php
                                $changeClass = $latestRate->change_percentage > 0 ? 'bg-green-500' : ($latestRate->change_percentage < 0 ? 'bg-red-500' : 'bg-gray-500');
                                $changeIcon = $latestRate->change_percentage > 0 ? '↗' : ($latestRate->change_percentage < 0 ? '↘' : '→');
                            @endphp
                            <span class="px-2 py-1 rounded text-sm font-medium {{ $changeClass }}">
                                {{ $changeIcon }} {{ number_format(abs($latestRate->change_percentage), 2) }}%
                            </span>
                        @endif
                    </div>
                @endif
            </div>
            
            <div class="text-right">
                @if($latestRate)
                    <p class="text-blue-100 text-sm">Last Updated</p>
                    <p class="font-medium">{{ $currency->updated_at ? $currency->updated_at->format('M d, Y H:i') : $latestRate->recorded_at->format('M d, Y H:i') }}</p>
                    <p class="text-blue-200 text-xs mt-1">{{ $currency->updated_at ? $currency->updated_at->diffForHumans() : $latestRate->recorded_at->diffForHumans() }}</p>
                @endif
            </div>
        </div>
    </div>

    {{-- Statistics Cards --}}
    <div class="grid grid-cols-2 md:grid-cols-5 gap-4 mb-8">
        <div class="metric-card">
            <div class="metric-value text-blue-600">{{ number_format($highestRate, 4) }}</div>
            <div class="metric-label">Highest ({{ $period }}D)</div>
        </div>
        <div class="metric-card">
            <div class="metric-value text-red-600">{{ number_format($lowestRate, 4) }}</div>
            <div class="metric-label">Lowest ({{ $period }}D)</div>
        </div>
        <div class="metric-card">
            <div class="metric-value text-green-600">{{ number_format($avgRate, 4) }}</div>
            <div class="metric-label">Average</div>
        </div>
        <div class="metric-card">
            <div class="metric-value text-purple-600">{{ number_format($volatility, 2) }}%</div>
            <div class="metric-label">Volatility</div>
        </div>
        <div class="metric-card">
            <div class="metric-value text-amber-600">{{ $historicalRates->count() }}</div>
            <div class="metric-label">Data Points</div>
        </div>
    </div>

    <div class="grid grid-cols-1 xl:grid-cols-3 gap-8">
        {{-- Historical Chart --}}
        <div class="xl:col-span-2">
            <div class="widget-card">
                <div class="widget-header">
                    <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
                        <h2 class="text-lg font-semibold text-slate-800">Historical Exchange Rate</h2>
                        <div class="period-selector">
                            <button class="period-btn {{ $period == '7' ? 'active' : '' }}" onclick="changePeriod('7')">7D</button>
                            <button class="period-btn {{ $period == '30' ? 'active' : '' }}" onclick="changePeriod('30')">30D</button>
                            <button class="period-btn {{ $period == '90' ? 'active' : '' }}" onclick="changePeriod('90')">90D</button>
                            <button class="period-btn {{ $period == '365' ? 'active' : '' }}" onclick="changePeriod('365')">1Y</button>
                        </div>
                    </div>
                </div>
                <div class="widget-body">
                    <div style="position: relative; height: 400px;">
                        <canvas id="historicalChart" width="400" height="400"></canvas>
                    </div>
                </div>
            </div>
        </div>

        {{-- Correlations --}}
        <div>
            <div class="widget-card">
                <div class="widget-header">
                    <h2 class="text-lg font-semibold text-slate-800">Currency Correlations</h2>
                    <p class="text-sm text-slate-600">vs Major Currencies ({{ $period }} days)</p>
                </div>
                <div class="widget-body">
                    <div class="space-y-4">
                        @forelse($correlations as $correlation)
                            @php
                                $corrValue = $correlation['correlation'];
                                $corrClass = $corrValue > 0.3 ? 'correlation-positive' : ($corrValue < -0.3 ? 'correlation-negative' : 'correlation-neutral');
                                $corrWidth = abs($corrValue) * 100;
                            @endphp
                            <div class="flex items-center justify-between">
                                <div class="flex items-center gap-2">
                                    <span class="font-medium text-slate-800">{{ $correlation['currency']->code }}</span>
                                    <span class="text-sm text-slate-600">{{ $correlation['currency']->name }}</span>
                                </div>
                                <div class="flex items-center gap-3 flex-1 max-w-32">
                                    <div class="flex-1 bg-gray-100 rounded-full h-2">
                                        <div class="correlation-bar {{ $corrClass }}" style="width: {{ $corrWidth }}%"></div>
                                    </div>
                                    <span class="text-sm font-medium text-slate-700 w-12 text-right">{{ $corrValue >= 0 ? '+' : '' }}{{ $corrValue }}</span>
                                </div>
                            </div>
                        @empty
                            <p class="text-slate-500 text-center py-8">No correlation data available</p>
                        @endforelse
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- Countries Using This Currency --}}
    @if($countries->isNotEmpty())
        <div class="mt-8">
            <div class="widget-card">
                <div class="widget-header">
                    <h2 class="text-lg font-semibold text-slate-800">Countries Using {{ $currency->code }}</h2>
                    <p class="text-sm text-slate-600">{{ $countries->count() }} {{ $countries->count() === 1 ? 'country' : 'countries' }}</p>
                </div>
                <div class="widget-body">
                    <div class="countries-grid">
                        @foreach($countries as $country)
                            <div class="country-card">
                                @if($country->flag_url)
                                    <img src="{{ $country->flag_url }}" class="w-8 h-6 rounded object-cover shadow-sm" alt="{{ $country->name }} flag">
                                @endif
                                <div>
                                    <h3 class="font-medium text-slate-800">{{ $country->name }}</h3>
                                    <p class="text-xs text-slate-600">{{ $country->iso2 }}</p>
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>
            </div>
        </div>
    @endif

    {{-- Quick Actions --}}
    <div class="mt-8 flex flex-wrap gap-4">
        <a href="{{ route('user.currency.compare') }}?currency1={{ $baseCur->code }}&currency2={{ $currency->code }}" 
           class="inline-flex items-center gap-2 px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors">
            <span>📊</span>
            Compare with {{ $baseCur->code }}
        </a>
        <a href="{{ route('user.currency.index') }}?base_currency={{ $currency->code }}" 
           class="inline-flex items-center gap-2 px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 transition-colors">
            <span>🔄</span>
            Use as Base Currency
        </a>
        <a href="{{ route('user.currency.index') }}" 
           class="inline-flex items-center gap-2 px-4 py-2 bg-slate-600 text-white rounded-lg hover:bg-slate-700 transition-colors">
            <span>⬅️</span>
            Back to Dashboard
        </a>
    </div>

</div>

@endsection

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Historical chart data
    const historicalData = @json($historicalRates->map(function($rate) {
        return [
            'date' => $rate->recorded_at->format('M d'),
            'rate' => $rate->exchange_rate,
            'change' => $rate->change_percentage ?? 0
        ];
    }));

    // Create historical chart
    const ctx = document.getElementById('historicalChart').getContext('2d');
    const historicalChart = new Chart(ctx, {
        type: 'line',
        data: {
            labels: historicalData.map(item => item.date),
            datasets: [{
                label: '{{ $currency->code }} / {{ $baseCur->code }}',
                data: historicalData.map(item => item.rate),
                borderColor: '#3b82f6',
                backgroundColor: 'rgba(59, 130, 246, 0.1)',
                borderWidth: 3,
                fill: true,
                tension: 0.4,
                pointRadius: 4,
                pointHoverRadius: 8,
                pointBackgroundColor: '#3b82f6',
                pointBorderColor: '#ffffff',
                pointBorderWidth: 2,
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
                legend: { display: false },
                tooltip: {
                    mode: 'index',
                    intersect: false,
                    backgroundColor: 'rgba(15, 23, 42, 0.9)',
                    titleColor: '#f1f5f9',
                    bodyColor: '#cbd5e1',
                    borderColor: '#334155',
                    borderWidth: 1,
                    cornerRadius: 8,
                    displayColors: false,
                    callbacks: {
                        title: (context) => context[0].label,
                        label: (context) => {
                            const rate = context.parsed.y;
                            const change = historicalData[context.dataIndex]?.change || 0;
                            const changeText = change !== 0 ? ` (${change > 0 ? '+' : ''}${change.toFixed(2)}%)` : '';
                            return `{{ $currency->symbol ?? $currency->code }}${rate.toFixed(4)} {{ $baseCur->code }}${changeText}`;
                        }
                    }
                }
            },
            scales: {
                x: {
                    grid: { 
                        color: 'rgba(148, 163, 184, 0.1)',
                        drawBorder: false
                    },
                    ticks: { 
                        color: '#64748b',
                        font: { size: 12 }
                    }
                },
                y: {
                    grid: { 
                        color: 'rgba(148, 163, 184, 0.1)',
                        drawBorder: false
                    },
                    ticks: { 
                        color: '#64748b',
                        font: { size: 12 },
                        callback: (value) => `{{ $currency->symbol ?? $currency->code }}${value.toFixed(4)}`
                    }
                }
            },
            interaction: {
                mode: 'index',
                intersect: false,
            }
        }
    });

    // Period change function
    window.changePeriod = function(period) {
        const url = new URL(window.location);
        url.searchParams.set('period', period);
        window.location.href = url.toString();
    };

    // Animate correlation bars
    setTimeout(() => {
        document.querySelectorAll('.correlation-bar').forEach(bar => {
            bar.style.width = bar.style.width || '0%';
        });
    }, 500);
});
</script>

@endpush