@extends('layouts.user')

@section('title', 'Currency Comparison - ' . $currency1->code . ' vs ' . $currency2->code)

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

.currency-selector {
    background: white;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    padding: 1.5rem;
    transition: all 0.3s ease;
}

.currency-selector:hover {
    border-color: #3b82f6;
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(59, 130, 246, 0.1);
}

.currency-selector.active {
    border-color: #3b82f6;
    background: #eff6ff;
}

.vs-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    margin: 0 1rem;
}

.vs-circle {
    background: linear-gradient(135deg, #f59e0b, #f97316);
    color: white;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 0.875rem;
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3);
}

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

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

.performance-metric {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 0;
    border-bottom: 1px solid #f1f5f9;
}

.performance-metric:last-child {
    border-bottom: none;
}

.metric-label {
    color: #64748b;
    font-size: 0.875rem;
}

.metric-value {
    font-weight: 600;
    color: #1e293b;
}

.metric-value.positive { color: #059669; }
.metric-value.negative { color: #dc2626; }
.metric-value.neutral { color: #6b7280; }

.comparison-charts {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    margin-top: 2rem;
}

.chart-container {
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 1.5rem;
}

.currency-dropdown {
    appearance: none;
    background: white;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    padding: 0.75rem 1rem;
    font-size: 1rem;
    font-weight: 500;
    color: #1e293b;
    cursor: pointer;
    transition: all 0.2s ease;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%236b7280'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 1rem;
    padding-right: 3rem;
}

.currency-dropdown:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

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

.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: 1024px) {
    .comparison-charts {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
}

@media (max-width: 768px) {
    .compare-header {
        padding: 1.5rem;
    }
    
    .vs-divider {
        margin: 1rem 0;
    }
    
    .vs-circle {
        width: 50px;
        height: 50px;
        font-size: 0.75rem;
    }
}
</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">Compare</li>
        </ol>
    </nav>

    {{-- Header --}}
    <div class="compare-header">
        <h1 class="text-3xl font-bold mb-2">Currency Comparison</h1>
        <p class="text-blue-100">Compare exchange rates, performance, and trends between two currencies</p>
    </div>

    {{-- Currency Selection --}}
    <form method="GET" action="{{ route('user.currency.compare') }}" class="mb-8">
        <div class="flex flex-col lg:flex-row items-center gap-4">
            {{-- Currency 1 --}}
            <div class="currency-selector flex-1 {{ request('currency1') === $currency1->code ? 'active' : '' }}">
                <div class="text-center">
                    <label class="block text-sm font-medium text-slate-700 mb-2">Base Currency</label>
                    <select name="currency1" class="currency-dropdown w-full" onchange="this.form.submit()">
                        @foreach($availableCurrencies as $curr)
                            <option value="{{ $curr->code }}" {{ request('currency1', $currency1->code) === $curr->code ? 'selected' : '' }}>
                                {{ $curr->code }} - {{ $curr->name }}
                            </option>
                        @endforeach
                    </select>
                    <div class="mt-3">
                        <div class="text-2xl font-bold text-slate-800">{{ $currency1->name }}</div>
                        <div class="text-sm text-slate-600">{{ $currency1->code }} • {{ $currency1->symbol ?? $currency1->code }}</div>
                    </div>
                </div>
            </div>

            {{-- VS Divider --}}
            <div class="vs-divider">
                <div class="vs-circle">VS</div>
            </div>

            {{-- Currency 2 --}}
            <div class="currency-selector flex-1 {{ request('currency2') === $currency2->code ? 'active' : '' }}">
                <div class="text-center">
                    <label class="block text-sm font-medium text-slate-700 mb-2">Target Currency</label>
                    <select name="currency2" class="currency-dropdown w-full" onchange="this.form.submit()">
                        @foreach($availableCurrencies as $curr)
                            <option value="{{ $curr->code }}" {{ request('currency2', $currency2->code) === $curr->code ? 'selected' : '' }}>
                                {{ $curr->code }} - {{ $curr->name }}
                            </option>
                        @endforeach
                    </select>
                    <div class="mt-3">
                        <div class="text-2xl font-bold text-slate-800">{{ $currency2->name }}</div>
                        <div class="text-sm text-slate-600">{{ $currency2->code }} • {{ $currency2->symbol ?? $currency2->code }}</div>
                    </div>
                </div>
            </div>
        </div>

        {{-- Period Selector --}}
        <div class="flex justify-center mt-6">
            <div class="period-selector">
                <button type="submit" name="period" value="7" class="period-btn {{ $period == '7' ? 'active' : '' }}">7D</button>
                <button type="submit" name="period" value="30" class="period-btn {{ $period == '30' ? 'active' : '' }}">30D</button>
                <button type="submit" name="period" value="90" class="period-btn {{ $period == '90' ? 'active' : '' }}">90D</button>
                <button type="submit" name="period" value="365" class="period-btn {{ $period == '365' ? 'active' : '' }}">1Y</button>
            </div>
        </div>
    </form>

    {{-- Performance Comparison --}}
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 mb-8">
        {{-- Currency 1 Performance --}}
        <div class="performance-card">
            <h3 class="text-lg font-semibold text-slate-800 mb-4 flex items-center gap-2">
                <span class="w-4 h-4 bg-blue-500 rounded-full"></span>
                {{ $currency1->code }} Performance ({{ $period }} days)
            </h3>
            <div class="space-y-1">
                @php
                    $return1Class = $performance1['return'] > 0 ? 'positive' : ($performance1['return'] < 0 ? 'negative' : 'neutral');
                @endphp
                <div class="performance-metric">
                    <span class="metric-label">Total Return</span>
                    <span class="metric-value {{ $return1Class }}">{{ $performance1['return'] > 0 ? '+' : '' }}{{ $performance1['return'] }}%</span>
                </div>
                <div class="performance-metric">
                    <span class="metric-label">Volatility</span>
                    <span class="metric-value">{{ $performance1['volatility'] }}%</span>
                </div>
                <div class="performance-metric">
                    <span class="metric-label">Max Drawdown</span>
                    <span class="metric-value negative">-{{ $performance1['max_drawdown'] }}%</span>
                </div>
                <div class="performance-metric">
                    <span class="metric-label">Sharpe Ratio</span>
                    <span class="metric-value {{ $performance1['sharpe_ratio'] > 0 ? 'positive' : 'negative' }}">{{ $performance1['sharpe_ratio'] }}</span>
                </div>
                <div class="performance-metric">
                    <span class="metric-label">Data Points</span>
                    <span class="metric-value">{{ $rates1->count() }}</span>
                </div>
            </div>
        </div>

        {{-- Currency 2 Performance --}}
        <div class="performance-card">
            <h3 class="text-lg font-semibold text-slate-800 mb-4 flex items-center gap-2">
                <span class="w-4 h-4 bg-green-500 rounded-full"></span>
                {{ $currency2->code }} Performance ({{ $period }} days)
            </h3>
            <div class="space-y-1">
                @php
                    $return2Class = $performance2['return'] > 0 ? 'positive' : ($performance2['return'] < 0 ? 'negative' : 'neutral');
                @endphp
                <div class="performance-metric">
                    <span class="metric-label">Total Return</span>
                    <span class="metric-value {{ $return2Class }}">{{ $performance2['return'] > 0 ? '+' : '' }}{{ $performance2['return'] }}%</span>
                </div>
                <div class="performance-metric">
                    <span class="metric-label">Volatility</span>
                    <span class="metric-value">{{ $performance2['volatility'] }}%</span>
                </div>
                <div class="performance-metric">
                    <span class="metric-label">Max Drawdown</span>
                    <span class="metric-value negative">-{{ $performance2['max_drawdown'] }}%</span>
                </div>
                <div class="performance-metric">
                    <span class="metric-label">Sharpe Ratio</span>
                    <span class="metric-value {{ $performance2['sharpe_ratio'] > 0 ? 'positive' : 'negative' }}">{{ $performance2['sharpe_ratio'] }}</span>
                </div>
                <div class="performance-metric">
                    <span class="metric-label">Data Points</span>
                    <span class="metric-value">{{ $rates2->count() }}</span>
                </div>
            </div>
        </div>
    </div>

    {{-- Comparison Charts --}}
    <div class="comparison-charts">
        {{-- Currency 1 Chart --}}
        <div class="chart-container">
            <h3 class="text-lg font-semibold text-slate-800 mb-4 flex items-center gap-2">
                <span class="w-4 h-4 bg-blue-500 rounded-full"></span>
                {{ $currency1->code }}/USD Exchange Rate
            </h3>
            <div style="position: relative; height: 300px;">
                <canvas id="chart1" width="400" height="300"></canvas>
            </div>
        </div>

        {{-- Currency 2 Chart --}}
        <div class="chart-container">
            <h3 class="text-lg font-semibold text-slate-800 mb-4 flex items-center gap-2">
                <span class="w-4 h-4 bg-green-500 rounded-full"></span>
                {{ $currency2->code }}/USD Exchange Rate
            </h3>
            <div style="position: relative; height: 300px;">
                <canvas id="chart2" width="400" height="300"></canvas>
            </div>
        </div>
    </div>

    {{-- Combined Comparison Chart --}}
    <div class="mt-8">
        <div class="chart-container">
            <h3 class="text-lg font-semibold text-slate-800 mb-4">Combined Comparison</h3>
            <div style="position: relative; height: 400px;">
                <canvas id="combinedChart" width="400" height="400"></canvas>
            </div>
        </div>
    </div>

    {{-- Quick Actions --}}
    <div class="mt-8 flex flex-wrap gap-4">
        <a href="{{ route('user.currency.show', $currency1->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>
            View {{ $currency1->code }} Details
        </a>
        <a href="{{ route('user.currency.show', $currency2->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>
            View {{ $currency2->code }} Details
        </a>
        <button onclick="swapCurrencies()" 
                class="inline-flex items-center gap-2 px-4 py-2 bg-orange-600 text-white rounded-lg hover:bg-orange-700 transition-colors">
            <span>🔄</span>
            Swap Currencies
        </button>
        <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() {
    // Chart data
    const rates1Data = @json($rates1->map(function($rate) {
        return [
            'date' => $rate->recorded_at->format('M d'),
            'rate' => $rate->rate
        ];
    }));

    const rates2Data = @json($rates2->map(function($rate) {
        return [
            'date' => $rate->recorded_at->format('M d'),
            'rate' => $rate->rate
        ];
    }));

    // Chart options template
    const chartOptions = {
        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,
            }
        },
        scales: {
            x: {
                grid: { color: 'rgba(148, 163, 184, 0.1)', drawBorder: false },
                ticks: { color: '#64748b', font: { size: 11 } }
            },
            y: {
                grid: { color: 'rgba(148, 163, 184, 0.1)', drawBorder: false },
                ticks: { color: '#64748b', font: { size: 11 } }
            }
        },
        interaction: {
            mode: 'index',
            intersect: false,
        }
    };

    // Currency 1 Chart
    const ctx1 = document.getElementById('chart1').getContext('2d');
    const chart1 = new Chart(ctx1, {
        type: 'line',
        data: {
            labels: rates1Data.map(item => item.date),
            datasets: [{
                label: '{{ $currency1->code }}/{{ $currency2->code }}',
                data: rates1Data.map(item => item.rate),
                borderColor: '#3b82f6',
                backgroundColor: 'rgba(59, 130, 246, 0.1)',
                borderWidth: 3,
                fill: true,
                tension: 0.4,
                pointRadius: 3,
                pointHoverRadius: 6,
                pointBackgroundColor: '#3b82f6',
            }]
        },
        options: {
            ...chartOptions,
            plugins: {
                ...chartOptions.plugins,
                tooltip: {
                    ...chartOptions.plugins.tooltip,
                    callbacks: {
                        title: (context) => context[0].label,
                        label: (context) => `{{ $currency1->symbol ?? $currency1->code }}1 = {{ $currency2->symbol ?? $currency2->code }}${context.parsed.y.toFixed(4)}`
                    }
                }
            }
        }
    });

    // Currency 2 Chart
    const ctx2 = document.getElementById('chart2').getContext('2d');
    const chart2 = new Chart(ctx2, {
        type: 'line',
        data: {
            labels: rates2Data.map(item => item.date),
            datasets: [{
                label: '{{ $currency2->code }}/{{ $currency1->code }}',
                data: rates2Data.map(item => item.rate),
                borderColor: '#10b981',
                backgroundColor: 'rgba(16, 185, 129, 0.1)',
                borderWidth: 3,
                fill: true,
                tension: 0.4,
                pointRadius: 3,
                pointHoverRadius: 6,
                pointBackgroundColor: '#10b981',
            }]
        },
        options: {
            ...chartOptions,
            plugins: {
                ...chartOptions.plugins,
                tooltip: {
                    ...chartOptions.plugins.tooltip,
                    callbacks: {
                        title: (context) => context[0].label,
                        label: (context) => `{{ $currency2->symbol ?? $currency2->code }}1 = {{ $currency1->symbol ?? $currency1->code }}${context.parsed.y.toFixed(4)}`
                    }
                }
            }
        }
    });

    // Combined Chart
    const ctxCombined = document.getElementById('combinedChart').getContext('2d');
    const combinedChart = new Chart(ctxCombined, {
        type: 'line',
        data: {
            labels: rates1Data.map(item => item.date),
            datasets: [{
                label: '{{ $currency1->code }}/{{ $currency2->code }}',
                data: rates1Data.map(item => item.rate),
                borderColor: '#3b82f6',
                backgroundColor: 'rgba(59, 130, 246, 0.1)',
                borderWidth: 3,
                fill: false,
                tension: 0.4,
                pointRadius: 3,
                pointHoverRadius: 6,
                pointBackgroundColor: '#3b82f6',
                yAxisID: 'y'
            }, {
                label: '{{ $currency2->code }}/{{ $currency1->code }}',
                data: rates2Data.map(item => item.rate),
                borderColor: '#10b981',
                backgroundColor: 'rgba(16, 185, 129, 0.1)',
                borderWidth: 3,
                fill: false,
                tension: 0.4,
                pointRadius: 3,
                pointHoverRadius: 6,
                pointBackgroundColor: '#10b981',
                yAxisID: 'y1'
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
                legend: { 
                    display: true,
                    position: 'top',
                    align: 'end',
                    labels: {
                        boxWidth: 12,
                        padding: 15,
                        font: { size: 12 }
                    }
                },
                tooltip: {
                    mode: 'index',
                    intersect: false,
                    backgroundColor: 'rgba(15, 23, 42, 0.9)',
                    titleColor: '#f1f5f9',
                    bodyColor: '#cbd5e1',
                    borderColor: '#334155',
                    borderWidth: 1,
                    cornerRadius: 8,
                    callbacks: {
                        title: (context) => context[0].label,
                        label: (context) => {
                            if (context.datasetIndex === 0) {
                                return `{{ $currency1->code }}: 1 = {{ $currency2->symbol ?? $currency2->code }}${context.parsed.y.toFixed(4)}`;
                            } else {
                                return `{{ $currency2->code }}: 1 = {{ $currency1->symbol ?? $currency1->code }}${context.parsed.y.toFixed(4)}`;
                            }
                        }
                    }
                }
            },
            scales: {
                x: {
                    grid: { color: 'rgba(148, 163, 184, 0.1)', drawBorder: false },
                    ticks: { color: '#64748b', font: { size: 11 } }
                },
                y: {
                    type: 'linear',
                    display: true,
                    position: 'left',
                    grid: { color: 'rgba(148, 163, 184, 0.1)', drawBorder: false },
                    ticks: { 
                        color: '#3b82f6', 
                        font: { size: 11 },
                        callback: (value) => `{{ $currency1->symbol ?? $currency1->code }}${value.toFixed(4)}`
                    }
                },
                y1: {
                    type: 'linear',
                    display: true,
                    position: 'right',
                    grid: { drawOnChartArea: false },
                    ticks: { 
                        color: '#10b981', 
                        font: { size: 11 },
                        callback: (value) => `{{ $currency2->symbol ?? $currency2->code }}${value.toFixed(4)}`
                    }
                }
            },
            interaction: {
                mode: 'index',
                intersect: false,
            }
        }
    });

    // Swap currencies function
    window.swapCurrencies = function() {
        const form = document.createElement('form');
        form.method = 'GET';
        form.action = '{{ route("user.currency.compare") }}';
        
        const currency1Input = document.createElement('input');
        currency1Input.type = 'hidden';
        currency1Input.name = 'currency1';
        currency1Input.value = '{{ $currency2->code }}';
        form.appendChild(currency1Input);
        
        const currency2Input = document.createElement('input');
        currency2Input.type = 'hidden';
        currency2Input.name = 'currency2';
        currency2Input.value = '{{ $currency1->code }}';
        form.appendChild(currency2Input);
        
        const periodInput = document.createElement('input');
        periodInput.type = 'hidden';
        periodInput.name = 'period';
        periodInput.value = '{{ $period }}';
        form.appendChild(periodInput);
        
        document.body.appendChild(form);
        form.submit();
    };
});
</script>

@endpush