File Manager
Viewing File: show.blade.php
@extends('layouts.dasht', ['title' => $title])
@section('content')
<div class="min-h-screen bg-white dark:bg-gray-900" x-cloak>
<!-- Simple Header -->
<div class="bg-white dark:bg-gray-900 border-b border-gray-100 dark:border-gray-800">
<div class="max-w-7xl mx-auto px-6 py-8">
<div class="flex items-center justify-between">
<div>
<div class="flex items-center space-x-3 mb-3">
<a href="{{ route('user.bots.index') }}" class="inline-flex items-center text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200 transition-colors">
<i data-lucide="arrow-left" class="w-4 h-4 mr-2"></i>
Back to Bots
</a>
</div>
<h1 class="text-2xl font-medium text-gray-900 dark:text-white mb-2">{{ $bot->name }}</h1>
<p class="text-gray-600 dark:text-gray-400">{{ $bot->description }}</p>
</div>
<div class="hidden lg:flex items-center space-x-2">
<div class="w-3 h-3 bg-green-500 rounded-full"></div>
<span class="text-sm text-gray-600 dark:text-gray-400">Active</span>
</div>
</div>
</div>
</div>
<div class="max-w-7xl mx-auto px-6 py-8">
<div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
<!-- Main Content -->
<div class="lg:col-span-2 space-y-6">
<!-- Performance Card -->
<div class="bg-white dark:bg-gray-900 rounded-lg border border-gray-100 dark:border-gray-800 p-6">
<h2 class="text-lg font-medium text-gray-900 dark:text-white mb-4">Performance</h2>
<div class="grid grid-cols-2 md:grid-cols-4 gap-4">
<div class="text-center p-4 bg-gray-50 dark:bg-gray-800 rounded-lg">
<div class="text-2xl font-medium text-gray-900 dark:text-white">{{ number_format($botStats['success_rate'], 1) }}%</div>
<div class="text-sm text-gray-500 dark:text-gray-400 mt-1">Success Rate</div>
</div>
<div class="text-center p-4 bg-gray-50 dark:bg-gray-800 rounded-lg">
<div class="text-2xl font-medium text-gray-900 dark:text-white">{{ number_format($botStats['total_trades']) }}</div>
<div class="text-sm text-gray-500 dark:text-gray-400 mt-1">Total Trades</div>
</div>
<div class="text-center p-4 bg-gray-50 dark:bg-gray-800 rounded-lg">
<div class="text-2xl font-medium text-gray-900 dark:text-white">${{ number_format($botStats['total_profit'], 2) }}</div>
<div class="text-sm text-gray-500 dark:text-gray-400 mt-1">Total Profit</div>
</div>
<div class="text-center p-4 bg-gray-50 dark:bg-gray-800 rounded-lg">
<div class="text-2xl font-medium text-gray-900 dark:text-white">{{ number_format($botStats['expected_return'], 1) }}%</div>
<div class="text-sm text-gray-500 dark:text-gray-400 mt-1">Expected Return</div>
</div>
</div>
</div>
<!-- Strategy Card -->
<div class="bg-white dark:bg-gray-900 rounded-lg border border-gray-100 dark:border-gray-800 p-6">
<h2 class="text-lg font-medium text-gray-900 dark:text-white mb-4">Trading Strategy</h2>
<div class="space-y-4">
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<div class="p-4 bg-gray-50 dark:bg-gray-800 rounded-lg">
<div class="flex items-center mb-2">
<i data-lucide="target" class="w-4 h-4 text-gray-500 dark:text-gray-400 mr-2"></i>
<span class="font-medium text-gray-900 dark:text-white">Strategy Type</span>
</div>
<p class="text-gray-600 dark:text-gray-400">{{ $bot->strategy ?? 'Advanced AI Trading' }}</p>
</div>
<div class="p-4 bg-gray-50 dark:bg-gray-800 rounded-lg">
<div class="flex items-center mb-2">
<i data-lucide="clock" class="w-4 h-4 text-gray-500 dark:text-gray-400 mr-2"></i>
<span class="font-medium text-gray-900 dark:text-white">Trading Frequency</span>
</div>
<p class="text-gray-600 dark:text-gray-400">{{ $bot->trading_frequency ?? 'Multiple times daily' }}</p>
</div>
</div>
<div class="p-4 bg-gray-50 dark:bg-gray-800 rounded-lg">
<div class="flex items-center mb-2">
<i data-lucide="info" class="w-4 h-4 text-gray-500 dark:text-gray-400 mr-2"></i>
<span class="font-medium text-gray-900 dark:text-white">Description</span>
</div>
<p class="text-gray-600 dark:text-gray-400">{{ $bot->strategy_description ?? 'Advanced machine learning algorithms analyze market patterns to execute profitable trades.' }}</p>
</div>
</div>
</div>
<!-- Recent Trades -->
@if($recentTrades && $recentTrades->count() > 0)
<div class="bg-white dark:bg-gray-900 rounded-lg border border-gray-100 dark:border-gray-800 p-6">
<h2 class="text-lg font-medium text-gray-900 dark:text-white mb-4">Recent Trades</h2>
<div class="overflow-x-auto">
<table class="w-full">
<thead>
<tr class="border-b border-gray-100 dark:border-gray-800">
<th class="text-left py-3 px-2 font-medium text-gray-600 dark:text-gray-400 text-sm">Date</th>
<th class="text-left py-3 px-2 font-medium text-gray-600 dark:text-gray-400 text-sm">Type</th>
<th class="text-left py-3 px-2 font-medium text-gray-600 dark:text-gray-400 text-sm">Amount</th>
<th class="text-left py-3 px-2 font-medium text-gray-600 dark:text-gray-400 text-sm">Result</th>
<th class="text-left py-3 px-2 font-medium text-gray-600 dark:text-gray-400 text-sm">Profit/Loss</th>
<th class="text-left py-3 px-2 font-medium text-gray-600 dark:text-gray-400 text-sm">Percentage</th>
</tr>
</thead>
<tbody>
@foreach($recentTrades as $trade)
<tr class="border-b border-gray-50 dark:border-gray-800 hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors">
<td class="py-3 px-2 text-gray-600 dark:text-gray-400 text-sm">{{ $trade->created_at->format('M d, Y H:i') }}</td>
<td class="py-3 px-2">
<span class="inline-flex items-center px-2 py-1 rounded text-xs font-medium
{{ $trade->trade_type == 'BUY' ? 'bg-green-50 text-green-700 dark:bg-green-900/20 dark:text-green-400' : 'bg-red-50 text-red-700 dark:bg-red-900/20 dark:text-red-400' }}">
{{ ucfirst($trade->trade_type) }}
</span>
</td>
<td class="py-3 px-2 text-gray-900 dark:text-white font-medium text-sm">${{ number_format($trade->amount, 2) }}</td>
<td class="py-3 px-2">
<span class="inline-flex items-center px-2 py-1 rounded text-xs font-medium
{{ $trade->result == 'profit' ? 'bg-green-50 text-green-700 dark:bg-green-900/20 dark:text-green-400' : 'bg-red-50 text-red-700 dark:bg-red-900/20 dark:text-red-400' }}">
{{ ucfirst($trade->result) }}
</span>
</td>
<td class="py-3 px-2">
<span class="font-medium text-sm {{ $trade->profit_loss >= 0 ? 'text-green-600 dark:text-green-400' : 'text-red-600 dark:text-red-400' }}">
{{ $trade->profit_loss >= 0 ? '+' : '' }}${{ number_format($trade->profit_loss, 2) }}
</span>
</td>
<td class="py-3 px-2">
<span class="inline-flex items-center px-2 py-1 rounded text-xs font-medium
{{ $trade->result == 'profit' ? 'bg-green-50 text-green-700 dark:bg-green-900/20 dark:text-green-400' : 'bg-red-50 text-red-700 dark:bg-red-900/20 dark:text-red-400' }}">
{{ number_format($trade->profit_percentage, 1) }}%
</span>
</td>
</tr>
@endforeach
</tbody>
</table>
</div>
</div>
@endif
</div>
<!-- Sidebar -->
<div class="space-y-6">
<!-- Investment Card -->
<div class="bg-white dark:bg-gray-900 rounded-lg border border-gray-100 dark:border-gray-800 p-6">
<h3 class="text-lg font-medium text-gray-900 dark:text-white mb-4">Investment Details</h3>
<div class="space-y-3 mb-6">
<div class="flex justify-between items-center">
<span class="text-gray-600 dark:text-gray-400 text-sm">Minimum Investment</span>
<span class="font-medium text-gray-900 dark:text-white">${{ number_format($bot->min_investment, 2) }}</span>
</div>
<div class="flex justify-between items-center">
<span class="text-gray-600 dark:text-gray-400 text-sm">Maximum Investment</span>
<span class="font-medium text-gray-900 dark:text-white">${{ number_format($bot->max_investment, 2) }}</span>
</div>
<div class="flex justify-between items-center">
<span class="text-gray-600 dark:text-gray-400 text-sm">Expected ROI</span>
<span class="font-medium text-green-600 dark:text-green-400">{{ number_format($bot->expected_return, 1) }}%</span>
</div>
<div class="flex justify-between items-center">
<span class="text-gray-600 dark:text-gray-400 text-sm">Risk Level</span>
<span class="inline-flex items-center px-2 py-1 rounded text-xs font-medium
{{ $bot->risk_level == 'low' ? 'bg-green-50 text-green-700 dark:bg-green-900/20 dark:text-green-400' :
($bot->risk_level == 'medium' ? 'bg-yellow-50 text-yellow-700 dark:bg-yellow-900/20 dark:text-yellow-400' :
'bg-red-50 text-red-700 dark:bg-red-900/20 dark:text-red-400') }}">
{{ ucfirst($bot->risk_level) }}
</span>
</div>
</div>
@if($userInvestment)
<!-- Current Investment -->
<div class="bg-gray-50 dark:bg-gray-800 rounded-lg p-4 mb-4">
<h4 class="font-medium text-gray-900 dark:text-white mb-3">Your Investment</h4>
<div class="space-y-2">
<div class="flex justify-between items-center">
<span class="text-gray-600 dark:text-gray-400 text-sm">Amount Invested</span>
<span class="font-medium text-gray-900 dark:text-white">${{ number_format($userInvestment->investment_amount, 2) }}</span>
</div>
<div class="flex justify-between items-center">
<span class="text-gray-600 dark:text-gray-400 text-sm">Current Profit</span>
<span class="font-medium {{ $userInvestment->current_profit >= 0 ? 'text-green-600 dark:text-green-400' : 'text-red-600 dark:text-red-400' }}">
{{ $userInvestment->current_profit >= 0 ? '+' : '' }}${{ number_format($userInvestment->current_profit, 2) }}
</span>
</div>
<div class="flex justify-between items-center">
<span class="text-gray-600 dark:text-gray-400 text-sm">Total Value</span>
<span class="font-medium text-gray-900 dark:text-white">${{ number_format($userInvestment->current_balance, 2) }}</span>
</div>
</div>
</div>
<form id="cancelInvestmentForm" action="{{ route('user.bots.cancel', ['investment' => $userInvestment->id]) }}" method="POST">
@csrf
<button type="submit" class="w-full bg-red-600 hover:bg-red-700 text-white font-medium py-3 px-4 rounded-lg transition-colors">
<i data-lucide="x-circle" class="w-4 h-4 mr-2 inline"></i>
Cancel Investment
</button>
</form>
@else
<!-- Investment Form -->
<form action="{{ route('user.bots.invest', $bot) }}" method="POST" class="space-y-4" x-data="{ amount: {{ $bot->min_investment }}, autoReinvest: false }" x-cloak>
@csrf
<div>
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Investment Amount</label>
<div class="relative">
<span class="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-500">$</span>
<input type="number"
name="amount"
x-model="amount"
min="{{ $bot->min_investment }}"
max="{{ $bot->max_investment }}"
step="0.01"
class="w-full pl-8 pr-4 py-3 bg-gray-50 dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-colors text-gray-900 dark:text-white"
required>
</div>
<div class="flex justify-between text-xs text-gray-500 dark:text-gray-400 mt-1">
<span>Min: ${{ number_format($bot->min_investment, 2) }}</span>
<span>Max: ${{ number_format($bot->max_investment, 2) }}</span>
</div>
</div>
<div class="bg-gray-50 dark:bg-gray-800 rounded-lg p-3">
<label class="flex items-center space-x-2">
<input type="checkbox"
name="auto_reinvest"
x-model="autoReinvest"
class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500">
<span class="text-sm font-medium text-gray-900 dark:text-white">Auto-reinvest profits</span>
</label>
<div x-show="autoReinvest" x-transition class="mt-3">
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Reinvestment Percentage</label>
<input type="number"
name="reinvest_percentage"
min="0"
max="100"
value="50"
class="w-full px-3 py-2 bg-white dark:bg-gray-700 border border-gray-200 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-colors text-gray-900 dark:text-white">
<p class="text-xs text-gray-500 dark:text-gray-400 mt-1">Percentage of profits to automatically reinvest</p>
</div>
</div>
<button type="submit" class="w-full bg-blue-600 hover:bg-blue-700 text-white font-medium py-3 px-4 rounded-lg transition-colors">
<i data-lucide="trending-up" class="w-4 h-4 mr-2 inline"></i>
Start Investment
</button>
</form>
@endif
</div>
<!-- Risk Information Card -->
<div class="bg-white dark:bg-gray-900 rounded-lg border border-gray-100 dark:border-gray-800 p-6">
<h3 class="text-lg font-medium text-gray-900 dark:text-white mb-4 flex items-center">
<i data-lucide="shield-alert" class="w-4 h-4 mr-2 text-orange-500"></i>
Risk Information
</h3>
<div class="space-y-3 text-sm text-gray-600 dark:text-gray-400">
<div class="flex items-start space-x-2">
<div class="w-1.5 h-1.5 bg-orange-400 rounded-full mt-2 flex-shrink-0"></div>
<p>Trading involves substantial risk and may result in loss of capital.</p>
</div>
<div class="flex items-start space-x-2">
<div class="w-1.5 h-1.5 bg-orange-400 rounded-full mt-2 flex-shrink-0"></div>
<p>Past performance does not guarantee future results.</p>
</div>
<div class="flex items-start space-x-2">
<div class="w-1.5 h-1.5 bg-orange-400 rounded-full mt-2 flex-shrink-0"></div>
<p>Only invest what you can afford to lose.</p>
</div>
<div class="flex items-start space-x-2">
<div class="w-1.5 h-1.5 bg-orange-400 rounded-full mt-2 flex-shrink-0"></div>
<p>Bot trading is automated but not guaranteed to be profitable.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script>
// Initialize Lucide icons
lucide.createIcons();
// SweetAlert for cancel investment button
document.addEventListener('DOMContentLoaded', function() {
const cancelForm = document.getElementById('cancelInvestmentForm');
if (cancelForm) {
cancelForm.addEventListener('submit', function(e) {
e.preventDefault(); // Prevent default form submission
Swal.fire({
title: 'Are you sure?',
text: "You are about to cancel this investment. This action cannot be undone!",
icon: 'warning',
showCancelButton: true,
confirmButtonColor: '#ef4444',
cancelButtonColor: '#6b7280',
confirmButtonText: 'Yes, cancel investment',
cancelButtonText: 'No, keep my investment',
reverseButtons: true,
background: document.querySelector('html').classList.contains('dark') ? '#1f2937' : '#ffffff',
color: document.querySelector('html').classList.contains('dark') ? '#ffffff' : '#1f2937'
}).then((result) => {
if (result.isConfirmed) {
// Show processing state
Swal.fire({
title: 'Processing',
text: 'Cancelling your investment...',
icon: 'info',
allowOutsideClick: false,
allowEscapeKey: false,
showConfirmButton: false,
didOpen: () => {
Swal.showLoading();
// Submit the form
cancelForm.submit();
}
});
}
});
});
}
});
</script>
@endpush
@endsection