<?php $__env->startSection('title', 'Trade ' . $instrument->name); ?>
<?php $__env->startSection('content'); ?>

<div class="container mx-auto px-4 py-8" x-data="tradingSingle()" x-cloak>
    <!-- TradingView Ticker Tape Widget -->
    <!--<div class="mb-6">-->
    <!--    <div class="tradingview-widget-container">-->
    <!--        <div class="tradingview-widget-container__widget"></div>-->
    <!--        <script type="text/javascript" src="https://s3.tradingview.com/external-embedding/embed-widget-ticker-tape.js" async>-->
    <!--        {-->
    <!--            "symbols": [-->
    <!--                {"proName": "BINANCE:BTCUSDT", "title": "BTC/USDT"},-->
    <!--                {"proName": "BINANCE:ETHUSDT", "title": "ETH/USDT"},-->
    <!--                {"proName": "FX:EURUSD", "title": "EUR/USD"},-->
    <!--                {"proName": "NASDAQ:AAPL", "title": "APPLE"},-->
    <!--                {"proName": "NASDAQ:TSLA", "title": "TESLA"},-->
    <!--                {"proName": "TVC:GOLD", "title": "GOLD"}-->
    <!--            ],-->
    <!--            "showSymbolLogo": true,-->
    <!--            "colorTheme": "dark",-->
    <!--            "isTransparent": true,-->
    <!--            "displayMode": "adaptive",-->
    <!--            "locale": "en"-->
    <!--        }-->
    <!--        </script>-->
    <!--    </div>-->
    <!--</div>-->


    <?php if (isset($component)) { $__componentOriginalc254754b9d5db91d5165876f9d051922ca0066f4 = $component; } ?>
<?php $component = $__env->getContainer()->make(Illuminate\View\AnonymousComponent::class, ['view' => 'components.notify-alert','data' => []]); ?>
<?php $component->withName('notify-alert'); ?>
<?php if ($component->shouldRender()): ?>
<?php $__env->startComponent($component->resolveView(), $component->data()); ?>
<?php $component->withAttributes([]); ?>
<?php echo $__env->renderComponent(); ?>
<?php endif; ?>
<?php if (isset($__componentOriginalc254754b9d5db91d5165876f9d051922ca0066f4)): ?>
<?php $component = $__componentOriginalc254754b9d5db91d5165876f9d051922ca0066f4; ?>
<?php unset($__componentOriginalc254754b9d5db91d5165876f9d051922ca0066f4); ?>
<?php endif; ?>
    <?php if (isset($component)) { $__componentOriginalc254754b9d5db91d5165876f9d051922ca0066f4 = $component; } ?>
<?php $component = $__env->getContainer()->make(Illuminate\View\AnonymousComponent::class, ['view' => 'components.danger-alert','data' => []]); ?>
<?php $component->withName('danger-alert'); ?>
<?php if ($component->shouldRender()): ?>
<?php $__env->startComponent($component->resolveView(), $component->data()); ?>
<?php $component->withAttributes([]); ?>
<?php echo $__env->renderComponent(); ?>
<?php endif; ?>
<?php if (isset($__componentOriginalc254754b9d5db91d5165876f9d051922ca0066f4)): ?>
<?php $component = $__componentOriginalc254754b9d5db91d5165876f9d051922ca0066f4; ?>
<?php unset($__componentOriginalc254754b9d5db91d5165876f9d051922ca0066f4); ?>
<?php endif; ?>
    <?php if (isset($component)) { $__componentOriginalc254754b9d5db91d5165876f9d051922ca0066f4 = $component; } ?>
<?php $component = $__env->getContainer()->make(Illuminate\View\AnonymousComponent::class, ['view' => 'components.success-alert','data' => []]); ?>
<?php $component->withName('success-alert'); ?>
<?php if ($component->shouldRender()): ?>
<?php $__env->startComponent($component->resolveView(), $component->data()); ?>
<?php $component->withAttributes([]); ?>
<?php echo $__env->renderComponent(); ?>
<?php endif; ?>
<?php if (isset($__componentOriginalc254754b9d5db91d5165876f9d051922ca0066f4)): ?>
<?php $component = $__componentOriginalc254754b9d5db91d5165876f9d051922ca0066f4; ?>
<?php unset($__componentOriginalc254754b9d5db91d5165876f9d051922ca0066f4); ?>
<?php endif; ?>

    <!-- Back Button -->
    <div class="mb-6">
        <a href="<?php echo e(route('trade.index')); ?>"
           class="inline-flex items-center gap-2 text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition-colors">
            <i data-lucide="arrow-left" class="w-4 h-4"></i>
            Back to Markets
        </a>
    </div>

    <!-- Trading Interface -->
    <div class="grid grid-cols-1 xl:grid-cols-3 gap-6">
        <!-- Chart Section (Left Side) -->
        <div class="xl:col-span-2 space-y-6">
            <!-- Instrument Header -->
            <div class="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-6">
                <div class="flex items-center justify-between">
                    <div class="flex items-center gap-4">
                        <div class="w-12 h-12 rounded-full bg-gray-100 dark:bg-gray-700 flex items-center justify-center">
                            <?php if($instrument->logo): ?>
                                <img src="<?php echo e($instrument->logo); ?>" alt="<?php echo e($instrument->name); ?>" class="w-10 h-10 rounded-full object-cover">
                            <?php else: ?>
                                <span class="text-gray-500 dark:text-gray-400 font-semibold"><?php echo e(substr($instrument->symbol, 0, 2)); ?></span>
                            <?php endif; ?>
                        </div>
                        <div>
                            <h1 class="text-2xl font-bold text-gray-900 dark:text-white"><?php echo e($instrument->name); ?></h1>
                            <p class="text-gray-600 dark:text-gray-400"><?php echo e($instrument->symbol); ?></p>
                        </div>
                    </div>

                    <!-- Price Info -->
                    <div class="text-right">
                        <div class="text-2xl font-bold text-gray-900 dark:text-white">
                            $<?php echo e(number_format($instrument->price, $instrument->price >= 1 ? 2 : 6)); ?>

                        </div>
                        <div class="flex items-center gap-1 <?php echo e($instrument->percent_change_24h >= 0 ? 'text-green-600 dark:text-green-400' : 'text-red-600 dark:text-red-400'); ?>">
                            <?php if($instrument->percent_change_24h >= 0): ?>
                                <i data-lucide="trending-up" class="w-4 h-4"></i>
                            <?php else: ?>
                                <i data-lucide="trending-down" class="w-4 h-4"></i>
                            <?php endif; ?>
                            <span><?php echo e(number_format($instrument->percent_change_24h, 2)); ?>%</span>
                            <span class="text-sm">(<?php echo e($instrument->change >= 0 ? '+' : ''); ?>$<?php echo e(number_format($instrument->change, 2)); ?>)</span>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Chart Widget -->
           <div class="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-6">
    <div class="mb-4">
        <h2 class="text-xl font-semibold text-gray-900 dark:text-white">Price Chart</h2>
    </div>

    <!-- TradingView Chart -->
    <div class="tradingview-widget-container h-[600px]">
        <div class="tradingview-widget-container__widget"></div>
        <script type="text/javascript" src="https://s3.tradingview.com/external-embedding/embed-widget-advanced-chart.js" async>
        {
            "height": 600,
            "symbol": "<?php echo e($instrument->symbol); ?>",
            "interval": "D",
            "timezone": "Etc/UTC",
            "theme": "dark",
            "style": "1",
            "locale": "en",
            "toolbar_bg": "#f1f3f6",
            "enable_publishing": false,
            "allow_symbol_change": true,
            "container_id": "tradingview_chart"
        }
        </script>
    </div>
</div>
           <!-- Market Stats -->
            <div class="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-6">
                <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-4">Market Statistics</h3>

                <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
                    <div class="text-center p-4 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
                        <div class="text-sm text-gray-600 dark:text-gray-400 mb-1">24h High</div>
                        <div class="font-semibold text-gray-900 dark:text-white">
                            $<?php echo e(number_format($instrument->high ?? 0, $instrument->price >= 1 ? 2 : 6)); ?>

                        </div>
                    </div>

                    <div class="text-center p-4 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
                        <div class="text-sm text-gray-600 dark:text-gray-400 mb-1">24h Low</div>
                        <div class="font-semibold text-gray-900 dark:text-white">
                            $<?php echo e(number_format($instrument->low ?? 0, $instrument->price >= 1 ? 2 : 6)); ?>

                        </div>
                    </div>

                    <div class="text-center p-4 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
                        <div class="text-sm text-gray-600 dark:text-gray-400 mb-1">24h Volume</div>
                        <div class="font-semibold text-gray-900 dark:text-white">
                            <?php if($instrument->volume >= 1e9): ?>
                                $<?php echo e(number_format($instrument->volume / 1e9, 1)); ?>B
                            <?php elseif($instrument->volume >= 1e6): ?>
                                $<?php echo e(number_format($instrument->volume / 1e6, 1)); ?>M
                            <?php elseif($instrument->volume >= 1e3): ?>
                                $<?php echo e(number_format($instrument->volume / 1e3, 1)); ?>K
                            <?php else: ?>
                                $<?php echo e(number_format($instrument->volume ?? 0)); ?>

                            <?php endif; ?>
                        </div>
                    </div>

                    <div class="text-center p-4 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
                        <div class="text-sm text-gray-600 dark:text-gray-400 mb-1">Market Cap</div>
                        <div class="font-semibold text-gray-900 dark:text-white">
                            <?php if($instrument->market_cap >= 1e9): ?>
                                $<?php echo e(number_format($instrument->market_cap / 1e9, 1)); ?>B
                            <?php elseif($instrument->market_cap >= 1e6): ?>
                                $<?php echo e(number_format($instrument->market_cap / 1e6, 1)); ?>M
                            <?php else: ?>
                                $<?php echo e(number_format($instrument->market_cap ?? 0)); ?>

                            <?php endif; ?>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Trade History Section -->
            <div class="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-6">
                <div class="mb-6">
                    <h3 class="text-lg font-semibold text-gray-900 dark:text-white">Trade History</h3>
                    <p class="text-sm text-gray-600 dark:text-gray-400 mt-1">Your trading history for <?php echo e($instrument->symbol); ?></p>
                </div>

                <!-- Trade History Tabs -->
                <div class="flex bg-gray-100 dark:bg-gray-700 rounded-lg p-1 mb-6" x-data="{ activeTab: 'open' }">
                    <button @click="activeTab = 'open'"
                            :class="activeTab === 'open' ? 'bg-white dark:bg-gray-600 text-gray-900 dark:text-white shadow-sm' : 'text-gray-600 dark:text-gray-400'"
                            class="flex-1 py-2 px-4 rounded-md font-medium transition-colors text-sm">
                        Open Trades (<?php echo e($openTrades->count()); ?>)
                    </button>
                    <button @click="activeTab = 'closed'"
                            :class="activeTab === 'closed' ? 'bg-white dark:bg-gray-600 text-gray-900 dark:text-white shadow-sm' : 'text-gray-600 dark:text-gray-400'"
                            class="flex-1 py-2 px-4 rounded-md font-medium transition-colors text-sm">
                        Closed Trades (<?php echo e($closedTrades->count()); ?>)
                    </button>
                </div>

                <!-- Open Trades -->
                <div x-show="activeTab === 'open'" x-transition>
                    <?php if($openTrades->count() > 0): ?>
                        <div class="space-y-3">
                            <?php $__currentLoopData = $openTrades; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $trade): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                <div class="bg-gray-50 dark:bg-gray-700/50 rounded-lg p-4 border border-gray-200 dark:border-gray-600">
                                    <div class="flex items-center justify-between">
                                        <div class="flex items-center gap-4">
                                            <div class="w-10 h-10 rounded-full <?php echo e($trade->type === 'Buy' ? 'bg-green-100 dark:bg-green-900/30' : 'bg-red-100 dark:bg-red-900/30'); ?> flex items-center justify-center">
                                                <?php if($trade->type === 'Buy'): ?>
                                                    <i data-lucide="trending-up" class="w-5 h-5 text-green-600 dark:text-green-400"></i>
                                                <?php else: ?>
                                                    <i data-lucide="trending-down" class="w-5 h-5 text-red-600 dark:text-red-400"></i>
                                                <?php endif; ?>
                                            </div>
                                            <div>
                                                <div class="font-semibold text-gray-900 dark:text-white">
                                                    <?php echo e($trade->type); ?> <?php echo e($trade->assets); ?>

                                                </div>
                                                <div class="text-sm text-gray-600 dark:text-gray-400">
                                                    Leverage: 1:<?php echo e($trade->leverage ?? 'N/A'); ?> •
                                                    Duration: <?php echo e($trade->inv_duration ?? 'N/A'); ?>

                                                </div>
                                            </div>
                                        </div>

                                        <div class="text-right">
                                            <div class="font-semibold text-gray-900 dark:text-white">
                                                $<?php echo e(number_format($trade->amount, 2)); ?>

                                            </div>
                                            <div class="text-xs text-gray-500 dark:text-gray-400">
                                                <?php echo e(\Carbon\Carbon::parse($trade->created_at)->format('M d, Y H:i')); ?>

                                            </div>
                                        </div>
                                    </div>

                                    <!-- Progress bar for time remaining -->
                                    <?php if($trade->expire_date): ?>
                                        <?php
                                            $start = \Carbon\Carbon::parse($trade->activated_at ?? $trade->created_at);
                                            $end = \Carbon\Carbon::parse($trade->expire_date);
                                            $now = \Carbon\Carbon::now();
                                            $total = $start->diffInMinutes($end);
                                            $elapsed = $start->diffInMinutes($now);
                                            $progress = $total > 0 ? min(($elapsed / $total) * 100, 100) : 0;
                                            $timeLeft = $now < $end ? $now->diffForHumans($end) : 'Expired';
                                        ?>

                                        <div class="mt-3">
                                            <div class="flex justify-between text-xs text-gray-600 dark:text-gray-400 mb-1">
                                                <span>Progress</span>
                                                <span><?php echo e($timeLeft); ?></span>
                                            </div>
                                            <div class="w-full bg-gray-200 dark:bg-gray-600 rounded-full h-2">
                                                <div class="bg-blue-500 h-2 rounded-full transition-all duration-300" style="width: <?php echo e($progress); ?>%"></div>
                                            </div>
                                        </div>
                                    <?php endif; ?>
                                </div>
                            <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                        </div>
                    <?php else: ?>
                        <div class="text-center py-8">
                            <i data-lucide="chart-line" class="w-12 h-12 text-gray-400 mx-auto mb-3"></i>
                            <h4 class="text-lg font-semibold text-gray-900 dark:text-white mb-2">No Open Trades</h4>
                            <p class="text-gray-600 dark:text-gray-400">You don't have any open trades for <?php echo e($instrument->symbol); ?></p>
                        </div>
                    <?php endif; ?>
                </div>

                <!-- Closed Trades -->
                <div x-show="activeTab === 'closed'" x-transition>
                    <?php if($closedTrades->count() > 0): ?>
                        <div class="space-y-3">
                            <?php $__currentLoopData = $closedTrades; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $trade): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                <div class="bg-gray-50 dark:bg-gray-700/50 rounded-lg p-4 border border-gray-200 dark:border-gray-600">
                                    <div class="flex items-center justify-between">
                                        <div class="flex items-center gap-4">
                                            <div class="w-10 h-10 rounded-full <?php echo e($trade->type === 'Buy' ? 'bg-green-100 dark:bg-green-900/30' : 'bg-red-100 dark:bg-red-900/30'); ?> flex items-center justify-center">
                                                <?php if($trade->type === 'Buy'): ?>
                                                    <i data-lucide="trending-up" class="w-5 h-5 text-green-600 dark:text-green-400"></i>
                                                <?php else: ?>
                                                    <i data-lucide="trending-down" class="w-5 h-5 text-red-600 dark:text-red-400"></i>
                                                <?php endif; ?>
                                            </div>
                                            <div>
                                                <div class="font-semibold text-gray-900 dark:text-white">
                                                    <?php echo e($trade->type); ?> <?php echo e($trade->assets); ?>

                                                </div>
                                                <div class="text-sm text-gray-600 dark:text-gray-400">
                                                    Leverage: 1:<?php echo e($trade->leverage ?? 'N/A'); ?> •
                                                    Duration: <?php echo e($trade->inv_duration ?? 'N/A'); ?>

                                                </div>
                                            </div>
                                        </div>

                                        <div class="text-right">
                                            <div class="font-semibold text-gray-900 dark:text-white">
                                                $<?php echo e(number_format($trade->amount, 2)); ?>

                                            </div>
                                            <div class="text-xs text-gray-500 dark:text-gray-400">
                                                <?php echo e(\Carbon\Carbon::parse($trade->created_at)->format('M d, Y H:i')); ?>

                                            </div>
                                            <div class="text-xs <?php echo e(rand(0,1) ? 'text-green-600 dark:text-green-400' : 'text-red-600 dark:text-red-400'); ?>">
                                                <?php echo e(rand(0,1) ? 'Profit' : 'Loss'); ?>: $<?php echo e(number_format(rand(1, 50), 2)); ?>

                                            </div>
                                        </div>
                                    </div>

                                    <!-- Trade Result -->
                                    <div class="mt-3 pt-3 border-t border-gray-200 dark:border-gray-600">
                                        <div class="text-sm text-gray-600 dark:text-gray-400">
                                            <span>Closed: <?php echo e(\Carbon\Carbon::parse($trade->expire_date ?? $trade->updated_at)->format('M d, Y H:i')); ?></span>
                                            <span class="mx-2">•</span>
                                            <span class="<?php echo e(rand(0,1) ? 'text-green-600 dark:text-green-400' : 'text-red-600 dark:text-red-400'); ?>">
                                                <?php echo e(rand(0,1) ? 'Successful' : 'Unsuccessful'); ?>

                                            </span>
                                        </div>
                                    </div>
                                </div>
                            <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                        </div>

                        <?php if($closedTrades->count() >= 10): ?>
                            <div class="text-center mt-4">
                                <p class="text-sm text-gray-600 dark:text-gray-400">Showing recent 10 trades</p>
                            </div>
                        <?php endif; ?>
                    <?php else: ?>
                        <div class="text-center py-8">
                            <i data-lucide="history" class="w-12 h-12 text-gray-400 mx-auto mb-3"></i>
                            <h4 class="text-lg font-semibold text-gray-900 dark:text-white mb-2">No Trade History</h4>
                            <p class="text-gray-600 dark:text-gray-400">You haven't completed any trades for <?php echo e($instrument->symbol); ?> yet</p>
                        </div>
                    <?php endif; ?>
                </div>
            </div>
        </div>

        <!-- Trading Panel (Right Side) -->
        <div class="xl:col-span-1">
            <div class="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-6 sticky top-8">
                <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-6">Place Order</h3>

                <!-- Order Type Tabs -->
                <div class="flex bg-gray-100 dark:bg-gray-700 rounded-lg p-1 mb-6">
                    <button @click="orderType = 'Buy'"
                            :class="orderType === 'Buy' ? 'bg-green-500 text-white' : 'text-gray-600 dark:text-gray-400'"
                            class="flex-1 py-2 px-4 rounded-md font-medium transition-colors">
                        Buy
                    </button>
                    <button @click="orderType = 'Sell'"
                            :class="orderType === 'Sell' ? 'bg-red-500 text-white' : 'text-gray-600 dark:text-gray-400'"
                            class="flex-1 py-2 px-4 rounded-md font-medium transition-colors">
                        Sell
                    </button>
                </div>

                <!-- Order Form -->
                <form action="<?php echo e(route('joinplan')); ?>" method="POST" class="space-y-4" @submit.prevent="submitOrder">
                    <?php echo csrf_field(); ?>
                    <!-- Hidden fields for instrument data -->
                    <input type="hidden" name="plan_id" value="<?php echo e($instrument->id); ?>">
                    <input type="hidden" name="symbol" value="<?php echo e($instrument->symbol); ?>">
                    <input type="hidden" name="asset" value="<?php echo e($instrument->name); ?>">
                    <input type="hidden" name="instrument_price" value="<?php echo e($instrument->price); ?>">
                    <input type="hidden" name="order_type" x-model="orderType">

                    <!-- Order Type Selector -->
                    <div>
                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Order Type</label>
                        <select x-model="tradeType" name="trade_type" class="w-full px-3 py-2 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent text-gray-900 dark:text-white">
                            <option value="market">Market Order</option>
                            <option value="limit">Limit Order</option>
                            <option value="stop">Stop Order</option>
                        </select>
                    </div>

                    <!-- Leverage Selector -->
                    <div>
                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Leverage</label>
                        <select name="leverage" id="leverage" required
                                class="block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-white focus:ring-2 focus:ring-blue-500">
                            <option disabled selected value="">Leverage</option>
                            <option value="10">1:10</option>
                            <option value="20">1:20</option>
                            <option value="30">1:30</option>
                            <option value="40">1:40</option>
                            <option value="50">1:50</option>
                            <option value="60">1:60</option>
                            <option value="70">1:70</option>
                            <option value="80">1:80</option>
                            <option value="90">1:90</option>
                            <option value="100">1:100</option>
                        </select>
                    </div>

                    <!-- Expiration Selector -->
                    <div>
                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Expiration</label>
                        <select name="expire" id="expire" required
                                class="block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-white focus:ring-2 focus:ring-blue-500">
                            <option disabled selected value="">Expiration</option>
                            <option value="1 Minutes">1 Minute</option>
                            <option value="5 Minutes">5 Minutes</option>
                            <option value="15 Minutes">15 Minutes</option>
                            <option value="30 Minutes">30 Minutes</option>
                            <option value="60 Minutes">1 Hour</option>
                            <option value="4 Hours">4 Hours</option>
                            <option value="1 Days">1 Day</option>
                            <option value="2 Days">2 Days</option>
                            <option value="7 Days">7 Days</option>
                        </select>
                    </div>

                    <!-- Price Input (for limit/stop orders) -->
                    <div x-show="tradeType !== 'market'">
                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Price ($)</label>
                        <input type="number"
                               x-model="price"
                               name="price"
                               step="0.01"
                               min="0"
                               placeholder="<?php echo e($instrument->price); ?>"
                               class="w-full px-3 py-2 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent text-gray-900 dark:text-white">
                    </div>

                    <!-- Amount Input (Total Investment) -->
                    <div>
                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Investment Amount ($)</label>
                        <input type="number"
                               x-model="amount"
                               name="amount"
                               step="0.01"
                               min="0"
                               placeholder="0.00"
                               required
                               class="w-full px-3 py-2 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent text-gray-900 dark:text-white">
                    </div>                    <!-- Investment Summary -->
                    <div class="bg-gray-50 dark:bg-gray-700/50 rounded-lg p-4">
                        <div class="flex justify-between items-center mb-2">
                            <span class="text-sm text-gray-600 dark:text-gray-400">Investment Amount:</span>
                            <span class="font-semibold text-gray-900 dark:text-white" x-text="formatAmount()"></span>
                        </div>
                        <div class="flex justify-between items-center mb-2">
                            <span class="text-sm text-gray-600 dark:text-gray-400">Units:</span>
                            <span class="text-sm text-gray-900 dark:text-white" x-text="formatUnits()"></span>
                        </div>
                        <div class="flex justify-between items-center">
                            <span class="text-sm text-gray-600 dark:text-gray-400">Available Balance:</span>
                            <span class="text-sm text-gray-900 dark:text-white">$<?php echo e(number_format(auth()->user()->account_bal ?? 0, 2)); ?></span>
                        </div>
                    </div>

                    <!-- Submit Button -->
                    <button type="submit"
                            :disabled="!amount || amount <= 0 || loading"
                            :class="orderType === 'Buy' ? 'bg-green-600 hover:bg-green-700 disabled:bg-green-300' : 'bg-red-600 hover:bg-red-700 disabled:bg-red-300'"
                            class="w-full py-3 px-4 text-white font-semibold rounded-lg transition-colors disabled:cursor-not-allowed flex items-center justify-center gap-2">
                        <template x-if="loading">
                            <div class="animate-spin rounded-full h-4 w-4 border-b-2 border-white"></div>
                        </template>
                        <span x-text="loading ? 'Processing...' : (orderType === 'Buy' ? 'Buy ' + '<?php echo e($instrument->symbol); ?>' : 'Sell ' + '<?php echo e($instrument->symbol); ?>')"></span>
                    </button>
                </form>

                <!-- Quick Amount Buttons -->
                <div class="mt-4">
                    <div class="text-sm text-gray-600 dark:text-gray-400 mb-2">Quick amounts:</div>
                    <div class="grid grid-cols-4 gap-2">
                        <button @click="setQuickAmount(25)" class="py-1 px-2 text-xs bg-gray-100 dark:bg-gray-700 hover:bg-gray-200 dark:hover:bg-gray-600 rounded text-gray-700 dark:text-gray-300 transition-colors">25%</button>
                        <button @click="setQuickAmount(50)" class="py-1 px-2 text-xs bg-gray-100 dark:bg-gray-700 hover:bg-gray-200 dark:hover:bg-gray-600 rounded text-gray-700 dark:text-gray-300 transition-colors">50%</button>
                        <button @click="setQuickAmount(75)" class="py-1 px-2 text-xs bg-gray-100 dark:bg-gray-700 hover:bg-gray-200 dark:hover:bg-gray-600 rounded text-gray-700 dark:text-gray-300 transition-colors">75%</button>
                        <button @click="setQuickAmount(100)" class="py-1 px-2 text-xs bg-gray-100 dark:bg-gray-700 hover:bg-gray-200 dark:hover:bg-gray-600 rounded text-gray-700 dark:text-gray-300 transition-colors">Max</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
function tradingSingle() {
    return {
        instrument: <?php echo json_encode($instrument, 15, 512) ?>,
        orderType: 'Buy',
        tradeType: 'market',
        amount: '',
        price: '',
        loading: false,

        formatAmount() {
            if (!this.amount) return '$0.00';
            const amount = parseFloat(this.amount);
            return '$' + amount.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
        },

        formatUnits() {
            if (!this.amount) return '0';
            const amount = parseFloat(this.amount);
            const price = this.tradeType === 'market' ? this.instrument.price : (this.price || this.instrument.price);
            const units = amount / parseFloat(price);
            return units.toLocaleString('en-US', { minimumFractionDigits: 6, maximumFractionDigits: 6 });
        },

        setQuickAmount(percentage) {
            const balance = <?php echo e(auth()->user()->account_bal ?? 0); ?>;
            this.amount = (balance * percentage / 100).toFixed(2);
        },

        submitOrder() {
            if (!this.amount || this.amount <= 0) {
                Swal.fire({
                    icon: 'error',
                    title: 'Invalid Amount',
                    text: 'Please enter a valid amount to trade.',
                    confirmButtonColor: '#3B82F6'
                });
                return;
            }

            const leverage = document.getElementById('leverage').value;
            const expire = document.getElementById('expire').value;

            if (!leverage) {
                Swal.fire({
                    icon: 'error',
                    title: 'Select Leverage',
                    text: 'Please select a leverage ratio.',
                    confirmButtonColor: '#3B82F6'
                });
                return;
            }

            if (!expire) {
                Swal.fire({
                    icon: 'error',
                    title: 'Select Expiration',
                    text: 'Please select an expiration time.',
                    confirmButtonColor: '#3B82F6'
                });
                return;
            }

            const total = this.formatAmount();
            const units = this.formatUnits();
            const action = this.orderType.toUpperCase();

            Swal.fire({
                title: `Confirm ${action} Order`,
                html: `
                    <div class="text-left space-y-2">
                        <p><strong>Instrument:</strong> ${this.instrument.symbol}</p>
                        <p><strong>Action:</strong> ${action}</p>
                        <p><strong>Investment Amount:</strong> ${total}</p>
                        <p><strong>Units:</strong> ${units}</p>
                        <p><strong>Leverage:</strong> 1:${leverage}</p>
                        <p><strong>Expiration:</strong> ${expire}</p>
                    </div>
                `,
                icon: 'question',
                showCancelButton: true,
                confirmButtonColor: this.orderType === 'Buy' ? '#10B981' : '#EF4444',
                cancelButtonColor: '#6B7280',
                confirmButtonText: `Yes, ${action}!`,
                cancelButtonText: 'Cancel'
            }).then((result) => {
                if (result.isConfirmed) {
                    this.loading = true;

                    // Show processing message
                    Swal.fire({
                        title: 'Processing Order...',
                        text: 'Please wait while we process your trade.',
                        allowOutsideClick: false,
                        allowEscapeKey: false,
                        showConfirmButton: false,
                        didOpen: () => {
                            Swal.showLoading();
                        }
                    });

                    // Submit the form
                    this.$el.closest('form').submit();
                }
            });
        },        init() {
            // Initialize price for limit/stop orders
            this.price = this.instrument.price;

            // Initialize Lucide icons
            this.$nextTick(() => {
                if (typeof lucide !== 'undefined') {
                    lucide.createIcons();
                }
            });
        }
    }
}

// Re-initialize icons after Alpine updates
document.addEventListener('alpine:updated', () => {
    if (typeof lucide !== 'undefined') {
        lucide.createIcons();
    }
});
</script>

<?php $__env->stopSection(); ?>

<?php echo $__env->make('layouts.dasht', \Illuminate\Support\Arr::except(get_defined_vars(), ['__data', '__path']))->render(); ?><?php /**PATH /home/elitemaxpro/trade.elitemaxpro.click/resources/views/user/trade/single.blade.php ENDPATH**/ ?>