@extends('layouts.portal')

@section('title', 'MLM Commission Settings')
@section('page_title', 'MLM Commission Settings')
@section('page_subtitle', 'Configure 3-Level Commission Structure')

@section('sidebar')
    @include('admin.partials.sidebar', ['active' => 'mlm-settings'])
@endsection

@push('styles')
<style>
    .stat-card { background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%); border-radius: 16px; padding: 1.5rem; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); border: 1px solid rgba(0, 0, 0, 0.05); transition: all 0.3s ease; }
    .stat-card:hover { transform: translateY(-2px); box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); }
    .stat-card.primary { border-top: 4px solid #3b82f6; }
    .stat-card.success { border-top: 4px solid #10b981; }
    .stat-card.warning { border-top: 4px solid #f59e0b; }
    .stat-card.info { border-top: 4px solid #06b6d4; }
    .stat-card.purple { border-top: 4px solid #8b5cf6; }
</style>
@endpush

@section('content')
<div class="p-4">
    @if(session('success'))
        <div class="mb-4 p-4 bg-green-100 border-l-4 border-green-500 text-green-700 rounded">
            <i class="fas fa-check-circle mr-2"></i>{{ session('success') }}
        </div>
    @endif

    @if(session('error'))
        <div class="mb-4 p-4 bg-red-100 border-l-4 border-red-500 text-red-700 rounded">
            <i class="fas fa-exclamation-circle mr-2"></i>{{ session('error') }}
        </div>
    @endif

    <!-- Stats Grid -->
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-4 mb-6">
        <div class="stat-card primary">
            <div class="flex justify-between items-start">
                <div>
                    <p class="text-sm text-gray-500 mb-1">Total Commissions</p>
                    <p class="text-2xl font-bold text-gray-800">RM{{ number_format($commissionStats['total_commissions'], 2) }}</p>
                </div>
                <div class="w-14 h-14 bg-gradient-to-br from-blue-500 to-blue-600 rounded-xl flex items-center justify-center shadow-lg">
                    <i class="fas fa-coins text-white text-2xl"></i>
                </div>
            </div>
        </div>

        <div class="stat-card success">
            <div class="flex justify-between items-start">
                <div>
                    <p class="text-sm text-gray-500 mb-1">Paid Commissions</p>
                    <p class="text-2xl font-bold text-gray-800">RM{{ number_format($commissionStats['total_paid'], 2) }}</p>
                </div>
                <div class="w-14 h-14 bg-gradient-to-br from-green-500 to-green-600 rounded-xl flex items-center justify-center shadow-lg">
                    <i class="fas fa-check-circle text-white text-2xl"></i>
                </div>
            </div>
        </div>

        <div class="stat-card warning">
            <div class="flex justify-between items-start">
                <div>
                    <p class="text-sm text-gray-500 mb-1">Pending Commissions</p>
                    <p class="text-2xl font-bold text-gray-800">RM{{ number_format($commissionStats['total_pending'], 2) }}</p>
                </div>
                <div class="w-14 h-14 bg-gradient-to-br from-yellow-500 to-yellow-600 rounded-xl flex items-center justify-center shadow-lg">
                    <i class="fas fa-clock text-white text-2xl"></i>
                </div>
            </div>
        </div>

        <div class="stat-card info">
            <div class="flex justify-between items-start">
                <div>
                    <p class="text-sm text-gray-500 mb-1">Total Withdrawn</p>
                    <p class="text-2xl font-bold text-gray-800">RM{{ number_format($withdrawalStats['total_withdrawn'], 2) }}</p>
                </div>
                <div class="w-14 h-14 bg-gradient-to-br from-cyan-500 to-cyan-600 rounded-xl flex items-center justify-center shadow-lg">
                    <i class="fas fa-money-bill-wave text-white text-2xl"></i>
                </div>
            </div>
        </div>

        <div class="stat-card purple">
            <div class="flex justify-between items-start">
                <div>
                    <p class="text-sm text-gray-500 mb-1">Account Balance</p>
                    <p class="text-2xl font-bold text-gray-800">RM{{ number_format($accountBalance, 2) }}</p>
                </div>
                <div class="w-14 h-14 bg-gradient-to-br from-purple-500 to-purple-600 rounded-xl flex items-center justify-center shadow-lg">
                    <i class="fas fa-wallet text-white text-2xl"></i>
                </div>
            </div>
        </div>
    </div>

    <!-- Settings Form -->
    <div class="bg-white rounded-2xl shadow-lg border border-gray-100 overflow-hidden">
        <div class="bg-gradient-to-r from-blue-600 to-purple-600 p-6">
            <h3 class="font-bold text-white text-lg flex items-center">
                <i class="fas fa-cog mr-3 text-white/90"></i>Commission Rate Settings
            </h3>
            <p class="text-white/80 text-sm mt-1">Configure your 3-level commission structure</p>
        </div>
        <div class="p-6">
            <form action="{{ route('admin.mlm.settings.update') }}" method="POST">
                @csrf
                
                <div class="space-y-6">
                    <!-- Lawyer Commission Section -->
                    <div class="bg-white rounded-2xl border-2 border-orange-200 p-5 hover:shadow-lg transition-all duration-300">
                        <div class="flex items-center mb-4">
                            <div class="w-12 h-12 bg-gradient-to-br from-orange-500 to-orange-600 rounded-xl flex items-center justify-center mr-3 shadow-md">
                                <i class="fas fa-gavel text-white"></i>
                            </div>
                            <div>
                                <p class="font-bold text-gray-800">Lawyer Commission</p>
                                <p class="text-xs text-gray-500">Will Writing Service</p>
                            </div>
                        </div>
                        <div class="relative">
                            <input type="number" name="lawyer_commission_percentage" 
                                value="{{ $settings['lawyer_commission_percentage'] ?? 0 }}" 
                                min="0" max="100" step="0.01" required
                                class="w-full text-center text-3xl font-bold text-orange-600 px-4 py-4 border-2 border-orange-200 rounded-xl focus:ring-4 focus:ring-orange-500/20 focus:border-orange-500 bg-white shadow-sm">
                            <span class="absolute right-4 top-1/2 transform -translate-y-1/2 text-orange-500 font-semibold text-lg">%</span>
                        </div>
                        <p class="text-xs text-gray-500 mt-3 text-center">Commission percentage for lawyers on will writing invoices</p>
                    </div>

                    <!-- Commission Level Cards -->
                    <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                        <!-- Level 1 -->
                        <div class="relative overflow-hidden rounded-2xl border-2 border-blue-200 bg-gradient-to-br from-blue-50 to-white p-5 hover:shadow-lg transition-all duration-300">
                            <div class="absolute top-0 right-0 bg-gradient-to-r from-blue-500 to-blue-600 text-white text-xs font-bold px-4 py-2 rounded-bl-xl">L1</div>
                            <div class="flex items-center mb-4">
                                <div class="w-12 h-12 bg-gradient-to-br from-blue-500 to-blue-600 rounded-xl flex items-center justify-center mr-3 shadow-md">
                                    <i class="fas fa-user text-white"></i>
                                </div>
                                <div>
                                    <p class="font-bold text-gray-800">Level 1</p>
                                    <p class="text-xs text-gray-500">Direct Agent</p>
                                </div>
                            </div>
                            <div class="relative">
                                <input type="number" name="level1_commission" 
                                    value="{{ $settings['level1_commission'] }}" 
                                    min="0" max="100" step="0.01" required
                                    class="w-full text-center text-3xl font-bold text-blue-600 px-4 py-4 border-2 border-blue-200 rounded-xl focus:ring-4 focus:ring-blue-500/20 focus:border-blue-500 bg-white shadow-sm">
                                <span class="absolute right-4 top-1/2 transform -translate-y-1/2 text-blue-500 font-semibold text-lg">%</span>
                            </div>
                            <p class="text-xs text-gray-500 mt-3 text-center">Earned by agent who directly referred client</p>
                        </div>

                        <!-- Level 2 -->
                        <div class="relative overflow-hidden rounded-2xl border-2 border-green-200 bg-gradient-to-br from-green-50 to-white p-5 hover:shadow-lg transition-all duration-300">
                            <div class="absolute top-0 right-0 bg-gradient-to-r from-green-500 to-green-600 text-white text-xs font-bold px-4 py-2 rounded-bl-xl">L2</div>
                            <div class="flex items-center mb-4">
                                <div class="w-12 h-12 bg-gradient-to-br from-green-500 to-green-600 rounded-xl flex items-center justify-center mr-3 shadow-md">
                                    <i class="fas fa-users text-white"></i>
                                </div>
                                <div>
                                    <p class="font-bold text-gray-800">Level 2</p>
                                    <p class="text-xs text-gray-500">Upline Agent</p>
                                </div>
                            </div>
                            <div class="relative">
                                <input type="number" name="level2_commission" 
                                    value="{{ $settings['level2_commission'] }}" 
                                    min="0" max="100" step="0.01" required
                                    class="w-full text-center text-3xl font-bold text-green-600 px-4 py-4 border-2 border-green-200 rounded-xl focus:ring-4 focus:ring-green-500/20 focus:border-green-500 bg-white shadow-sm">
                                <span class="absolute right-4 top-1/2 transform -translate-y-1/2 text-green-500 font-semibold text-lg">%</span>
                            </div>
                            <p class="text-xs text-gray-500 mt-3 text-center">Earned by upline (parent of direct agent)</p>
                        </div>

                        <!-- Level 3 -->
                        <div class="relative overflow-hidden rounded-2xl border-2 border-cyan-200 bg-gradient-to-br from-cyan-50 to-white p-5 hover:shadow-lg transition-all duration-300">
                            <div class="absolute top-0 right-0 bg-gradient-to-r from-cyan-500 to-cyan-600 text-white text-xs font-bold px-4 py-2 rounded-bl-xl">L3</div>
                            <div class="flex items-center mb-4">
                                <div class="w-12 h-12 bg-gradient-to-br from-cyan-500 to-cyan-600 rounded-xl flex items-center justify-center mr-3 shadow-md">
                                    <i class="fas fa-network-wired text-white"></i>
                                </div>
                                <div>
                                    <p class="font-bold text-gray-800">Level 3</p>
                                    <p class="text-xs text-gray-500">Senior Upline</p>
                                </div>
                            </div>
                            <div class="relative">
                                <input type="number" name="level3_commission" 
                                    value="{{ $settings['level3_commission'] }}" 
                                    min="0" max="100" step="0.01" required
                                    class="w-full text-center text-3xl font-bold text-cyan-600 px-4 py-4 border-2 border-cyan-200 rounded-xl focus:ring-4 focus:ring-cyan-500/20 focus:border-cyan-500 bg-white shadow-sm">
                                <span class="absolute right-4 top-1/2 transform -translate-y-1/2 text-cyan-500 font-semibold text-lg">%</span>
                            </div>
                            <p class="text-xs text-gray-500 mt-3 text-center">Earned by senior upline (grandparent)</p>
                        </div>
                    </div>

                    <div class="bg-gray-50 rounded-2xl p-6">
                        <!-- Minimum Withdrawal -->
                        <div class="mb-6">
                            <label class="block text-sm font-bold text-gray-700 mb-2">Minimum Withdrawal Amount</label>
                            <div class="flex items-center max-w-xs">
                                <span class="px-4 py-3 bg-gradient-to-r from-gray-100 to-gray-200 border border-r-0 border-gray-300 rounded-l-xl text-gray-600 font-semibold">RM</span>
                                <input type="number" name="minimum_withdrawal" 
                                    value="{{ $settings['commission_settings']['minimum_withdrawal'] }}" 
                                    min="0" step="0.01" required
                                    class="flex-1 px-4 py-3 border border-gray-300 rounded-r-xl focus:ring-4 focus:ring-blue-500/20 focus:border-blue-500 bg-white shadow-sm text-lg font-semibold">
                            </div>
                            <p class="text-xs text-gray-500 mt-2">Minimum balance required to request withdrawal</p>
                        </div>

                        <!-- Auto Approve -->
                        <div class="flex items-center justify-between p-4 bg-white rounded-xl border border-gray-200">
                            <div>
                                <label for="autoApprove" class="text-sm font-bold text-gray-700 cursor-pointer">
                                    Auto-Approve Commissions
                                </label>
                                <p class="text-xs text-gray-500 mt-1">Automatically approve commissions when client payment is confirmed</p>
                            </div>
                            <label class="relative inline-flex items-center cursor-pointer">
                                <input type="checkbox" name="auto_approve" id="autoApprove" value="1"
                                    {{ $settings['commission_settings']['auto_approve'] ? 'checked' : '' }}
                                    class="sr-only peer">
                                <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-600"></div>
                            </label>
                        </div>
                    </div>
                </div>

                <div class="mt-6">
                    <button type="submit" class="w-full px-6 py-4 bg-gradient-to-r from-blue-600 to-purple-600 text-white rounded-xl hover:from-blue-700 hover:to-purple-700 transition-all duration-300 flex items-center justify-center font-semibold text-lg shadow-lg hover:shadow-xl">
                        <i class="fas fa-save mr-3"></i>Save Settings
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection