<?php $__env->startSection('title', $title); ?>
<?php $__env->startSection('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="text-center">
                <h1 class="text-2xl font-medium text-gray-900 dark:text-white">Trading History</h1>
                <p class="mt-2 text-gray-600 dark:text-gray-400">Track your trading activities</p>
            </div>
        </div>
    </div>

    <!-- Alert Messages -->
    <div class="max-w-7xl mx-auto px-6 py-4">
        <?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; ?>
    </div>

    <div class="max-w-7xl mx-auto px-6 py-8">
        <!-- Trading History Card -->
        <div class="bg-white dark:bg-gray-900 rounded-lg border border-gray-100 dark:border-gray-800">
            <!-- Header -->
            <div class="p-6 border-b border-gray-100 dark:border-gray-800" x-data="{
                stats: {
                    total: <?php echo e(isset($t_history) ? $t_history->total() : 0); ?>,
                    wins: <?php echo e(isset($t_history) ? $t_history->where('type', 'WIN')->count() : 0); ?>,
                    losses: <?php echo e(isset($t_history) ? $t_history->where('type', 'LOSE')->count() : 0); ?>,
                    trades: <?php echo e(isset($t_history) ? $t_history->whereIn('type', ['Buy', 'Sell'])->count() : 0); ?>

                }
            }" x-init="$store.tradeFilter = { value: 'all' }" x-cloak>
                <div class="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-4">
                    <div>
                        <h2 class="text-lg font-medium text-gray-900 dark:text-white mb-1">Trading Overview</h2>
                        <p class="text-gray-600 dark:text-gray-400 text-sm">Monitor your trading performance</p>
                    </div>

                    <!-- Quick Stats -->
                    <div class="grid grid-cols-2 lg:grid-cols-4 gap-4">
                        <div class="text-center">
                            <div class="text-xl font-medium text-gray-900 dark:text-white" x-text="stats.total"></div>
                            <div class="text-xs text-gray-500 dark:text-gray-400">Total</div>
                        </div>
                        <div class="text-center">
                            <div class="text-xl font-medium text-green-600 dark:text-green-400" x-text="stats.wins"></div>
                            <div class="text-xs text-gray-500 dark:text-gray-400">Wins</div>
                        </div>
                        <div class="text-center">
                            <div class="text-xl font-medium text-red-600 dark:text-red-400" x-text="stats.losses"></div>
                            <div class="text-xs text-gray-500 dark:text-gray-400">Losses</div>
                        </div>
                        <div class="text-center">
                            <div class="text-xl font-medium text-blue-600 dark:text-blue-400" x-text="stats.trades"></div>
                            <div class="text-xs text-gray-500 dark:text-gray-400">Active</div>
                        </div>
                    </div>
                </div>

                <!-- Filter Buttons -->
                <div class="flex flex-wrap gap-2 mt-4">
                    <button @click="$store.tradeFilter.value = 'all'"
                            :class="$store.tradeFilter.value === 'all' ? 'bg-blue-600 text-white' : 'bg-gray-50 dark:bg-gray-800 text-gray-600 dark:text-gray-400'"
                            class="px-3 py-2 rounded-lg text-sm font-medium transition-colors">
                        All
                    </button>
                    <button @click="$store.tradeFilter.value = 'WIN'"
                            :class="$store.tradeFilter.value === 'WIN' ? 'bg-green-600 text-white' : 'bg-gray-50 dark:bg-gray-800 text-gray-600 dark:text-gray-400'"
                            class="px-3 py-2 rounded-lg text-sm font-medium transition-colors">
                        Wins
                    </button>
                    <button @click="$store.tradeFilter.value = 'LOSE'"
                            :class="$store.tradeFilter.value === 'LOSE' ? 'bg-red-600 text-white' : 'bg-gray-50 dark:bg-gray-800 text-gray-600 dark:text-gray-400'"
                            class="px-3 py-2 rounded-lg text-sm font-medium transition-colors">
                        Losses
                    </button>
                    <button @click="$store.tradeFilter.value = 'Buy'"
                            :class="$store.tradeFilter.value === 'Buy' ? 'bg-blue-600 text-white' : 'bg-gray-50 dark:bg-gray-800 text-gray-600 dark:text-gray-400'"
                            class="px-3 py-2 rounded-lg text-sm font-medium transition-colors">
                        Buy
                    </button>
                    <button @click="$store.tradeFilter.value = 'Sell'"
                            :class="$store.tradeFilter.value === 'Sell' ? 'bg-orange-600 text-white' : 'bg-gray-50 dark:bg-gray-800 text-gray-600 dark:text-gray-400'"
                            class="px-3 py-2 rounded-lg text-sm font-medium transition-colors">
                        Sell
                    </button>
                </div>
            </div>

            <!-- Trading History List -->
            <div class="p-6" x-cloak>
                <div class="space-y-3">
                    <?php if(isset($t_history) && $t_history->count() > 0): ?>
                        <?php $__currentLoopData = $t_history; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $history): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                            <div class="trading-item bg-gray-50 dark:bg-gray-800 rounded-lg p-4 border border-gray-100 dark:border-gray-700"
                                 x-show="$store.tradeFilter.value === 'all' || $store.tradeFilter.value === '<?php echo e($history->type); ?>'"
                                 x-transition>

                                <div class="flex items-center justify-between">
                                    <!-- Trade Details -->
                                    <div class="flex items-center gap-3">
                                        <!-- Icon -->
                                        <div class="flex-shrink-0">
                                            <?php if($history->type == 'LOSE'): ?>
                                                <div class="w-8 h-8 bg-red-100 dark:bg-red-900/30 rounded-full flex items-center justify-center">
                                                    <svg class="w-4 h-4 text-red-600 dark:text-red-400" fill="currentColor" viewBox="0 0 20 20">
                                                        <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path>
                                                    </svg>
                                                </div>
                                            <?php elseif($history->type == 'WIN'): ?>
                                                <div class="w-8 h-8 bg-green-100 dark:bg-green-900/30 rounded-full flex items-center justify-center">
                                                    <svg class="w-4 h-4 text-green-600 dark:text-green-400" fill="currentColor" viewBox="0 0 20 20">
                                                        <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path>
                                                    </svg>
                                                </div>
                                            <?php elseif($history->type == 'Buy'): ?>
                                                <div class="w-8 h-8 bg-blue-100 dark:bg-blue-900/30 rounded-full flex items-center justify-center">
                                                    <svg class="w-4 h-4 text-blue-600 dark:text-blue-400" fill="currentColor" viewBox="0 0 20 20">
                                                        <path fill-rule="evenodd" d="3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z" clip-rule="evenodd"></path>
                                                        <path fill-rule="evenodd" d="9 3a1 1 0 012 0v8.586l2.293-2.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 111.414-1.414L9 11.586V3z" clip-rule="evenodd"></path>
                                                    </svg>
                                                </div>
                                            <?php else: ?>
                                                <div class="w-8 h-8 bg-orange-100 dark:bg-orange-900/30 rounded-full flex items-center justify-center">
                                                    <svg class="w-4 h-4 text-orange-600 dark:text-orange-400" fill="currentColor" viewBox="0 0 20 20">
                                                        <path fill-rule="evenodd" d="17 10a1 1 0 01-1 1H4a1 1 0 110-2h12a1 1 0 011 1z" clip-rule="evenodd"></path>
                                                        <path fill-rule="evenodd" d="11 17a1 1 0 01-2 0V8.414L6.707 10.707a1 1 0 01-1.414-1.414l4-4a1 1 0 011.414 0l4 4a1 1 0 01-1.414 1.414L11 8.414V17z" clip-rule="evenodd"></path>
                                                    </svg>
                                                </div>
                                            <?php endif; ?>
                                        </div>

                                        <!-- Trade Info -->
                                        <div class="min-w-0 flex-1">
                                            <div class="flex items-center gap-2">
                                                <h3 class="text-sm font-medium text-gray-900 dark:text-white truncate">
                                                    <?php echo e($history->plan); ?>

                                                </h3>
                                                <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium
                                                    <?php if($history->type == 'LOSE'): ?> bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-400
                                                    <?php elseif($history->type == 'WIN'): ?> bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-400
                                                    <?php elseif($history->type == 'Buy'): ?> bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-400
                                                    <?php else: ?> bg-orange-100 text-orange-800 dark:bg-orange-900/30 dark:text-orange-400 <?php endif; ?>">
                                                    <?php echo e($history->type); ?>

                                                </span>
                                            </div>
                                            <p class="text-xs text-gray-500 dark:text-gray-400">
                                                <?php echo e($history->created_at->format('M d, Y • g:i A')); ?>

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

                                    <!-- Amount -->
                                    <div class="text-right">
                                        <?php if($history->type == 'LOSE'): ?>
                                            <div class="text-sm font-medium text-red-600 dark:text-red-400">
                                                -<?php echo e(Auth::user()->currency); ?> <?php echo e(number_format($history->amount, 2)); ?>

                                            </div>
                                        <?php elseif($history->type == 'WIN'): ?>
                                            <div class="text-sm font-medium text-green-600 dark:text-green-400">
                                                +<?php echo e(Auth::user()->currency); ?> <?php echo e(number_format($history->amount, 2)); ?>

                                            </div>
                                        <?php else: ?>
                                            <div class="text-sm font-medium text-gray-900 dark:text-white">
                                                <?php echo e(Auth::user()->currency); ?> <?php echo e(number_format($history->amount, 2)); ?>

                                            </div>
                                        <?php endif; ?>
                                        <?php if($history->leverage): ?>
                                            <div class="text-xs text-gray-500 dark:text-gray-400">
                                                1:<?php echo e($history->leverage); ?>

                                            </div>
                                        <?php endif; ?>
                                    </div>
                                </div>
                            </div>
                        <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                    <?php else: ?>
                        <!-- Empty State -->
                        <div class="text-center py-12">
                            <div class="w-16 h-16 bg-gray-100 dark:bg-gray-800 rounded-full flex items-center justify-center mx-auto mb-4">
                                <svg class="w-8 h-8 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"></path>
                                </svg>
                            </div>
                            <h3 class="text-lg font-medium text-gray-900 dark:text-white mb-1">No trading history</h3>
                            <p class="text-gray-600 dark:text-gray-400 text-sm mb-4">
                                Your trading activity will appear here
                            </p>
                            <a href="<?php echo e(route('dashboard')); ?>"
                               class="inline-flex items-center gap-2 px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-lg text-sm font-medium transition-colors">
                                <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
                                    <path fill-rule="evenodd" d="M9.707 16.707a1 1 0 01-1.414 0l-6-6a1 1 0 010-1.414l6-6a1 1 0 011.414 1.414L5.414 9H17a1 1 0 110 2H5.414l4.293 4.293a1 1 0 010 1.414z" clip-rule="evenodd"></path>
                                </svg>
                                Back to Dashboard
                            </a>
                        </div>
                    <?php endif; ?>
                </div>

                <!-- Modern Pagination -->
                <?php if(isset($t_history) && $t_history->hasPages()): ?>
                    <div class="mt-8 px-6 py-4 bg-gray-50 dark:bg-gray-800 rounded-xl border border-gray-100 dark:border-gray-700">
                        <div class="flex flex-col sm:flex-row items-center justify-between gap-4">
                            <!-- Pagination Info -->
                            <div class="flex items-center gap-2 text-sm text-gray-600 dark:text-gray-400">
                                <svg class="w-4 h-4 text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
                                </svg>
                                <span>Showing</span>
                                <span class="font-medium text-gray-900 dark:text-white"><?php echo e($t_history->firstItem() ?? 0); ?></span>
                                <span>to</span>
                                <span class="font-medium text-gray-900 dark:text-white"><?php echo e($t_history->lastItem() ?? 0); ?></span>
                                <span>of</span>
                                <span class="font-medium text-gray-900 dark:text-white"><?php echo e($t_history->total()); ?></span>
                                <span>trades</span>
                            </div>

                            <!-- Pagination Controls -->
                            <div class="flex items-center gap-1">
                                <!-- Previous Button -->
                                <?php if($t_history->onFirstPage()): ?>
                                    <div class="px-3 py-2 text-gray-400 dark:text-gray-600 cursor-not-allowed rounded-lg">
                                        <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path>
                                        </svg>
                                    </div>
                                <?php else: ?>
                                    <a href="<?php echo e($t_history->previousPageUrl()); ?>"
                                       class="px-3 py-2 text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white hover:bg-white dark:hover:bg-gray-700 rounded-lg transition-all duration-200 flex items-center gap-1 group">
                                        <svg class="w-4 h-4 group-hover:-translate-x-0.5 transition-transform" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path>
                                        </svg>
                                        <span class="hidden sm:inline">Previous</span>
                                    </a>
                                <?php endif; ?>

                                <!-- Page Numbers -->
                                <div class="flex items-center gap-1 mx-2">
                                    <?php
                                        $start = max(1, $t_history->currentPage() - 2);
                                        $end = min($t_history->lastPage(), $t_history->currentPage() + 2);
                                    ?>

                                    <?php if($start > 1): ?>
                                        <a href="<?php echo e($t_history->url(1)); ?>"
                                           class="px-3 py-2 text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white hover:bg-white dark:hover:bg-gray-700 rounded-lg transition-all duration-200 text-sm font-medium">
                                            1
                                        </a>
                                        <?php if($start > 2): ?>
                                            <span class="px-2 text-gray-400 dark:text-gray-600 text-sm">...</span>
                                        <?php endif; ?>
                                    <?php endif; ?>

                                    <?php for($page = $start; $page <= $end; $page++): ?>
                                        <?php if($page == $t_history->currentPage()): ?>
                                            <div class="px-3 py-2 bg-blue-600 text-white rounded-lg shadow-md font-medium text-sm relative overflow-hidden">
                                                <div class="absolute inset-0 bg-gradient-to-r from-blue-600 to-blue-700"></div>
                                                <span class="relative"><?php echo e($page); ?></span>
                                            </div>
                                        <?php else: ?>
                                            <a href="<?php echo e($t_history->url($page)); ?>"
                                               class="px-3 py-2 text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white hover:bg-white dark:hover:bg-gray-700 rounded-lg transition-all duration-200 text-sm font-medium">
                                                <?php echo e($page); ?>

                                            </a>
                                        <?php endif; ?>
                                    <?php endfor; ?>

                                    <?php if($end < $t_history->lastPage()): ?>
                                        <?php if($end < $t_history->lastPage() - 1): ?>
                                            <span class="px-2 text-gray-400 dark:text-gray-600 text-sm">...</span>
                                        <?php endif; ?>
                                        <a href="<?php echo e($t_history->url($t_history->lastPage())); ?>"
                                           class="px-3 py-2 text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white hover:bg-white dark:hover:bg-gray-700 rounded-lg transition-all duration-200 text-sm font-medium">
                                            <?php echo e($t_history->lastPage()); ?>

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

                                <!-- Next Button -->
                                <?php if($t_history->hasMorePages()): ?>
                                    <a href="<?php echo e($t_history->nextPageUrl()); ?>"
                                       class="px-3 py-2 text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white hover:bg-white dark:hover:bg-gray-700 rounded-lg transition-all duration-200 flex items-center gap-1 group">
                                        <span class="hidden sm:inline">Next</span>
                                        <svg class="w-4 h-4 group-hover:translate-x-0.5 transition-transform" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
                                        </svg>
                                    </a>
                                <?php else: ?>
                                    <div class="px-3 py-2 text-gray-400 dark:text-gray-600 cursor-not-allowed rounded-lg">
                                        <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
                                        </svg>
                                    </div>
                                <?php endif; ?>
                            </div>

                            <!-- Mobile Page Selector -->
                            <div class="sm:hidden w-full">
                                <div class="flex items-center gap-2">
                                    <label class="text-sm text-gray-600 dark:text-gray-400">Go to page:</label>
                                    <select onchange="window.location.href = this.value"
                                            class="flex-1 px-3 py-2 bg-white dark:bg-gray-700 border border-gray-200 dark:border-gray-600 rounded-lg text-gray-900 dark:text-white text-sm focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-colors">
                                        <?php for($page = 1; $page <= $t_history->lastPage(); $page++): ?>
                                            <option value="<?php echo e($t_history->url($page)); ?>"
                                                    <?php echo e($page == $t_history->currentPage() ? 'selected' : ''); ?>>
                                                Page <?php echo e($page); ?> of <?php echo e($t_history->lastPage()); ?>

                                            </option>
                                        <?php endfor; ?>
                                    </select>
                                </div>
                            </div>
                        </div>

                        <!-- Performance Metrics -->
                        <div class="mt-4 pt-4 border-t border-gray-200 dark:border-gray-700">
                            <div class="flex flex-wrap items-center gap-4 text-xs text-gray-500 dark:text-gray-400">
                                <div class="flex items-center gap-1">
                                    <div class="w-2 h-2 bg-blue-500 rounded-full"></div>
                                    <span><?php echo e($t_history->perPage()); ?> items per page</span>
                                </div>
                                <div class="flex items-center gap-1">
                                    <div class="w-2 h-2 bg-green-500 rounded-full"></div>
                                    <span>Page <?php echo e($t_history->currentPage()); ?> of <?php echo e($t_history->lastPage()); ?></span>
                                </div>
                                <?php if($t_history->hasMorePages()): ?>
                                    <div class="flex items-center gap-1">
                                        <div class="w-2 h-2 bg-amber-500 rounded-full animate-pulse"></div>
                                        <span><?php echo e($t_history->total() - $t_history->lastItem()); ?> more items</span>
                                    </div>
                                <?php endif; ?>
                            </div>
                        </div>
                    </div>
                <?php endif; ?>
            </div>
        </div>
    </div>
</div>

<?php $__env->startPush('scripts'); ?>
<script>
    // Initialize Alpine.js store for filters
    document.addEventListener('alpine:init', () => {
        Alpine.store('tradeFilter', {
            value: 'all'
        });
    });
</script>
<style>
    [x-cloak] {
        display: none !important;
    }
</style>
<?php $__env->stopPush(); ?>

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

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