@extends('layouts.app')

@section('title', 'Monitor Pertukaran Mata Uang')

@section('content')
<div class="container-fluid py-4">
    <div class="row mb-4">
        <div class="col-12">
            <div class="card border-0 shadow-sm">
                <div class="card-header bg-primary text-white">
                    <div class="row align-items-center">
                        <div class="col-md-6">
                            <h4 class="mb-0"><i class="fas fa-exchange-alt me-2"></i>Monitor Pertukaran Mata Uang</h4>
                            <small>Data real-time dari ExchangeRate API</small>
                        </div>
                        <div class="col-md-6">
                            <div class="row align-items-center">
                                <label class="col-md-4 col-form-label text-white mb-0">Mata Uang Dasar:</label>
                                <div class="col-md-8">
                                    <select id="baseCurrencySelect" class="form-select">
                                        @foreach($allCurrencies as $code => $currency)
                                            <option value="{{ $code }}" {{ $code === $baseCurrency ? 'selected' : '' }}>
                                                {{ $code }} - {{ $currency['label'] }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Live Currency Converter -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="card border-0 shadow-sm">
                <div class="card-header bg-success text-white">
                    <h5 class="mb-0"><i class="fas fa-calculator me-2"></i>Konverter Mata Uang Langsung</h5>
                </div>
                <div class="card-body">
                    <div class="row align-items-center">
                        <div class="col-md-4">
                            <div class="input-group">
                                <input type="number" id="fromAmount" class="form-control" placeholder="1.00" value="1" step="0.01" min="0">
                                <select id="fromCurrency" class="form-select">
                                    <option value="{{ $baseCurrency }}" selected>{{ $baseCurrency }}</option>
                                    @foreach($allCurrencies as $code => $currency)
                                        @if($code !== $baseCurrency)
                                            <option value="{{ $code }}">{{ $code }} - {{ $currency['label'] }}</option>
                                        @endif
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <div class="col-md-1 text-center">
                            <i class="fas fa-arrow-right fa-2x text-primary"></i>
                        </div>
                        <div class="col-md-4">
                            <div class="input-group">
                                <input type="text" id="toAmount" class="form-control bg-light" readonly>
                                <select id="toCurrency" class="form-select">
                                    @foreach($allCurrencies as $code => $currency)
                                        @if($code !== $baseCurrency)
                                            <option value="{{ $code }}" {{ $code === 'USD' ? 'selected' : '' }}>{{ $code }} - {{ $currency['label'] }}</option>
                                        @endif
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="text-center">
                                <small class="text-muted" id="conversionRate">Nilai Tukar: Memuat...</small>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Major Currency Cards -->
    <div class="row mb-4">
        @foreach($currencies as $code => $data)
        <div class="col-xl-2 col-lg-3 col-md-4 col-sm-6 mb-3">
            <div class="card border-0 shadow-sm h-100 currency-card" data-code="{{ $code }}">
                <div class="card-body text-center p-3">
                    <div class="currency-flag mb-2">
                        @if(!empty($data['flag_url']))
                            <img src="{{ $data['flag_url'] }}" 
                                 alt="{{ $code }} flag" 
                                 width="48" 
                                 height="36" 
                                 style="border-radius:4px; box-shadow:0 2px 8px rgba(0,0,0,0.15);"
                                 onerror="this.style.display='none'; this.nextElementSibling.style.display='inline-block';">
                            <i class="fas fa-coins fa-2x text-primary" style="display:none;"></i>
                        @else
                            <i class="fas fa-coins fa-2x text-primary"></i>
                        @endif
                    </div>
                    <h6 class="card-title mb-1">{{ $code }}</h6>
                    <small class="text-muted d-block mb-2">{{ $data['label'] }}</small>
                    <div class="rate-display">
                        <h5 class="mb-0 text-primary rate-value">{{ number_format($data['rate'], 4) }}</h5>
                        <small class="text-muted">per {{ $baseCurrency }}</small>
                    </div>
                    <div class="mt-2">
                        @if($data['risk'] < 30)
                            <span class="badge bg-success">Risiko Rendah</span>
                        @elseif($data['risk'] < 60)
                            <span class="badge bg-warning">Risiko Sedang</span>
                        @else
                            <span class="badge bg-danger">Risiko Tinggi</span>
                        @endif
                    </div>
                </div>
            </div>
        </div>
        @endforeach
    </div>

    <!-- Exchange Rate Trends Chart -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="card border-0 shadow-sm">
                <div class="card-header bg-info text-white">
                    <h5 class="mb-0"><i class="fas fa-chart-line me-2"></i>Tren Nilai Tukar 7 Hari</h5>
                </div>
                <div class="card-body">
                    <canvas id="currencyChart" width="400" height="100"></canvas>
                </div>
            </div>
        </div>
    </div>

    <!-- All Currencies Table -->
    <div class="row">
        <div class="col-12">
            <div class="card border-0 shadow-sm">
                <div class="card-header bg-dark text-white">
                    <h5 class="mb-0"><i class="fas fa-table me-2"></i>Semua Nilai Tukar Mata Uang ({{ count($allCurrencies) }} mata uang)</h5>
                </div>
                <div class="card-body p-0">
                    <div class="table-responsive">
                        <table class="table table-hover mb-0" id="currencyTable">
                            <thead class="table-light">
                                <tr>
                                    <th>Kode</th>
                                    <th>Mata Uang</th>
                                    <th class="text-end">Nilai Tukar (per {{ $baseCurrency }})</th>
                                    <th class="text-center">Risiko</th>
                                    <th class="text-end">Nilai Tukar Terbalik</th>
                                </tr>
                            </thead>
                            <tbody id="currencyTableBody">
                                @foreach($allCurrencies as $code => $currency)
                                <tr data-code="{{ $code }}">
                                    <td><strong>{{ $code }}</strong></td>
                                    <td>{{ $currency['label'] }}</td>
                                    <td class="text-end">
                                        <span class="rate-value">{{ number_format($currency['rate'], 6) }}</span>
                                    </td>
                                    <td class="text-center">
                                        @php
                                            $risk = app('App\Services\ApiService')->currencyToRisk($currency['rate'], 1.0);
                                        @endphp
                                        @if($risk < 30)
                                            <span class="badge bg-success">{{ number_format($risk, 1) }}%</span>
                                        @elseif($risk < 60)
                                            <span class="badge bg-warning">{{ number_format($risk, 1) }}%</span>
                                        @else
                                            <span class="badge bg-danger">{{ number_format($risk, 1) }}%</span>
                                        @endif
                                    </td>
                                    <td class="text-end">
                                        <small class="text-muted">{{ number_format(1 / $currency['rate'], 6) }}</small>
                                    </td>
                                </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Last Update Info -->
    @if(isset($ratesData['time_last_update_utc']))
    <div class="row mt-3">
        <div class="col-12">
            <div class="alert alert-info">
                <i class="fas fa-clock me-2"></i>
                <strong>Terakhir Diperbarui:</strong> {{ $ratesData['time_last_update_utc'] }}
                <span class="ms-3"><strong>Sumber Data:</strong> {{ $ratesData['provider'] ?? 'ExchangeRate API' }}</span>
            </div>
        </div>
    </div>
    @endif
</div>

<style>
.currency-card {
    transition: transform 0.2s, box-shadow 0.2s;
}
.currency-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 15px rgba(0,0,0,0.1) !important;
}
.rate-display {
    background: linear-gradient(45deg, #f8f9fa, #e9ecef);
    border-radius: 8px;
    padding: 8px;
}
#currencyTable tbody tr {
    transition: background-color 0.3s;
}
#currencyTable tbody tr:hover {
    background-color: #f8f9fa;
}
.table th {
    border-top: none;
    font-weight: 600;
}
</style>

@endsection

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
$(document).ready(function() {
    // Global variables
    let currentRates = @json($allCurrencies);
    let chartInstance = null;
    let baseCurrency = '{{ $baseCurrency }}';

    // Initialize chart
    initializeChart();
    
    // Initialize converter
    updateConverter();

    // Base currency selector change
    $('#baseCurrencySelect').change(function() {
        const newBase = $(this).val();
        window.location.href = `{{ route('currency') }}?base=${newBase}`;
    });

    // Converter inputs
    $('#fromAmount, #fromCurrency, #toCurrency').on('input change', updateConverter);

    function initializeChart() {
        const ctx = document.getElementById('currencyChart').getContext('2d');
        const chartData = @json($chartData);
        
        chartInstance = new Chart(ctx, {
            type: 'line',
            data: chartData,
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: {
                        display: true,
                        position: 'top'
                    },
                    tooltip: {
                        mode: 'index',
                        intersect: false,
                    }
                },
                scales: {
                    x: {
                        display: true,
                        title: {
                            display: true,
                            text: 'Tanggal'
                        }
                    },
                    y: {
                        display: true,
                        title: {
                            display: true,
                            text: 'Nilai Tukar'
                        }
                    }
                },
                interaction: {
                    mode: 'nearest',
                    axis: 'x',
                    intersect: false
                }
            }
        });
        
        // Set canvas height
        $('#currencyChart').parent().height(400);
    }

    function updateConverter() {
        const amount = parseFloat($('#fromAmount').val()) || 0;
        const fromCur = $('#fromCurrency').val();
        const toCur = $('#toCurrency').val();
        
        if (amount && fromCur && toCur && currentRates[fromCur] && currentRates[toCur]) {
            // Convert via base currency rates
            const fromRate = currentRates[fromCur].rate;
            const toRate = currentRates[toCur].rate;
            
            let convertedAmount;
            let rateDisplay;
            
            if (fromCur === baseCurrency) {
                // From base currency to target
                convertedAmount = amount * toRate;
                rateDisplay = `1 ${fromCur} = ${toRate.toFixed(4)} ${toCur}`;
            } else if (toCur === baseCurrency) {
                // From target to base currency  
                convertedAmount = amount / fromRate;
                rateDisplay = `1 ${fromCur} = ${(1/fromRate).toFixed(4)} ${toCur}`;
            } else {
                // Both are non-base currencies
                const crossRate = toRate / fromRate;
                convertedAmount = amount * crossRate;
                rateDisplay = `1 ${fromCur} = ${crossRate.toFixed(4)} ${toCur}`;
            }
            
            $('#toAmount').val(convertedAmount.toFixed(2));
            $('#conversionRate').text(`Nilai Tukar: ${rateDisplay}`);
        } else {
            $('#toAmount').val('');
            $('#conversionRate').text('Nilai Tukar: Pilihan tidak valid');
        }
    }

    // Auto-refresh rates every 30 seconds
    setInterval(function() {
        refreshRates();
    }, 30000);

    function refreshRates() {
        $.ajax({
            url: '/api/currency',
            data: { base: baseCurrency },
            method: 'GET',
            success: function(data) {
                if (data.currencies) {
                    currentRates = data.currencies;
                    updateRatesDisplay(data.currencies);
                    updateConverter();
                }
            },
            error: function() {
                console.log('Failed to refresh rates');
            }
        });
    }

    function updateRatesDisplay(currencies) {
        // Update currency cards
        $('.currency-card').each(function() {
            const code = $(this).data('code');
            if (currencies[code]) {
                $(this).find('.rate-value').text(parseFloat(currencies[code].rate).toFixed(4));
            }
        });

        // Update table rows
        $('#currencyTableBody tr').each(function() {
            const code = $(this).data('code');
            if (currencies[code]) {
                const rate = currencies[code].rate;
                $(this).find('.rate-value').text(parseFloat(rate).toFixed(6));
                $(this).find('td:last-child small').text(parseFloat(1 / rate).toFixed(6));
            }
        });
    }
});
</script>
@endpush