<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="csrf-token" content="<?php echo e(csrf_token()); ?>">
    <title>Voucher Usage - <?php echo e($voucher->code); ?> - Ryll Store</title>
    <link rel="icon" type="image/webp" href="<?php echo e(asset('images/ryll.webp')); ?>">
    
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js" defer></script>
    <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&display=swap" rel="stylesheet">
    
    <style>
        .font-orbitron { font-family: 'Orbitron', sans-serif; }
        
        [x-cloak] { display: none !important; }
        
        body { background: linear-gradient(135deg, #0a0e27 0%, #1a1f3a 100%); }
        
        .glow-border { 
            box-shadow: 0 0 20px rgba(6, 182, 212, 0.3); 
            border: 1px solid rgba(6, 182, 212, 0.5); 
        }
        
        .card-stat { 
            background: linear-gradient(135deg, rgba(6, 182, 212, 0.1) 0%, rgba(147, 51, 234, 0.1) 100%); 
            backdrop-filter: blur(10px); 
        }

        /* Mobile responsive */
        @media (max-width: 768px) {
            .desktop-table { display: none; }
            .mobile-cards { display: block; }
        }
        
        @media (min-width: 769px) {
            .desktop-table { display: table; }
            .mobile-cards { display: none; }
        }
    </style>
</head>
<body class="min-h-screen text-white" x-data="usageManager()">

<!-- Navbar -->
<?php echo $__env->make('components.admin-navbar', array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?>

<div class="max-w-7xl mx-auto px-4 py-8">
    
    <!-- Header -->
    <div class="mb-8">
        <a href="<?php echo e(route('account.vouchers.index')); ?>" class="text-cyan-400 hover:text-cyan-300 mb-4 inline-flex items-center gap-2 text-sm md:text-base">
            <i class="fas fa-arrow-left"></i>Back to Vouchers
        </a>
        <h1 class="text-2xl md:text-3xl font-bold font-orbitron mb-2">
            <i class="fas fa-chart-bar text-purple-400 mr-3"></i>VOUCHER USAGE ANALYTICS
        </h1>
        <p class="text-sm md:text-base text-gray-400">
            Tracking usage for voucher: 
            <span class="text-cyan-400 font-mono font-bold"><?php echo e($voucher->code); ?></span>
        </p>
    </div>
    
    <!-- ✅ VOUCHER INFO CARD (Enhanced) -->
    <div class="card-stat glow-border rounded-xl md:rounded-2xl p-4 md:p-6 mb-8">
        <div class="grid grid-cols-2 md:grid-cols-4 gap-4 md:gap-6">
            <div>
                <p class="text-gray-400 text-[10px] md:text-sm uppercase mb-2">VOUCHER CODE</p>
                <div class="flex items-center gap-2">
                    <p class="text-lg md:text-2xl font-bold font-mono text-cyan-400"><?php echo e($voucher->code); ?></p>
                    <button @click="copyCode('<?php echo e($voucher->code); ?>')" 
                            class="text-gray-500 hover:text-cyan-400 transition text-sm">
                        <i class="fas fa-copy"></i>
                    </button>
                </div>
            </div>
            
            <div>
                <p class="text-gray-400 text-[10px] md:text-sm uppercase mb-2">DISCOUNT</p>
                <?php if($voucher->type === 'percentage'): ?>
                <p class="text-lg md:text-2xl font-bold text-yellow-400"><?php echo e($voucher->value); ?>%</p>
                <?php if($voucher->max_discount): ?>
                <p class="text-xs text-gray-500">Max: Rp <?php echo e(number_format($voucher->max_discount, 0, ',', '.')); ?></p>
                <?php endif; ?>
                <?php else: ?>
                <p class="text-lg md:text-2xl font-bold text-green-400">Rp <?php echo e(number_format($voucher->value, 0, ',', '.')); ?></p>
                <?php endif; ?>
            </div>
            
            <div>
                <p class="text-gray-400 text-[10px] md:text-sm uppercase mb-2">USAGE</p>
                <p class="text-lg md:text-2xl font-bold">
                    <span class="text-cyan-400"><?php echo e($voucher->used_count); ?></span>
                    <span class="text-gray-500">/ <?php echo e($voucher->max_usage > 0 ? $voucher->max_usage : '∞'); ?></span>
                </p>
                <?php if($voucher->max_usage > 0): ?>
                <div class="mt-2 h-2 bg-gray-700 rounded-full overflow-hidden">
                    <div class="h-full transition-all duration-500" 
                         :class="(<?php echo e($voucher->used_count); ?> / <?php echo e($voucher->max_usage); ?> * 100) >= 80 ? 'bg-red-500' : 'bg-gradient-to-r from-cyan-500 to-blue-600'" 
                         style="width: <?php echo e(min(($voucher->used_count / $voucher->max_usage) * 100, 100)); ?>%"></div>
                </div>
                <?php endif; ?>
            </div>
            
            <div>
                <p class="text-gray-400 text-[10px] md:text-sm uppercase mb-2">STATUS</p>
                <?php if($voucher->is_active): ?>
                <span class="px-3 md:px-4 py-1 md:py-2 bg-green-500/20 text-green-400 rounded-full text-xs md:text-sm inline-block">
                    <i class="fas fa-check-circle"></i> Active
                </span>
                <?php else: ?>
                <span class="px-3 md:px-4 py-1 md:py-2 bg-red-500/20 text-red-400 rounded-full text-xs md:text-sm inline-block">
                    <i class="fas fa-times-circle"></i> Inactive
                </span>
                <?php endif; ?>
            </div>
        </div>
    </div>

    <!-- ✅ SUMMARY STATS (Top) -->
    <div class="grid grid-cols-2 md:grid-cols-4 gap-3 md:gap-6 mb-8">
        <div class="bg-gray-900 rounded-xl p-4 md:p-6 border border-cyan-500/20">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-gray-400 text-[10px] md:text-sm mb-1">Total Uses</p>
                    <p class="text-2xl md:text-3xl font-bold text-cyan-400"><?php echo e($usage->total()); ?></p>
                </div>
                <div class="w-10 h-10 md:w-12 md:h-12 bg-cyan-500/20 rounded-lg flex items-center justify-center">
                    <i class="fas fa-hashtag text-cyan-400 text-lg md:text-xl"></i>
                </div>
            </div>
        </div>
        
        <div class="bg-gray-900 rounded-xl p-4 md:p-6 border border-cyan-500/20">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-gray-400 text-[10px] md:text-sm mb-1">Total Discount</p>
                    <?php
                        $totalDiscount = DB::table('voucher_usage')
                            ->where('voucher_id', $voucher->id)
                            ->sum('discount_amount');
                    ?>
                    <p class="text-lg md:text-2xl font-bold text-green-400">
                        <?php echo e(number_format($totalDiscount / 1000, 0)); ?>K
                    </p>
                </div>
                <div class="w-10 h-10 md:w-12 md:h-12 bg-green-500/20 rounded-lg flex items-center justify-center">
                    <i class="fas fa-coins text-green-400 text-lg md:text-xl"></i>
                </div>
            </div>
        </div>

        <div class="bg-gray-900 rounded-xl p-4 md:p-6 border border-cyan-500/20">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-gray-400 text-[10px] md:text-sm mb-1">Avg Discount</p>
                    <?php
                        $avgDiscount = DB::table('voucher_usage')
                            ->where('voucher_id', $voucher->id)
                            ->avg('discount_amount');
                    ?>
                    <p class="text-lg md:text-2xl font-bold text-yellow-400">
                        <?php echo e(number_format($avgDiscount ?? 0, 0)); ?>

                    </p>
                </div>
                <div class="w-10 h-10 md:w-12 md:h-12 bg-yellow-500/20 rounded-lg flex items-center justify-center">
                    <i class="fas fa-chart-line text-yellow-400 text-lg md:text-xl"></i>
                </div>
            </div>
        </div>

        <div class="bg-gray-900 rounded-xl p-4 md:p-6 border border-cyan-500/20">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-gray-400 text-[10px] md:text-sm mb-1">Unique Users</p>
                    <?php
                        $uniqueUsers = DB::table('voucher_usage')
                            ->where('voucher_id', $voucher->id)
                            ->distinct('customer_email')
                            ->count('customer_email');
                    ?>
                    <p class="text-2xl md:text-3xl font-bold text-purple-400"><?php echo e($uniqueUsers); ?></p>
                </div>
                <div class="w-10 h-10 md:w-12 md:h-12 bg-purple-500/20 rounded-lg flex items-center justify-center">
                    <i class="fas fa-users text-purple-400 text-lg md:text-xl"></i>
                </div>
            </div>
        </div>
    </div>

    <!-- ✅ USAGE CHART -->
    <div class="bg-gray-900/50 glow-border rounded-xl md:rounded-2xl p-4 md:p-6 mb-8">
        <div class="flex flex-col md:flex-row items-start md:items-center justify-between mb-6 gap-4">
            <h3 class="text-base md:text-lg font-bold flex items-center gap-2">
                <i class="fas fa-chart-area text-cyan-400"></i>
                Usage Trend (Last 30 Days)
            </h3>
            
            <select @change="updateChartPeriod($event.target.value)" 
                    class="px-4 py-2 bg-gray-800 border border-gray-700 rounded-lg text-white text-sm focus:border-cyan-500 focus:outline-none">
                <option value="7">Last 7 Days</option>
                <option value="30" selected>Last 30 Days</option>
                <option value="90">Last 90 Days</option>
            </select>
        </div>
        
        <div class="relative h-64 md:h-80">
            <canvas id="usageChart"></canvas>
        </div>
    </div>

    <!-- ✅ FILTERS & EXPORT -->
    <div class="bg-gray-900/50 glow-border rounded-xl md:rounded-2xl p-4 md:p-6 mb-6">
        <div class="flex flex-col md:flex-row items-start md:items-center justify-between gap-4">
            <div class="flex-1 w-full md:w-auto">
                <div class="relative">
                    <i class="fas fa-search absolute left-4 top-1/2 -translate-y-1/2 text-gray-500"></i>
                    <input type="text" 
                           x-model="searchQuery"
                           @input.debounce.300ms="filterUsage()"
                           placeholder="Search by transaction ID or email..."
                           class="w-full pl-12 pr-4 py-2 md:py-3 bg-gray-800 border border-gray-700 rounded-lg text-white text-sm focus:border-cyan-500 focus:outline-none focus:ring-2 focus:ring-cyan-500/50">
                </div>
            </div>

            <div class="flex flex-wrap gap-2 w-full md:w-auto">
                <button @click="exportToCSV()" 
                        class="flex-1 md:flex-none px-4 py-2 bg-green-600 hover:bg-green-700 rounded-lg font-bold transition text-sm">
                    <i class="fas fa-file-csv mr-2"></i>Export CSV
                </button>
                
                <button @click="printReport()" 
                        class="flex-1 md:flex-none px-4 py-2 bg-blue-600 hover:bg-blue-700 rounded-lg font-bold transition text-sm">
                    <i class="fas fa-print mr-2"></i>Print
                </button>
            </div>
        </div>

        <div class="mt-4 flex items-center justify-between text-sm">
            <p class="text-gray-400">
                Showing <span x-text="filteredUsage.length"></span> of <?php echo e($usage->total()); ?> records
            </p>
            <button @click="searchQuery = ''; filterUsage()" 
                    x-show="searchQuery"
                    class="text-cyan-400 hover:text-cyan-300 transition">
                <i class="fas fa-redo mr-1"></i>Clear Search
            </button>
        </div>
    </div>
    
    <!-- ✅ USAGE HISTORY TABLE/CARDS -->
    <div class="bg-gray-900/50 glow-border rounded-xl md:rounded-2xl p-4 md:p-6">
        <h3 class="text-base md:text-lg font-bold mb-6 flex items-center gap-2">
            <i class="fas fa-history text-cyan-400"></i>
            Usage History
        </h3>
        
        <?php if($usage->isEmpty()): ?>
        <div class="text-center py-12">
            <i class="fas fa-inbox text-5xl md:text-6xl text-gray-600 mb-4"></i>
            <p class="text-gray-400">No usage history yet</p>
        </div>
        <?php else: ?>
        
        <!-- ✅ DESKTOP TABLE -->
        <div class="overflow-x-auto desktop-table">
            <table class="w-full">
                <thead>
                    <tr class="border-b border-gray-700">
                        <th class="text-left py-4 px-4 text-xs md:text-sm text-gray-400 font-semibold">TRANSACTION ID</th>
                        <th class="text-left py-4 px-4 text-xs md:text-sm text-gray-400 font-semibold">CUSTOMER</th>
                        <th class="text-left py-4 px-4 text-xs md:text-sm text-gray-400 font-semibold">ORIGINAL PRICE</th>
                        <th class="text-left py-4 px-4 text-xs md:text-sm text-gray-400 font-semibold">DISCOUNT</th>
                        <th class="text-left py-4 px-4 text-xs md:text-sm text-gray-400 font-semibold">FINAL PRICE</th>
                        <th class="text-left py-4 px-4 text-xs md:text-sm text-gray-400 font-semibold">DATE & TIME</th>
                    </tr>
                </thead>
                <tbody>
                    <?php $__currentLoopData = $usage; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $use): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                    <tr class="border-b border-gray-800 hover:bg-gray-800/50 transition">
                        <td class="py-4 px-4">
                            <span class="font-mono text-cyan-400 text-sm"><?php echo e($use->transaction_id); ?></span>
                        </td>
                        <td class="py-4 px-4">
                            <div>
                                <p class="text-sm font-bold text-white"><?php echo e($use->customer_name ?? 'N/A'); ?></p>
                                <p class="text-xs text-gray-400"><?php echo e($use->customer_email); ?></p>
                            </div>
                        </td>
                        <td class="py-4 px-4">
                            <?php if($use->original_price): ?>
                            <span class="text-sm text-gray-400">Rp <?php echo e(number_format($use->original_price, 0, ',', '.')); ?></span>
                            <?php else: ?>
                            <span class="text-sm text-gray-500">N/A</span>
                            <?php endif; ?>
                        </td>
                        <td class="py-4 px-4">
                            <span class="text-base md:text-lg font-bold text-green-400">
                                - Rp <?php echo e(number_format($use->discount_amount, 0, ',', '.')); ?>

                            </span>
                        </td>
                        <td class="py-4 px-4">
                            <?php if($use->final_price): ?>
                            <span class="text-sm font-bold text-white">Rp <?php echo e(number_format($use->final_price, 0, ',', '.')); ?></span>
                            <?php else: ?>
                            <span class="text-sm text-gray-500">N/A</span>
                            <?php endif; ?>
                        </td>
                        <td class="py-4 px-4">
                            <div>
                                <p class="text-sm"><?php echo e(\Carbon\Carbon::parse($use->created_at)->format('d M Y')); ?></p>
                                <p class="text-xs text-gray-400"><?php echo e(\Carbon\Carbon::parse($use->created_at)->format('H:i:s')); ?></p>
                            </div>
                        </td>
                    </tr>
                    <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                </tbody>
            </table>
        </div>

        <!-- ✅ MOBILE CARDS -->
        <div class="mobile-cards space-y-4">
            <?php $__currentLoopData = $usage; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $use): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
            <div class="bg-gray-800/50 border border-gray-700 rounded-xl p-4">
                <div class="flex items-start justify-between mb-3">
                    <div>
                        <p class="font-mono text-cyan-400 text-sm mb-1"><?php echo e($use->transaction_id); ?></p>
                        <p class="text-xs text-gray-500"><?php echo e(\Carbon\Carbon::parse($use->created_at)->format('d M Y, H:i')); ?></p>
                    </div>
                    <span class="px-2 py-1 bg-green-500/20 text-green-400 rounded text-xs font-bold">
                        -<?php echo e(number_format($use->discount_amount / 1000, 0)); ?>K
                    </span>
                </div>

                <div class="bg-gray-900/50 rounded-lg p-3 mb-3">
                    <p class="text-xs text-gray-500 mb-1">Customer:</p>
                    <p class="text-sm font-bold text-white"><?php echo e($use->customer_name ?? 'N/A'); ?></p>
                    <p class="text-xs text-gray-400"><?php echo e($use->customer_email); ?></p>
                </div>

                <div class="grid grid-cols-3 gap-2 text-center">
                    <div>
                        <p class="text-xs text-gray-500 mb-1">Original</p>
                        <?php if($use->original_price): ?>
                        <p class="text-sm font-bold"><?php echo e(number_format($use->original_price / 1000, 0)); ?>K</p>
                        <?php else: ?>
                        <p class="text-sm text-gray-500">N/A</p>
                        <?php endif; ?>
                    </div>
                    <div>
                        <p class="text-xs text-gray-500 mb-1">Discount</p>
                        <p class="text-sm font-bold text-green-400"><?php echo e(number_format($use->discount_amount / 1000, 0)); ?>K</p>
                    </div>
                    <div>
                        <p class="text-xs text-gray-500 mb-1">Final</p>
                        <?php if($use->final_price): ?>
                        <p class="text-sm font-bold"><?php echo e(number_format($use->final_price / 1000, 0)); ?>K</p>
                        <?php else: ?>
                        <p class="text-sm text-gray-500">N/A</p>
                        <?php endif; ?>
                    </div>
                </div>
            </div>
            <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
        </div>
        
        <!-- Pagination -->
        <div class="mt-6">
            <?php echo e($usage->links()); ?>

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

<script>
function usageManager() {
    return {
        searchQuery: '',
        filteredUsage: [],
        chart: null,

        init() {
            this.initChart();
            this.filteredUsage = <?php echo json_encode($usage->items(), 15, 512) ?>;
        },

        initChart() {
            const ctx = document.getElementById('usageChart');
            
            <?php
                $last30Days = [];
                for ($i = 29; $i >= 0; $i--) {
                    $date = \Carbon\Carbon::today()->subDays($i);
                    $count = DB::table('voucher_usage')
                        ->where('voucher_id', $voucher->id)
                        ->whereDate('created_at', $date)
                        ->count();
                    $last30Days[] = [
                        'date' => $date->format('d M'),
                        'count' => $count
                    ];
                }
            ?>
            
            const chartData = <?php echo json_encode($last30Days, 15, 512) ?>;
            
            this.chart = new Chart(ctx, {
                type: 'line',
                data: {
                    labels: chartData.map(d => d.date),
                    datasets: [{
                        label: 'Voucher Uses',
                        data: chartData.map(d => d.count),
                        borderColor: 'rgb(6, 182, 212)',
                        backgroundColor: 'rgba(6, 182, 212, 0.1)',
                        tension: 0.4,
                        fill: true
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: {
                            display: false
                        }
                    },
                    scales: {
                        y: {
                            beginAtZero: true,
                            ticks: {
                                color: '#9ca3af',
                                stepSize: 1
                            },
                            grid: {
                                color: 'rgba(107, 114, 128, 0.1)'
                            }
                        },
                        x: {
                            ticks: {
                                color: '#9ca3af'
                            },
                            grid: {
                                color: 'rgba(107, 114, 128, 0.1)'
                            }
                        }
                    }
                }
            });
        },

        filterUsage() {
            // Client-side filtering if needed
            const query = this.searchQuery.toLowerCase();
            if (!query) {
                this.filteredUsage = <?php echo json_encode($usage->items(), 15, 512) ?>;
                return;
            }

            this.filteredUsage = <?php echo json_encode($usage->items(), 15, 512) ?>.filter(use => 
                use.transaction_id.toLowerCase().includes(query) ||
                use.customer_email.toLowerCase().includes(query)
            );
        },

        copyCode(code) {
            navigator.clipboard.writeText(code).then(() => {
                alert(`✅ Copied: ${code}`);
            });
        },

        exportToCSV() {
            const data = <?php echo json_encode($usage->items(), 15, 512) ?>;
            
            let csv = 'Transaction ID,Customer Name,Customer Email,Original Price,Discount Amount,Final Price,Date\n';
            
            data.forEach(row => {
                csv += `${row.transaction_id},`;
                csv += `${row.customer_name || 'N/A'},`;
                csv += `${row.customer_email},`;
                csv += `${row.original_price || 0},`;
                csv += `${row.discount_amount},`;
                csv += `${row.final_price || 0},`;
                csv += `${row.created_at}\n`;
            });
            
            const blob = new Blob([csv], { type: 'text/csv' });
            const url = window.URL.createObjectURL(blob);
            const a = document.createElement('a');
            a.href = url;
            a.download = `voucher_usage_<?php echo e($voucher->code); ?>_${new Date().toISOString().split('T')[0]}.csv`;
            a.click();
            
            alert('✅ CSV exported successfully!');
        },

        printReport() {
            window.print();
        },

        updateChartPeriod(days) {
            // Reload page with period parameter
            window.location.href = window.location.pathname + '?period=' + days;
        }
    }
}
</script>

<!-- Print Styles -->
<style media="print">
    body * {
        visibility: hidden;
    }
    
    .glow-border, .glow-border * {
        visibility: visible;
    }
    
    .glow-border {
        position: absolute;
        left: 0;
        top: 0;
    }
    
    button, .mobile-cards {
        display: none !important;
    }
</style>

</body>
</html><?php /**PATH /home/instinct/Documents/belajar/php/ryll-topup/resources/views/account/vouchers/usage.blade.php ENDPATH**/ ?>