@extends('layouts.app')

@section('title', 'Trade Tracking - CLEDA.I Insights')

@section('content')
<div class="investment-advisor-container">
    <!-- Header Section -->
    <div class="hero-section text-center mb-5">
        <div class="container">
            <div class="hero-content">
                <div class="cleda-logo mb-3">
                    <h1 class="display-4 fw-bold text-white mb-2">CLEDA.I</h1>
                    <p class="lead text-white-50">Trade Tracking Dashboard</p>
                </div>
                <div class="hero-stats row g-3 justify-content-center">
                    <div class="col-md-3">
                        <div class="stat-card">
                            <h3 class="stat-number text-success">{{ $activeTradesCount ?? 0 }}</h3>
                            <p class="stat-label">Active Trades</p>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="stat-card">
                            <h3 class="stat-number text-primary">${{ number_format($totalValue ?? 0, 2) }}</h3>
                            <p class="stat-label">Total Portfolio Value</p>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="stat-card">
                            <h3 class="stat-number {{ ($totalPnL ?? 0) >= 0 ? 'text-success' : 'text-danger' }}">
                                ${{ number_format($totalPnL ?? 0, 2) }}
                            </h3>
                            <p class="stat-label">Total P&L</p>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="stat-card">
                            <h3 class="stat-number {{ ($winRate ?? 0) >= 50 ? 'text-success' : 'text-warning' }}">
                                {{ number_format($winRate ?? 0, 1) }}%
                            </h3>
                            <p class="stat-label">Win Rate</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="container">
        <!-- Filter Controls -->
        <div class="filter-section mb-4">
            <div class="row g-3">
                <div class="col-md-3">
                    <select class="form-select" id="statusFilter">
                        <option value="">All Statuses</option>
                        <option value="active">Active</option>
                        <option value="closed">Closed</option>
                        <option value="expired">Expired</option>
                    </select>
                </div>
                <div class="col-md-3">
                    <select class="form-select" id="typeFilter">
                        <option value="">All Types</option>
                        <option value="call">Calls</option>
                        <option value="put">Puts</option>
                        <option value="stock">Stocks</option>
                    </select>
                </div>
                <div class="col-md-3">
                    <input type="text" class="form-control" id="tickerFilter" placeholder="Filter by ticker...">
                </div>
                <div class="col-md-3">
                    <button class="btn btn-outline-primary w-100" onclick="clearFilters()">
                        <i class="fas fa-refresh"></i> Clear Filters
                    </button>
                </div>
            </div>
        </div>

        <!-- Active Trades Section -->
        @if(isset($activeTrades) && $activeTrades->count() > 0)
        <div class="trades-section mb-5">
            <h2 class="section-title mb-4">
                <i class="fas fa-chart-line text-success"></i>
                Active Trades
                <span class="badge bg-success ms-2">{{ $activeTrades->count() }}</span>
            </h2>
            
            <div class="row g-4">
                @foreach($activeTrades as $trade)
                <div class="col-md-6 col-lg-4 trade-card" data-status="{{ $trade->status }}" data-type="{{ $trade->trade_type }}" data-ticker="{{ $trade->ticker }}">
                    <div class="card trade-item h-100">
                        <div class="card-header d-flex justify-content-between align-items-center">
                            <div>
                                <h5 class="card-title mb-0">{{ $trade->ticker }}</h5>
                                <small class="text-muted">{{ $trade->company_name ?? 'Company Name' }}</small>
                            </div>
                            <div class="trade-status">
                                <span class="badge bg-{{ $trade->status === 'active' ? 'success' : ($trade->status === 'closed' ? 'primary' : 'warning') }}">
                                    {{ ucfirst($trade->status) }}
                                </span>
                            </div>
                        </div>
                        
                        <div class="card-body">
                            <div class="trade-details">
                                <div class="row g-2 mb-3">
                                    <div class="col-6">
                                        <strong>Action:</strong> {{ strtoupper($trade->action) }}
                                    </div>
                                    <div class="col-6">
                                        <strong>Type:</strong> {{ strtoupper($trade->trade_type) }}
                                    </div>
                                </div>
                                
                                @if($trade->trade_type === 'call' || $trade->trade_type === 'put')
                                <div class="row g-2 mb-3">
                                    <div class="col-6">
                                        <strong>Contracts:</strong> {{ $trade->contracts ?? $trade->shares }}
                                    </div>
                                    <div class="col-6">
                                        <strong>Strike:</strong> ${{ number_format($trade->strike_price, 2) }}
                                    </div>
                                </div>
                                <div class="row g-2 mb-3">
                                    <div class="col-12">
                                        <strong>Expiration:</strong> {{ \Carbon\Carbon::parse($trade->expiration_date)->format('M j, Y') }}
                                        @php
                                            $daysToExp = \Carbon\Carbon::now()->diffInDays(\Carbon\Carbon::parse($trade->expiration_date), false);
                                        @endphp
                                        <span class="badge bg-{{ $daysToExp > 30 ? 'success' : ($daysToExp > 7 ? 'warning' : 'danger') }} ms-1">
                                            {{ $daysToExp > 0 ? $daysToExp . ' days' : 'Expired' }}
                                        </span>
                                    </div>
                                </div>
                                @else
                                <div class="row g-2 mb-3">
                                    <div class="col-6">
                                        <strong>Shares:</strong> {{ $trade->shares }}
                                    </div>
                                    <div class="col-6">
                                        <strong>Entry Price:</strong> ${{ number_format($trade->share_price, 2) }}
                                    </div>
                                </div>
                                @endif
                                
                                <div class="row g-2 mb-3">
                                    <div class="col-6">
                                        <strong>Cost:</strong> ${{ number_format($trade->cost_estimate, 2) }}
                                    </div>
                                    <div class="col-6">
                                        @php
                                            $currentPnL = $trade->current_pnl ?? 0;
                                        @endphp
                                        <strong>Current P&L:</strong> 
                                        <span class="text-{{ $currentPnL >= 0 ? 'success' : 'danger' }}">
                                            ${{ number_format($currentPnL, 2) }}
                                        </span>
                                    </div>
                                </div>
                                
                                <div class="progress mb-3" style="height: 8px;">
                                    @php
                                        $returnPercent = $trade->cost_estimate > 0 ? (($currentPnL / $trade->cost_estimate) * 100) : 0;
                                        $progressClass = $returnPercent >= 0 ? 'bg-success' : 'bg-danger';
                                        $progressWidth = min(abs($returnPercent), 100);
                                    @endphp
                                    <div class="progress-bar {{ $progressClass }}" role="progressbar" 
                                         style="width: {{ $progressWidth }}%" 
                                         aria-valuenow="{{ $returnPercent }}" 
                                         aria-valuemin="-100" 
                                         aria-valuemax="100">
                                    </div>
                                </div>
                                
                                <div class="text-center">
                                    <small class="text-muted">
                                        Return: <span class="text-{{ $returnPercent >= 0 ? 'success' : 'danger' }}">
                                            {{ number_format($returnPercent, 1) }}%
                                        </span>
                                    </small>
                                </div>
                            </div>
                        </div>
                        
                        <div class="card-footer">
                            <div class="btn-group w-100" role="group">
                                <button type="button" class="btn btn-outline-primary btn-sm" onclick="viewTradeDetails({{ $trade->id }})">
                                    <i class="fas fa-eye"></i> Details
                                </button>
                                <button type="button" class="btn btn-outline-success btn-sm" onclick="updateTrade({{ $trade->id }})">
                                    <i class="fas fa-edit"></i> Update
                                </button>
                                <button type="button" class="btn btn-outline-danger btn-sm" onclick="closeTrade({{ $trade->id }})">
                                    <i class="fas fa-times"></i> Close
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
                @endforeach
            </div>
        </div>
        @endif

        <!-- Recent Closed Trades -->
        @if(isset($recentClosedTrades) && $recentClosedTrades->count() > 0)
        <div class="trades-section mb-5">
            <h2 class="section-title mb-4">
                <i class="fas fa-history text-primary"></i>
                Recent Closed Trades
                <span class="badge bg-primary ms-2">{{ $recentClosedTrades->count() }}</span>
            </h2>
            
            <div class="table-responsive">
                <table class="table table-hover">
                    <thead class="table-dark">
                        <tr>
                            <th>Ticker</th>
                            <th>Type</th>
                            <th>Action</th>
                            <th>Entry Date</th>
                            <th>Close Date</th>
                            <th>Cost</th>
                            <th>Final P&L</th>
                            <th>Return %</th>
                            <th>Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($recentClosedTrades as $trade)
                        <tr>
                            <td>
                                <strong>{{ $trade->ticker }}</strong>
                                <br><small class="text-muted">{{ $trade->company_name ?? 'N/A' }}</small>
                            </td>
                            <td>
                                <span class="badge bg-secondary">{{ strtoupper($trade->trade_type) }}</span>
                            </td>
                            <td>
                                <span class="badge bg-{{ $trade->action === 'buy' ? 'success' : 'danger' }}">
                                    {{ strtoupper($trade->action) }}
                                </span>
                            </td>
                            <td>{{ \Carbon\Carbon::parse($trade->created_at)->format('M j, Y') }}</td>
                            <td>{{ \Carbon\Carbon::parse($trade->updated_at)->format('M j, Y') }}</td>
                            <td>${{ number_format($trade->cost_estimate, 2) }}</td>
                            <td class="text-{{ ($trade->final_pnl ?? 0) >= 0 ? 'success' : 'danger' }}">
                                ${{ number_format($trade->final_pnl ?? 0, 2) }}
                            </td>
                            <td class="text-{{ ($trade->return_percentage ?? 0) >= 0 ? 'success' : 'danger' }}">
                                {{ number_format($trade->return_percentage ?? 0, 1) }}%
                            </td>
                            <td>
                                <button class="btn btn-sm btn-outline-primary" onclick="viewTradeDetails({{ $trade->id }})">
                                    <i class="fas fa-eye"></i>
                                </button>
                            </td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
        @endif

        <!-- Quick Add Trade Button -->
        <div class="text-center mb-5">
            <button type="button" class="btn btn-primary btn-lg" data-bs-toggle="modal" data-bs-target="#addTradeModal">
                <i class="fas fa-plus"></i> Add New Trade
            </button>
        </div>
    </div>
</div>

<!-- Add Trade Modal -->
<div class="modal fade" id="addTradeModal" tabindex="-1" aria-labelledby="addTradeModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="addTradeModalLabel">Add New Trade</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form action="{{ route('insights.track.trade') }}" method="POST">
                @csrf
                <div class="modal-body">
                    <div class="row g-3">
                        <div class="col-md-6">
                            <label for="ticker" class="form-label">Ticker Symbol</label>
                            <input type="text" class="form-control" id="ticker" name="ticker" required>
                        </div>
                        <div class="col-md-6">
                            <label for="company_name" class="form-label">Company Name</label>
                            <input type="text" class="form-control" id="company_name" name="company_name">
                        </div>
                        <div class="col-md-6">
                            <label for="action" class="form-label">Action</label>
                            <select class="form-select" id="action" name="action" required>
                                <option value="">Select Action</option>
                                <option value="buy">BUY</option>
                                <option value="sell">SELL</option>
                            </select>
                        </div>
                        <div class="col-md-6">
                            <label for="trade_type" class="form-label">Trade Type</label>
                            <select class="form-select" id="trade_type" name="trade_type" required>
                                <option value="">Select Type</option>
                                <option value="call">CALL</option>
                                <option value="put">PUT</option>
                                <option value="stock">STOCK</option>
                            </select>
                        </div>
                        <div class="col-md-6" id="contractsField">
                            <label for="contracts" class="form-label">Contracts</label>
                            <input type="number" class="form-control" id="contracts" name="contracts">
                        </div>
                        <div class="col-md-6" id="sharesField" style="display: none;">
                            <label for="shares" class="form-label">Shares</label>
                            <input type="number" class="form-control" id="shares" name="shares">
                        </div>
                        <div class="col-md-6" id="strikePriceField">
                            <label for="strike_price" class="form-label">Strike Price</label>
                            <input type="number" step="0.01" class="form-control" id="strike_price" name="strike_price">
                        </div>
                        <div class="col-md-6" id="sharePriceField" style="display: none;">
                            <label for="share_price" class="form-label">Share Price</label>
                            <input type="number" step="0.01" class="form-control" id="share_price" name="share_price">
                        </div>
                        <div class="col-md-6" id="expirationField">
                            <label for="expiration_date" class="form-label">Expiration Date</label>
                            <input type="date" class="form-control" id="expiration_date" name="expiration_date">
                        </div>
                        <div class="col-md-6">
                            <label for="cost_estimate" class="form-label">Cost Estimate</label>
                            <input type="number" step="0.01" class="form-control" id="cost_estimate" name="cost_estimate" required>
                        </div>
                        <div class="col-12">
                            <label for="reasoning" class="form-label">Reasoning</label>
                            <textarea class="form-control" id="reasoning" name="reasoning" rows="3"></textarea>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-primary">Add Trade</button>
                </div>
            </form>
        </div>
    </div>
</div>

<style>
/* Hero Section */
.hero-section {
    background: linear-gradient(135deg, #003666 0%, #007785 100%);
    padding: 3rem 0;
    margin: -2rem -15px 0 -15px;
}

.hero-stats .stat-card {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border-radius: 15px;
    padding: 1.5rem;
    text-align: center;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.stat-number {
    font-size: 2rem;
    font-weight: bold;
    margin-bottom: 0.5rem;
}

.stat-label {
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 0;
    font-size: 0.9rem;
}

/* Section Styling */
.section-title {
    color: #003666;
    border-bottom: 3px solid #007785;
    padding-bottom: 0.5rem;
    display: inline-block;
}

/* Trade Cards */
.trade-item {
    border: none;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    border-left: 4px solid #007785;
}

.trade-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.trade-item .card-header {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border-bottom: 2px solid #007785;
}

/* Filter Section */
.filter-section {
    background: #f8f9fa;
    padding: 1.5rem;
    border-radius: 10px;
    border: 1px solid #dee2e6;
}

/* Table Styling */
.table-hover tbody tr:hover {
    background-color: rgba(0, 119, 133, 0.05);
}

/* Responsive */
@media (max-width: 768px) {
    .hero-stats .stat-card {
        margin-bottom: 1rem;
    }
    
    .trade-details .row {
        font-size: 0.9rem;
    }
}

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

/* Animation for new trades */
@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.trade-card {
    animation: slideIn 0.5s ease-out;
}
</style>

<script>
document.addEventListener('DOMContentLoaded', function() {
    // Trade type field toggle
    const tradeTypeSelect = document.getElementById('trade_type');
    const contractsField = document.getElementById('contractsField');
    const sharesField = document.getElementById('sharesField');
    const strikePriceField = document.getElementById('strikePriceField');
    const sharePriceField = document.getElementById('sharePriceField');
    const expirationField = document.getElementById('expirationField');
    
    tradeTypeSelect.addEventListener('change', function() {
        if (this.value === 'stock') {
            contractsField.style.display = 'none';
            sharesField.style.display = 'block';
            strikePriceField.style.display = 'none';
            sharePriceField.style.display = 'block';
            expirationField.style.display = 'none';
        } else if (this.value === 'call' || this.value === 'put') {
            contractsField.style.display = 'block';
            sharesField.style.display = 'none';
            strikePriceField.style.display = 'block';
            sharePriceField.style.display = 'none';
            expirationField.style.display = 'block';
        }
    });
    
    // Filtering functionality
    const statusFilter = document.getElementById('statusFilter');
    const typeFilter = document.getElementById('typeFilter');
    const tickerFilter = document.getElementById('tickerFilter');
    
    function filterTrades() {
        const statusValue = statusFilter.value.toLowerCase();
        const typeValue = typeFilter.value.toLowerCase();
        const tickerValue = tickerFilter.value.toLowerCase();
        
        document.querySelectorAll('.trade-card').forEach(card => {
            const status = card.dataset.status.toLowerCase();
            const type = card.dataset.type.toLowerCase();
            const ticker = card.dataset.ticker.toLowerCase();
            
            const statusMatch = !statusValue || status.includes(statusValue);
            const typeMatch = !typeValue || type.includes(typeValue);
            const tickerMatch = !tickerValue || ticker.includes(tickerValue);
            
            if (statusMatch && typeMatch && tickerMatch) {
                card.style.display = 'block';
            } else {
                card.style.display = 'none';
            }
        });
    }
    
    statusFilter.addEventListener('change', filterTrades);
    typeFilter.addEventListener('change', filterTrades);
    tickerFilter.addEventListener('input', filterTrades);
});

function clearFilters() {
    document.getElementById('statusFilter').value = '';
    document.getElementById('typeFilter').value = '';
    document.getElementById('tickerFilter').value = '';
    
    document.querySelectorAll('.trade-card').forEach(card => {
        card.style.display = 'block';
    });
}

function viewTradeDetails(tradeId) {
    window.location.href = `/insights/trade-details/${tradeId}`;
}

function updateTrade(tradeId) {
    // TODO: Implement trade update functionality
    console.log('Update trade:', tradeId);
}

function closeTrade(tradeId) {
    if (confirm('Are you sure you want to close this trade?')) {
        fetch(`/insights/close-trade/${tradeId}`, {
            method: 'POST',
            headers: {
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
                'Content-Type': 'application/json'
            }
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                location.reload();
            } else {
                alert('Error closing trade: ' + data.message);
            }
        })
        .catch(error => {
            console.error('Error:', error);
            alert('Error closing trade');
        });
    }
}

// Auto-refresh every 5 minutes
setInterval(function() {
    if (!document.hidden) {
        location.reload();
    }
}, 300000);
</script>
@endsection