{{-- File: resources/views/insights/trade-tracking.blade.php --}}

@extends('layouts.app')

@section('title', 'CLEDA Trade Tracking')

@section('content')

<div class="trade-tracking-dashboard">
    <div class="container-fluid">
        <!-- Hero Header -->
        <div class="hero-header mb-4">
            <div class="row align-items-center">
                <div class="col-12 col-lg-8">
                    <div class="hero-content">
                        <h1 class="hero-title">
                            <i class="fas fa-chart-candlestick me-2"></i>
                            <span class="hero-title-text">Trade Tracking Dashboard</span>
                        </h1>
                        <p class="hero-subtitle">Monitor your AI-recommended trades and performance</p>
                        <div class="hero-badges mt-3">
                            <span class="badge badge-custom me-2 mb-2">
                                <i class="fas fa-robot me-1"></i>AI Powered
                            </span>
                            <span class="badge badge-custom me-2 mb-2">
                                <i class="fas fa-sync-alt me-1"></i>Real-time
                            </span>
                            <span class="badge badge-custom mb-2">
                                <i class="fas fa-calculator me-1"></i>P&L Tracking
                            </span>
                        </div>
                    </div>
                </div>
                <div class="col-12 col-lg-4 mt-3 mt-lg-0">
                    <div class="performance-summary-card">
                        <div class="summary-icon">
                            <i class="fas fa-trophy"></i>
                        </div>
                        <div class="summary-info">
                            <div class="summary-label">Total P&L</div>
                            <div class="summary-value {{ $totalProfitLoss >= 0 ? 'positive' : 'negative' }}">
                                ${{ number_format($totalProfitLoss, 2) }}
                            </div>
                            <div class="summary-detail">Win Rate: {{ $winRate }}%</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Performance Overview Cards -->
        <div class="overview-cards mb-4">
            <div class="row g-3">
                <div class="col-6 col-md-3">
                    <div class="overview-card total-trades">
                        <div class="card-icon">
                            <i class="fas fa-list"></i>
                        </div>
                        <div class="card-content">
                            <div class="card-number">{{ $totalTrades }}</div>
                            <div class="card-label">Total Trades</div>
                            <div class="card-sublabel">Active positions</div>
                        </div>
                    </div>
                </div>
                <div class="col-6 col-md-3">
                    <div class="overview-card profitable-trades">
                        <div class="card-icon">
                            <i class="fas fa-arrow-up"></i>
                        </div>
                        <div class="card-content">
                            <div class="card-number">{{ $profitableTrades }}</div>
                            <div class="card-label">Profitable</div>
                            <div class="card-sublabel">Winning trades</div>
                        </div>
                    </div>
                </div>
                <div class="col-6 col-md-3">
                    <div class="overview-card win-rate">
                        <div class="card-icon">
                            <i class="fas fa-percentage"></i>
                        </div>
                        <div class="card-content">
                            <div class="card-number">{{ $winRate }}%</div>
                            <div class="card-label">Win Rate</div>
                            <div class="card-sublabel">Success ratio</div>
                        </div>
                    </div>
                </div>
                <div class="col-6 col-md-3">
                    <div class="overview-card total-pnl">
                        <div class="card-icon">
                            <i class="fas fa-dollar-sign"></i>
                        </div>
                        <div class="card-content">
                            <div class="card-number {{ $totalProfitLoss >= 0 ? 'positive' : 'negative' }}">
                                ${{ number_format(abs($totalProfitLoss), 0) }}
                            </div>
                            <div class="card-label">Total P&L</div>
                            <div class="card-sublabel">{{ $totalProfitLoss >= 0 ? 'Profit' : 'Loss' }}</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Quick Actions -->
        <div class="quick-actions mb-4">
            <div class="row">
                <div class="col-12">
                    <div class="actions-card">
                        <div class="actions-header">
                            <h3><i class="fas fa-bolt me-2"></i>Quick Actions</h3>
                        </div>
                        <div class="actions-buttons">
                            <a href="{{ route('investment.advisor') }}" class="btn btn-primary">
                                <i class="fas fa-plus me-1"></i>Add New Trade
                            </a>
                            <button class="btn btn-secondary" onclick="refreshPrices()">
                                <i class="fas fa-sync-alt me-1"></i>Refresh Prices
                            </button>
                            <button class="btn btn-warning" onclick="exportTrades()">
                                <i class="fas fa-download me-1"></i>Export CSV
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Active Trades Table -->
        <div class="trades-section">
            <div class="section-header">
                <div class="section-icon">
                    <i class="fas fa-table"></i>
                </div>
                <div class="section-title">
                    <h2>Active Trades</h2>
                    <p>Monitor your current positions and performance</p>
                </div>
            </div>

            <div class="trades-table-container">
                @if($trades->count() > 0)
                    <div class="table-responsive">
                        <table class="table trades-table">
                            <thead>
                                <tr>
                                    <th>Trade Details</th>
                                    <th>Entry</th>
                                    <th>Current</th>
                                    <th>P&L</th>
                                    <th>Performance</th>
                                    <th>Actions</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($trades as $trade)
                                <tr class="trade-row" data-trade-id="{{ $trade->id }}">
                                    <td>
                                        <div class="trade-details">
                                            <div class="trade-header">
                                                <span class="ticker-badge">{{ $trade->ticker }}</span>
                                                <span class="action-badge {{ strtolower($trade->action) }}">
                                                    {{ $trade->action }}
                                                </span>
                                                <span class="type-badge {{ strtolower($trade->type) }}">
                                                    {{ $trade->type }}
                                                </span>
                                            </div>
                                            <div class="trade-meta">
                                                <div class="quantity">
                                                    {{ $trade->quantity }} {{ $trade->type === 'STOCK' ? 'shares' : 'contracts' }}
                                                </div>
                                                @if($trade->type !== 'STOCK')
                                                    <div class="options-details">
                                                        Strike: ${{ number_format($trade->strike_price, 2) }} | 
                                                        Exp: {{ \Carbon\Carbon::parse($trade->expiration_date)->format('M j, Y') }}
                                                    </div>
                                                @endif
                                                <div class="trade-date">
                                                    {{ \Carbon\Carbon::parse($trade->trade_date)->format('M j, Y') }}
                                                </div>
                                            </div>
                                        </div>
                                    </td>
                                    <td>
                                        <div class="price-info">
                                            <div class="price">${{ number_format($trade->entry_price, 2) }}</div>
                                            <div class="cost">Cost: ${{ number_format($trade->cost_estimate, 2) }}</div>
                                        </div>
                                    </td>
                                    <td>
                                        <div class="price-info">
                                            <div class="price current-price" data-ticker="{{ $trade->ticker }}">
                                                ${{ number_format($trade->current_price, 2) }}
                                            </div>
                                            <div class="price-change">
                                                @php
                                                    $change = $trade->current_price - $trade->entry_price;
                                                    $changePercent = $trade->entry_price > 0 ? ($change / $trade->entry_price) * 100 : 0;
                                                @endphp
                                                <span class="{{ $change >= 0 ? 'positive' : 'negative' }}">
                                                    {{ $change >= 0 ? '+' : '' }}${{ number_format($change, 2) }}
                                                    ({{ $changePercent >= 0 ? '+' : '' }}{{ number_format($changePercent, 1) }}%)
                                                </span>
                                            </div>
                                        </div>
                                    </td>
                                    <td>
                                        <div class="pnl-info">
                                            <div class="pnl {{ $trade->profit_loss >= 0 ? 'positive' : 'negative' }}">
                                                {{ $trade->profit_loss >= 0 ? '+' : '' }}${{ number_format($trade->profit_loss, 2) }}
                                            </div>
                                            <div class="pnl-percent {{ $trade->profit_loss_percentage >= 0 ? 'positive' : 'negative' }}">
                                                {{ $trade->profit_loss_percentage >= 0 ? '+' : '' }}{{ number_format($trade->profit_loss_percentage, 1) }}%
                                            </div>
                                        </div>
                                    </td>
                                    <td>
                                        <div class="performance-indicators">
                                            <div class="confidence-badge confidence-{{ strtolower($trade->confidence) }}">
                                                {{ $trade->confidence }}
                                            </div>
                                            <div class="risk-badge risk-{{ strtolower($trade->risk) }}">
                                                {{ $trade->risk }} Risk
                                            </div>
                                            <div class="target-return">
                                                Target: {{ $trade->target_return }}%
                                            </div>
                                        </div>
                                    </td>
                                    <td>
                                        <div class="trade-actions">
                                            <button class="btn btn-sm btn-primary" onclick="viewTradeDetails({{ $trade->id }})">
                                                <i class="fas fa-eye"></i>
                                            </button>
                                            <button class="btn btn-sm btn-success" onclick="closeTrade({{ $trade->id }})">
                                                <i class="fas fa-check"></i>
                                            </button>
                                            <button class="btn btn-sm btn-danger" onclick="deleteTrade({{ $trade->id }})">
                                                <i class="fas fa-trash"></i>
                                            </button>
                                        </div>
                                    </td>
                                </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                @else
                    <div class="empty-state">
                        <div class="empty-icon">
                            <i class="fas fa-chart-line"></i>
                        </div>
                        <div class="empty-content">
                            <h4>No Active Trades</h4>
                            <p>Start tracking your AI recommendations to see performance here</p>
                            <a href="{{ route('investment.advisor') }}" class="btn btn-primary">
                                <i class="fas fa-plus me-1"></i>Add Your First Trade
                            </a>
                        </div>
                    </div>
                @endif
            </div>
        </div>
    </div>
</div>

<!-- Trade Details Modal -->
<div class="modal fade" id="tradeDetailsModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Trade Details</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body" id="tradeDetailsContent">
                <!-- Content will be loaded dynamically -->
            </div>
        </div>
    </div>
</div>

<!-- Close Trade Modal -->
<div class="modal fade" id="closeTradeModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Close Trade</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <form id="closeTradeForm">
                <div class="modal-body">
                    <div class="mb-3">
                        <label class="form-label">Exit Price</label>
                        <input type="number" class="form-control" id="exitPrice" step="0.01" required>
                        <small class="text-muted">Leave blank to use current market price</small>
                    </div>
                    <input type="hidden" id="closeTradeId">
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-success">Close Trade</button>
                </div>
            </form>
        </div>
    </div>
</div>

<style>
/* Trade Tracking Dashboard Styles */
.trade-tracking-dashboard {
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
    min-height: 100vh;
    padding: 1rem 0;
}

/* Hero Header */
.hero-header {
    background: linear-gradient(135deg, #003666 0%, #007785 100%);
    border-radius: 15px;
    padding: 2rem 1.5rem;
    color: white;
    box-shadow: 0 10px 30px rgba(0, 54, 102, 0.3);
    margin: -0.5rem 0 1rem 0;
}

.hero-title {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

.hero-subtitle {
    font-size: 1rem;
    opacity: 0.9;
    margin-bottom: 0;
    line-height: 1.4;
}

.badge-custom {
    background: rgba(255, 255, 255, 0.2);
    color: white;
    padding: 0.4rem 0.8rem;
    border-radius: 15px;
    font-size: 0.8rem;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
}

.performance-summary-card {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 1.2rem;
    display: flex;
    align-items: center;
    backdrop-filter: blur(10px);
}

.summary-icon {
    font-size: 1.8rem;
    margin-right: 1rem;
    opacity: 0.8;
    flex-shrink: 0;
}

.summary-label {
    font-size: 0.8rem;
    opacity: 0.8;
    margin-bottom: 0.2rem;
}

.summary-value {
    font-size: 1.2rem;
    font-weight: 600;
}

.summary-value.positive {
    color: #10b981;
}

.summary-value.negative {
    color: #ef4444;
}

.summary-detail {
    font-size: 0.75rem;
    opacity: 0.7;
}

/* Overview Cards */
.overview-cards {
    margin: 1.5rem 0;
}

.overview-card {
    background: white;
    border-radius: 12px;
    padding: 1.2rem;
    display: flex;
    align-items: center;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    height: 100%;
    min-height: 100px;
}

.overview-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.overview-card .card-icon {
    font-size: 2rem;
    margin-right: 0.8rem;
    opacity: 0.8;
    flex-shrink: 0;
}

.overview-card.total-trades .card-icon { color: #3b82f6; }
.overview-card.profitable-trades .card-icon { color: #10b981; }
.overview-card.win-rate .card-icon { color: #f59e0b; }
.overview-card.total-pnl .card-icon { color: #8b5cf6; }

.card-content {
    flex: 1;
    min-width: 0;
}

.card-number {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1;
    margin-bottom: 0.2rem;
}

.card-number.positive {
    color: #10b981;
}

.card-number.negative {
    color: #ef4444;
}

.card-label {
    font-size: 0.9rem;
    font-weight: 600;
    color: #1f2937;
    margin-bottom: 0.2rem;
}

.card-sublabel {
    font-size: 0.75rem;
    color: #6b7280;
    line-height: 1.2;
}

/* Quick Actions */
.quick-actions {
    margin: 1.5rem 0;
}

.actions-card {
    background: white;
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
}

.actions-header {
    margin-bottom: 1rem;
}

.actions-header h3 {
    color: #1f2937;
    margin: 0;
    font-size: 1.2rem;
    font-weight: 600;
}

.actions-buttons {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.actions-buttons .btn {
    display: inline-flex;
    align-items: center;
    padding: 0.6rem 1.2rem;
    border-radius: 8px;
    font-weight: 500;
    transition: all 0.3s ease;
}

/* Trades Section */
.trades-section {
    background: white;
    border-radius: 15px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

.section-header {
    background: linear-gradient(135deg, #007785 0%, #005662 100%);
    color: white;
    padding: 1.5rem;
    display: flex;
    align-items: center;
}

.section-icon {
    font-size: 2rem;
    margin-right: 1rem;
    opacity: 0.9;
    flex-shrink: 0;
}

.section-title h2 {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 600;
}

.section-title p {
    margin: 0.25rem 0 0 0;
    opacity: 0.8;
    font-size: 0.9rem;
}

/* Trades Table */
.trades-table-container {
    padding: 1.5rem;
}

.trades-table {
    margin: 0;
}

.trades-table thead th {
    background: #f8fafc;
    border: none;
    color: #374151;
    font-weight: 600;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 1rem;
}

.trade-row {
    border-bottom: 1px solid #e5e7eb;
    transition: background-color 0.3s ease;
}

.trade-row:hover {
    background: #f9fafb;
}

.trade-row td {
    padding: 1rem;
    vertical-align: middle;
}

/* Trade Details */
.trade-details {
    min-width: 200px;
}

.trade-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
    flex-wrap: wrap;
}

.ticker-badge {
    background: #1f2937;
    color: white;
    padding: 0.2rem 0.6rem;
    border-radius: 12px;
    font-weight: 600;
    font-size: 0.8rem;
}

.action-badge {
    padding: 0.2rem 0.5rem;
    border-radius: 8px;
    font-size: 0.7rem;
    font-weight: 500;
}

.action-badge.buy {
    background: #dcfce7;
    color: #166534;
}

.action-badge.sell {
    background: #fee2e2;
    color: #dc2626;
}

.type-badge {
    padding: 0.2rem 0.5rem;
    border-radius: 8px;
    font-size: 0.7rem;
    font-weight: 500;
    background: #e0e7ff;
    color: #3730a3;
}

.trade-meta {
    font-size: 0.8rem;
    color: #6b7280;
}

.quantity {
    font-weight: 500;
    color: #374151;
}

.options-details {
    margin: 0.2rem 0;
}

.trade-date {
    margin-top: 0.2rem;
}

/* Price Info */
.price-info .price {
    font-size: 1rem;
    font-weight: 600;
    color: #1f2937;
}

.price-info .cost {
    font-size: 0.8rem;
    color: #6b7280;
    margin-top: 0.2rem;
}

.price-change {
    font-size: 0.8rem;
    margin-top: 0.2rem;
}

.price-change .positive {
    color: #10b981;
}

.price-change .negative {
    color: #ef4444;
}

/* P&L Info */
.pnl-info .pnl {
    font-size: 1rem;
    font-weight: 600;
}

.pnl-info .pnl.positive {
    color: #10b981;
}

.pnl-info .pnl.negative {
    color: #ef4444;
}

.pnl-percent {
    font-size: 0.8rem;
    margin-top: 0.2rem;
}

.pnl-percent.positive {
    color: #10b981;
}

.pnl-percent.negative {
    color: #ef4444;
}

/* Performance Indicators */
.performance-indicators {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.confidence-badge, .risk-badge {
    padding: 0.2rem 0.5rem;
    border-radius: 8px;
    font-size: 0.7rem;
    font-weight: 500;
    text-align: center;
}

.confidence-high {
    background: #10b981;
    color: white;
}

.confidence-medium {
    background: #f59e0b;
    color: white;
}

.confidence-low {
    background: #6b7280;
    color: white;
}

.risk-high {
    background: #ef4444;
    color: white;
}

.risk-medium {
    background: #f59e0b;
    color: white;
}

.risk-low {
    background: #10b981;
    color: white;
}

.target-return {
    font-size: 0.75rem;
    color: #6b7280;
}

/* Trade Actions */
.trade-actions {
    display: flex;
    gap: 0.3rem;
}

.trade-actions .btn {
    padding: 0.4rem 0.6rem;
    border-radius: 6px;
}

/* Empty State */
.empty-state {
    text-align: center;
    padding: 3rem 1rem;
    color: #6b7280;
}

.empty-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
    opacity: 0.5;
}

.empty-content h4 {
    color: #374151;
    margin-bottom: 0.5rem;
    font-size: 1.2rem;
}

.empty-content p {
    margin-bottom: 1.5rem;
}

/* Mobile Optimizations */
@media (max-width: 768px) {
    .trade-tracking-dashboard {
        padding: 0.5rem 0;
    }
    
    .hero-header {
        padding: 1.5rem 1rem;
        margin: 0 0 1rem 0;
        border-radius: 12px;
    }
    
    .hero-title {
        font-size: 1.5rem;
        line-height: 1.3;
    }
    
    .performance-summary-card {
        padding: 1rem;
    }
    
    .actions-buttons {
        flex-direction: column;
    }
    
    .actions-buttons .btn {
        width: 100%;
        justify-content: center;
    }
    
    .trades-table-container {
        padding: 1rem;
        overflow-x: auto;
    }
    
    .trades-table {
        min-width: 800px;
    }
    
    .trade-details {
        min-width: 150px;
    }
    
    .performance-indicators {
        flex-direction: row;
        flex-wrap: wrap;
    }
    
    .trade-actions {
        flex-direction: column;
    }
}

/* Loading states */
.loading {
    opacity: 0.6;
    pointer-events: none;
}

.spinner {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    border: 2px solid #f3f3f3;
    border-top: 2px solid #007785;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
</style>

<script>
// Trade tracking functionality
document.addEventListener('DOMContentLoaded', function() {
    console.log('Trade Tracking Dashboard Loaded');
    
    // Auto-refresh prices every 2 minutes
    setInterval(refreshPrices, 120000);
});

// Refresh current prices
function refreshPrices() {
    const priceElements = document.querySelectorAll('.current-price');
    priceElements.forEach(element => {
        const ticker = element.getAttribute('data-ticker');
        element.innerHTML = '<div class="spinner"></div>';
    });
    
    // Simulate price updates (in real implementation, you'd call your API)
    setTimeout(() => {
        window.location.reload();
    }, 2000);
}

// View trade details
function viewTradeDetails(tradeId) {
    fetch(`/insights/trade-details/${tradeId}`)
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                document.getElementById('tradeDetailsContent').innerHTML = data.html;
                const modal = new bootstrap.Modal(document.getElementById('tradeDetailsModal'));
                modal.show();
            }
        })
        .catch(error => {
            console.error('Error:', error);
            showAlert('danger', 'Failed to load trade details');
        });
}

// Close trade
function closeTrade(tradeId) {
    document.getElementById('closeTradeId').value = tradeId;
    const modal = new bootstrap.Modal(document.getElementById('closeTradeModal'));
    modal.show();
}

// Handle close trade form submission
document.getElementById('closeTradeForm').addEventListener('submit', function(e) {
    e.preventDefault();
    
    const tradeId = document.getElementById('closeTradeId').value;
    const exitPrice = document.getElementById('exitPrice').value;
    
    const submitBtn = this.querySelector('button[type="submit"]');
    const originalText = submitBtn.innerHTML;
    submitBtn.innerHTML = '<div class="spinner me-1"></div>Closing...';
    submitBtn.disabled = true;
    
    fetch(`/insights/close-trade/${tradeId}`, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
        },
        body: JSON.stringify({
            exit_price: exitPrice
        })
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            bootstrap.Modal.getInstance(document.getElementById('closeTradeModal')).hide();
            showAlert('success', data.message);
            setTimeout(() => window.location.reload(), 1500);
        } else {
            showAlert('danger', data.message || 'Failed to close trade');
        }
    })
    .catch(error => {
        console.error('Error:', error);
        showAlert('danger', 'Failed to close trade. Please try again.');
    })
    .finally(() => {
        submitBtn.innerHTML = originalText;
        submitBtn.disabled = false;
    });
});

// Delete trade
function deleteTrade(tradeId) {
    if (confirm('Are you sure you want to delete this trade? This action cannot be undone.')) {
        fetch(`/insights/delete-trade/${tradeId}`, {
            method: 'DELETE',
            headers: {
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
            }
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                showAlert('success', 'Trade deleted successfully');
                document.querySelector(`[data-trade-id="${tradeId}"]`).remove();
            } else {
                showAlert('danger', data.message || 'Failed to delete trade');
            }
        })
        .catch(error => {
            console.error('Error:', error);
            showAlert('danger', 'Failed to delete trade. Please try again.');
        });
    }
}

// Export trades to CSV
function exportTrades() {
    window.location.href = '/insights/export-trades';
}

// Show alert function
function showAlert(type, message) {
    const alertDiv = document.createElement('div');
    alertDiv.className = `alert alert-${type} alert-dismissible fade show position-fixed`;
    alertDiv.style.cssText = 'top: 20px; right: 20px; z-index: 9999; min-width: 300px; max-width: 400px;';
    alertDiv.innerHTML = `
        ${message}
        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
    `;
    
    document.body.appendChild(alertDiv);
    
    // Auto-remove after 5 seconds
    setTimeout(() => {
        if (alertDiv.parentNode) {
            alertDiv.remove();
        }
    }, 5000);
}
</script>
@endsection