@extends('admin.layout')

@section('title', 'Dashboard')

@section('content')
<div class="page-header">
    <div class="page-title">
        <h1><i class="fas fa-tachometer-alt"></i> Dashboard</h1>
        <p>Welcome back, {{ Auth::user()->name }}! Here's what's happening with your MLM system.</p>
    </div>
    <div class="page-actions">
        <button class="btn btn-primary" onclick="refreshStats()">
            <i class="fas fa-sync-alt"></i> Refresh
        </button>
    </div>
</div>

<!-- Stats Grid -->
<div class="grid-4">
    <div class="stats-card" style="border-left-color: #6366f1;">
        <div class="stats-label">Total Users</div>
        <div class="stats-value">{{ number_format($stats['total_users'] ?? 0) }}</div>
        <div class="stats-change {{ ($stats['user_growth'] ?? 0) >= 0 ? 'positive' : 'negative' }}">
            <i class="fas fa-arrow-{{ ($stats['user_growth'] ?? 0) >= 0 ? 'up' : 'down' }}"></i>
            {{ abs($stats['user_growth'] ?? 0) }}% this month
        </div>
    </div>
    
    <div class="stats-card" style="border-left-color: #10b981;">
        <div class="stats-label">Total Sales</div>
        <div class="stats-value">₹{{ number_format($stats['total_sales'] ?? 0) }}</div>
        <div class="stats-change positive">
            <i class="fas fa-arrow-up"></i>
            ₹{{ number_format($stats['sales_today'] ?? 0) }} today
        </div>
    </div>
    
    <div class="stats-card" style="border-left-color: #f59e0b;">
        <div class="stats-label">Pending Payouts</div>
        <div class="stats-value">₹{{ number_format($stats['pending_payouts'] ?? 0) }}</div>
        <div class="stats-change {{ ($stats['payout_change'] ?? 0) >= 0 ? 'positive' : 'negative' }}">
            <i class="fas fa-arrow-{{ ($stats['payout_change'] ?? 0) >= 0 ? 'up' : 'down' }}"></i>
            {{ $stats['payout_requests_today'] ?? 0 }} requests today
        </div>
    </div>
    
    <div class="stats-card" style="border-left-color: #ef4444;">
        <div class="stats-label">Total Commissions</div>
        <div class="stats-value">₹{{ number_format($stats['total_commissions'] ?? 0) }}</div>
        <div class="stats-change positive">
            <i class="fas fa-arrow-up"></i>
            ₹{{ number_format($stats['commission_today'] ?? 0) }} today
        </div>
    </div>
</div>

<!-- Second Row Stats -->
<div class="grid-4">
    <div class="stats-card" style="border-left-color: #8b5cf6;">
        <div class="stats-label">Active Orders</div>
        <div class="stats-value">{{ number_format($stats['active_orders'] ?? 0) }}</div>
        <div class="stats-label">
            {{ $stats['pending_orders'] ?? 0 }} pending
        </div>
    </div>
    
    <div class="stats-card" style="border-left-color: #3b82f6;">
        <div class="stats-label">Total PV</div>
        <div class="stats-value">{{ number_format($stats['total_pv'] ?? 0) }}</div>
        <div class="stats-change positive">
            <i class="fas fa-arrow-up"></i>
            {{ $stats['pv_today'] ?? 0 }} today
        </div>
    </div>
    
    <div class="stats-card" style="border-left-color: #ec4899;">
        <div class="stats-label">New Users Today</div>
        <div class="stats-value">{{ number_format($stats['new_users_today'] ?? 0) }}</div>
        <div class="stats-change {{ ($stats['user_growth_daily'] ?? 0) >= 0 ? 'positive' : 'negative' }}">
            <i class="fas fa-arrow-{{ ($stats['user_growth_daily'] ?? 0) >= 0 ? 'up' : 'down' }}"></i>
            {{ abs($stats['user_growth_daily'] ?? 0) }}%
        </div>
    </div>
    
    <div class="stats-card" style="border-left-color: #14b8a6;">
        <div class="stats-label">Network Growth</div>
        <div class="stats-value">{{ number_format($stats['network_growth'] ?? 0) }}%</div>
        <div class="stats-change positive">
            <i class="fas fa-users"></i>
            {{ $stats['dilers'] ?? 0 }} dilers / {{ $stats['dipos'] ?? 0 }} dipos
        </div>
    </div>
</div>

<!-- Charts Section -->
<div class="grid-2">
    <div class="card">
        <div class="card-header">
            <div class="card-title">
                <i class="fas fa-chart-line"></i> Sales Overview (Last 7 Days)
            </div>
        </div>
        <div class="card-body">
            <canvas id="salesChart" height="250"></canvas>
        </div>
    </div>
    
    <div class="card">
        <div class="card-header">
            <div class="card-title">
                <i class="fas fa-users"></i> User Growth (Last 30 Days)
            </div>
        </div>
        <div class="card-body">
            <canvas id="usersChart" height="250"></canvas>
        </div>
    </div>
</div>

<!-- Recent Activity -->
<div class="grid-2">
    <div class="card">
        <div class="card-header">
            <div class="card-title">
                <i class="fas fa-clock"></i> Pending Approvals
            </div>
            <a href="{{ route('admin.orders.pending') }}" class="btn btn-outline btn-sm">
                View All
            </a>
        </div>
        <div class="table-container">
            <table class="data-table">
                <thead>
                    <tr>
                        <th>Order ID</th>
                        <th>User</th>
                        <th>Amount</th>
                        <th>Status</th>
                        <th>Action</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($pendingOrders ?? [] as $order)
                    <tr>
                        <td>#{{ $order->order_number ?? 'N/A' }}</td>
                        <td>
                            <div>{{ $order->user->name ?? 'N/A' }}</div>
                            <small class="text-gray-500">{{ $order->user->user_code ?? 'N/A' }}</small>
                        </td>
                        <td>₹{{ number_format($order->total_amount ?? 0) }}</td>
                        <td>
                            <span class="badge badge-warning">{{ ucfirst(str_replace('_', ' ', $order->status ?? 'pending')) }}</span>
                        </td>
                        <td>
                            <div class="flex gap-2">
                                <button onclick="viewOrder({{ $order->id ?? 0 }})" class="btn btn-info btn-sm">
                                    <i class="fas fa-eye"></i>
                                </button>
                                <button onclick="approveOrder({{ $order->id ?? 0 }})" class="btn btn-success btn-sm">
                                    <i class="fas fa-check"></i>
                                </button>
                            </div>
                        </td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="5" class="text-center py-4 text-gray-500">
                            No pending orders found
                        </td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>
    
    <div class="card">
        <div class="card-header">
            <div class="card-title">
                <i class="fas fa-money-bill-wave"></i> Recent Commissions
            </div>
            <a href="{{ route('admin.commissions.index') }}" class="btn btn-outline btn-sm">
                View All
            </a>
        </div>
        <div class="table-container">
            <table class="data-table">
                <thead>
                    <tr>
                        <th>User</th>
                        <th>Type</th>
                        <th>Amount</th>
                        <th>Date</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($recentCommissions ?? [] as $commission)
                    <tr>
                        <td>{{ $commission->user->name ?? 'N/A' }}</td>
                        <td>
                            <span class="badge 
                                @if(($commission->commission_type ?? '') == 'matching_bonus') badge-primary
                                @elseif(($commission->commission_type ?? '') == 'sponsor_bonus') badge-success
                                @elseif(($commission->commission_type ?? '') == 'generation_bonus') badge-info
                                @else badge-warning @endif">
                                {{ ucfirst(str_replace('_', ' ', $commission->commission_type ?? 'Unknown')) }}
                            </span>
                        </td>
                        <td>₹{{ number_format($commission->amount ?? 0) }}</td>
                        <td>{{ $commission->created_at->format('Y-m-d H:i') ?? 'N/A' }}</td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="4" class="text-center py-4 text-gray-500">
                            No commission records found
                        </td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>
</div>

<!-- Pending Payouts -->
<div class="card">
    <div class="card-header">
        <div class="card-title">
            <i class="fas fa-wallet"></i> Pending Payout Requests
        </div>
        <a href="{{ route('admin.payouts.pending') }}" class="btn btn-outline btn-sm">
            View All
        </a>
    </div>
    <div class="table-container">
        <table class="data-table">
            <thead>
                <tr>
                    <th>Request ID</th>
                    <th>User</th>
                    <th>Amount</th>
                    <th>Request Date</th>
                    <th>Status</th>
                    <th>Action</th>
                </tr>
            </thead>
            <tbody>
                @forelse($pendingPayouts ?? [] as $payout)
                <tr>
                    <td>#{{ str_pad($payout->id ?? 0, 6, '0', STR_PAD_LEFT) }}</td>
                    <td>
                        <div>{{ $payout->user->name ?? 'N/A' }}</div>
                        <small class="text-gray-500">{{ $payout->user->user_code ?? 'N/A' }}</small>
                    </td>
                    <td>₹{{ number_format($payout->amount ?? 0) }}</td>
                    <td>{{ $payout->created_at->format('Y-m-d H:i') ?? 'N/A' }}</td>
                    <td>
                        <span class="badge badge-warning">{{ ucfirst($payout->status ?? 'pending') }}</span>
                    </td>
                    <td>
                        <div class="flex gap-2">
                            <button onclick="processPayout({{ $payout->id ?? 0 }}, 'approve')" class="btn btn-success btn-sm">
                                <i class="fas fa-check"></i> Approve
                            </button>
                            <button onclick="processPayout({{ $payout->id ?? 0 }}, 'reject')" class="btn btn-danger btn-sm">
                                <i class="fas fa-times"></i> Reject
                            </button>
                        </div>
                    </td>
                </tr>
                @empty
                <tr>
                    <td colspan="6" class="text-center py-4 text-gray-500">
                        No pending payout requests found
                    </td>
                </tr>
                @endforelse
            </tbody>
        </table>
    </div>
</div>

<!-- Quick Stats -->
<div class="grid-4">
    <div class="card text-center">
        <div class="text-3xl font-bold text-primary mb-2">
            {{ $stats['distributors'] ?? 0 }}
        </div>
        <div class="text-gray-500">Distributors</div>
    </div>
    
    <div class="card text-center">
        <div class="text-3xl font-bold text-success mb-2">
            {{ $stats['dilers'] ?? 0 }}
        </div>
        <div class="text-gray-500">Dilers</div>
    </div>
    
    <div class="card text-center">
        <div class="text-3xl font-bold text-warning mb-2">
            {{ $stats['dipos'] ?? 0 }}
        </div>
        <div class="text-gray-500">Dipos</div>
    </div>
    
    <div class="card text-center">
        <div class="text-3xl font-bold text-purple-600 mb-2">
            {{ $stats['active_ranks'] ?? 0 }}
        </div>
        <div class="text-gray-500">Active Ranks</div>
    </div>
</div>

<!-- System Info -->
<div class="card mt-4">
    <div class="card-header">
        <div class="card-title">
            <i class="fas fa-info-circle"></i> System Information
        </div>
    </div>
    <div class="card-body">
        <div class="grid grid-cols-4 gap-4">
            <div>
                <div class="text-sm text-gray-500">Total Products</div>
                <div class="text-xl font-bold">{{ $stats['total_products'] ?? 0 }}</div>
                <div class="text-xs text-gray-400">{{ $stats['active_products'] ?? 0 }} active</div>
            </div>
            <div>
                <div class="text-sm text-gray-500">Server Time</div>
                <div class="text-xl font-bold">{{ now()->format('h:i A') }}</div>
                <div class="text-xs text-gray-400">{{ now()->format('d M, Y') }}</div>
            </div>
            <div>
                <div class="text-sm text-gray-500">System Status</div>
                <div class="text-xl font-bold text-green-600">Online</div>
                <div class="text-xs text-gray-400">All services running</div>
            </div>
            <div>
                <div class="text-sm text-gray-500">Database</div>
                <div class="text-xl font-bold text-green-600">Connected</div>
                <div class="text-xs text-gray-400">MySQL v8.0</div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script>
    // Initialize Charts
    document.addEventListener('DOMContentLoaded', function() {
        // Sales Chart
        const salesCtx = document.getElementById('salesChart');
        if (salesCtx) {
            const salesChart = new Chart(salesCtx.getContext('2d'), {
                type: 'line',
                data: {
                    labels: @json($salesChart['labels'] ?? []),
                    datasets: [{
                        label: 'Sales (₹)',
                        data: @json($salesChart['data'] ?? []),
                        borderColor: '#6366f1',
                        backgroundColor: 'rgba(99, 102, 241, 0.1)',
                        borderWidth: 2,
                        fill: true,
                        tension: 0.4
                    }]
                },
                options: {
                    responsive: true,
                    plugins: {
                        legend: {
                            display: false
                        }
                    },
                    scales: {
                        y: {
                            beginAtZero: true,
                            ticks: {
                                callback: function(value) {
                                    return '₹' + value;
                                }
                            }
                        }
                    }
                }
            });
        }
        
        // Users Chart
        const usersCtx = document.getElementById('usersChart');
        if (usersCtx) {
            const usersChart = new Chart(usersCtx.getContext('2d'), {
                type: 'bar',
                data: {
                    labels: @json($usersChart['labels'] ?? []),
                    datasets: [{
                        label: 'New Users',
                        data: @json($usersChart['data'] ?? []),
                        backgroundColor: '#10b981',
                        borderColor: '#059669',
                        borderWidth: 1
                    }]
                },
                options: {
                    responsive: true,
                    plugins: {
                        legend: {
                            display: false
                        }
                    },
                    scales: {
                        y: {
                            beginAtZero: true,
                            ticks: {
                                stepSize: 1
                            }
                        }
                    }
                }
            });
        }
    });
    
    // Refresh Stats Function
    function refreshStats() {
        Swal.fire({
            title: 'Refreshing...',
            allowOutsideClick: false,
            showConfirmButton: false,
            willOpen: () => {
                Swal.showLoading();
            }
        });
        
        fetch('{{ route('admin.dashboard.refresh') }}')
            .then(response => response.json())
            .then(data => {
                Swal.close();
                if (data.success) {
                    location.reload();
                } else {
                    Swal.fire('Error', data.message || 'Failed to refresh', 'error');
                }
            })
            .catch(error => {
                Swal.close();
                Swal.fire('Error', 'Failed to refresh data', 'error');
            });
    }
    
    // View Order Details
    function viewOrder(orderId) {
        if (!orderId || orderId == 0) {
            Swal.fire('Error', 'Invalid order ID', 'error');
            return;
        }
        
        fetch(`/admin/orders/${orderId}/details`)
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    const order = data.order;
                    const itemsHtml = (order.items || []).map(item => `
                        <tr>
                            <td>${item.product?.name || 'N/A'}</td>
                            <td>${item.quantity || 0}</td>
                            <td>₹${item.unit_price || 0}</td>
                            <td>${item.unit_pv || 0} PV</td>
                            <td>₹${item.total_price || 0}</td>
                        </tr>
                    `).join('');
                    
                    openModal(
                        `Order #${order.order_number || 'N/A'}`,
                        `
                        <div class="space-y-4">
                            <div class="grid grid-cols-2 gap-4">
                                <div>
                                    <label class="form-label">Customer</label>
                                    <div class="font-semibold">${order.user?.name || 'N/A'}</div>
                                    <div class="text-gray-500">${order.user?.user_code || 'N/A'}</div>
                                </div>
                                <div>
                                    <label class="form-label">Order Date</label>
                                    <div>${order.created_at ? new Date(order.created_at).toLocaleString() : 'N/A'}</div>
                                </div>
                            </div>
                            
                            ${itemsHtml ? `
                            <div>
                                <label class="form-label">Order Items</label>
                                <div class="table-container mt-2">
                                    <table class="data-table">
                                        <thead>
                                            <tr>
                                                <th>Product</th>
                                                <th>Qty</th>
                                                <th>Price</th>
                                                <th>PV</th>
                                                <th>Total</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            ${itemsHtml}
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                            ` : '<div>No items found</div>'}
                            
                            <div class="grid grid-cols-2 gap-4">
                                <div>
                                    <label class="form-label">Total Amount</label>
                                    <div class="text-2xl font-bold">₹${order.total_amount || 0}</div>
                                </div>
                                <div>
                                    <label class="form-label">Total PV</label>
                                    <div class="text-2xl font-bold text-primary">${order.total_pv || 0} PV</div>
                                </div>
                            </div>
                            
                            <div>
                                <label class="form-label">Status</label>
                                <span class="badge ${order.status === 'pending_payment' ? 'badge-warning' : 'badge-success'}">
                                    ${(order.status || '').replace('_', ' ').toUpperCase()}
                                </span>
                            </div>
                        </div>
                        `,
                        `
                        <button class="btn btn-primary" onclick="closeModal()">Close</button>
                        ${order.status === 'pending_payment' ? 
                            `<button class="btn btn-success" onclick="approveOrder(${order.id})">Approve Payment</button>` : ''
                        }
                        `
                    );
                } else {
                    Swal.fire('Error', data.message || 'Failed to load order details', 'error');
                }
            })
            .catch(error => {
                Swal.fire('Error', 'Failed to load order details', 'error');
            });
    }
    
    // Approve Order
    function approveOrder(orderId) {
        if (!orderId || orderId == 0) {
            Swal.fire('Error', 'Invalid order ID', 'error');
            return;
        }
        
        Swal.fire({
            title: 'Approve Order Payment?',
            text: 'This will mark the order as paid and process commissions.',
            icon: 'question',
            showCancelButton: true,
            confirmButtonText: 'Yes, Approve',
            cancelButtonText: 'Cancel'
        }).then((result) => {
            if (result.isConfirmed) {
                fetch(`/admin/orders/${orderId}/approve`, {
                    method: 'POST',
                    headers: {
                        'X-CSRF-TOKEN': '{{ csrf_token() }}',
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify({})
                })
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        Swal.fire('Approved!', data.message, 'success');
                        setTimeout(() => location.reload(), 1500);
                    } else {
                        Swal.fire('Error!', data.message, 'error');
                    }
                })
                .catch(error => {
                    Swal.fire('Error!', 'Failed to approve order', 'error');
                });
            }
        });
    }
    
    // Process Payout
    function processPayout(payoutId, action) {
        if (!payoutId || payoutId == 0) {
            Swal.fire('Error', 'Invalid payout ID', 'error');
            return;
        }
        
        const actionText = action === 'approve' ? 'Approve' : 'Reject';
        
        Swal.fire({
            title: `${actionText} Payout Request?`,
            text: action === 'approve' ? 
                'This will process the payment to the user.' :
                'This will reject the payout request.',
            icon: 'question',
            showCancelButton: true,
            confirmButtonText: `Yes, ${actionText}`,
            cancelButtonText: 'Cancel',
            input: action === 'reject' ? 'text' : null,
            inputLabel: action === 'reject' ? 'Reason for rejection' : null,
            inputPlaceholder: action === 'reject' ? 'Enter reason...' : null,
            showLoaderOnConfirm: true,
            preConfirm: (reason) => {
                return fetch(`/admin/payouts/${payoutId}/${action}`, {
                    method: 'POST',
                    headers: {
                        'X-CSRF-TOKEN': '{{ csrf_token() }}',
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify({ reason: reason })
                })
                .then(response => response.json())
                .then(data => {
                    if (!data.success) {
                        throw new Error(data.message);
                    }
                    return data;
                })
                .catch(error => {
                    Swal.showValidationMessage(`Request failed: ${error.message}`);
                });
            },
            allowOutsideClick: () => !Swal.isLoading()
        }).then((result) => {
            if (result.isConfirmed) {
                Swal.fire(
                    `${actionText}d!`,
                    `Payout request has been ${actionText.toLowerCase()}ed.`,
                    'success'
                );
                setTimeout(() => location.reload(), 1500);
            }
        });
    }
</script>
@endsection