@extends('layouts.app')

@section('title', 'Performance Tier Management')

@section('content')
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
    <div class="sm:flex sm:items-center justify-between mb-6">
        <div>
            <h1 class="text-3xl font-bold tracking-tight text-gray-900 dark:text-white">Performance Tiers</h1>
            <p class="mt-2 text-sm text-gray-700 dark:text-gray-300">
                Manage personal commission rates based on monthly sales performance
            </p>
        </div>
        <div class="mt-4 sm:mt-0 flex gap-2">
            <form action="{{ route('performance-tiers.assign-basic') }}" method="POST" class="inline">
                @csrf
                <button type="submit" class="inline-flex items-center px-4 py-2 border border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-300 rounded-md hover:bg-gray-50 dark:hover:bg-gray-700"
                        onclick="return confirm('Assign Basic tier to all agents without a performance tier?');">
                    <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z"/>
                    </svg>
                    Assign Basic
                </button>
            </form>
            <form action="{{ route('performance-tiers.recalculate') }}" method="POST" class="inline">
                @csrf
                <button type="submit" class="inline-flex items-center px-4 py-2 bg-indigo-600 text-white rounded-md hover:bg-indigo-700"
                        onclick="return confirm('Recalculate all agents performance tiers based on last month sales?');">
                    <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/>
                    </svg>
                    Recalculate All
                </button>
            </form>
        </div>
    </div>

    <!-- Stats -->
    <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
        <div class="bg-blue-50 dark:bg-blue-900/20 rounded-lg p-4 border border-blue-200 dark:border-blue-800">
            <div class="text-xs text-blue-600 dark:text-blue-400 uppercase tracking-wide">Active Agents</div>
            <div class="text-2xl font-bold text-blue-800 dark:text-blue-200 mt-1">{{ $stats['total_agents'] }}</div>
        </div>
        <div class="bg-green-50 dark:bg-green-900/20 rounded-lg p-4 border border-green-200 dark:border-green-800">
            <div class="text-xs text-green-600 dark:text-green-400 uppercase tracking-wide">With Performance Tier</div>
            <div class="text-2xl font-bold text-green-800 dark:text-green-200 mt-1">{{ $stats['agents_with_tier'] }}</div>
        </div>
        <div class="bg-yellow-50 dark:bg-yellow-900/20 rounded-lg p-4 border border-yellow-200 dark:border-yellow-800">
            <div class="text-xs text-yellow-600 dark:text-yellow-400 uppercase tracking-wide">Without Tier</div>
            <div class="text-2xl font-bold text-yellow-800 dark:text-yellow-200 mt-1">{{ $stats['agents_without_tier'] }}</div>
        </div>
    </div>

    <!-- Info Box -->
    <div class="bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg p-4 mb-6">
        <div class="flex">
            <svg class="w-5 h-5 text-blue-600 dark:text-blue-400 mr-3 mt-0.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
            </svg>
            <div class="text-sm text-blue-700 dark:text-blue-300">
                <p class="font-medium mb-1">How Performance Tiers Work</p>
                <ul class="list-disc ml-4 space-y-1">
                    <li><strong>Personal Commission</strong>: Each agent's direct sales commission is based on their performance tier</li>
                    <li><strong>Monthly Evaluation</strong>: At the start of each month, tiers are recalculated based on last month's sales</li>
                    <li><strong>Upgrade/Downgrade</strong>: If an agent's sales meet a higher tier, they upgrade. If not, they may downgrade</li>
                    <li><strong>Override Commission</strong>: Upline override commissions use the separate MLM Tier system</li>
                </ul>
            </div>
        </div>
    </div>

    <!-- Performance Tiers Table -->
    <div class="bg-white dark:bg-gray-800 shadow rounded-lg overflow-hidden mb-6">
        <div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700">
            <h3 class="text-lg font-semibold text-gray-900 dark:text-white">Performance Tiers</h3>
        </div>
        <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
            <thead class="bg-gray-50 dark:bg-gray-700">
                <tr>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase">Badge</th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase">Name</th>
                    <th class="px-6 py-3 text-right text-xs font-medium text-gray-500 dark:text-gray-400 uppercase">Commission Rate</th>
                    <th class="px-6 py-3 text-right text-xs font-medium text-gray-500 dark:text-gray-400 uppercase">Min. Monthly Sales</th>
                    <th class="px-6 py-3 text-center text-xs font-medium text-gray-500 dark:text-gray-400 uppercase">Agents</th>
                    <th class="px-6 py-3 text-center text-xs font-medium text-gray-500 dark:text-gray-400 uppercase">Status</th>
                    <th class="px-6 py-3 text-right text-xs font-medium text-gray-500 dark:text-gray-400 uppercase">Actions</th>
                </tr>
            </thead>
            <tbody class="bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700">
                @foreach($tiers as $tier)
                    <tr class="hover:bg-gray-50 dark:hover:bg-gray-700/50" x-data="{ editing: false }">
                        <!-- View Mode -->
                        <template x-if="!editing">
                            <td class="px-6 py-4 whitespace-nowrap">
                                <div class="inline-flex items-center justify-center w-10 h-10 rounded-full {{ $tier->badge_class }}">
                                    <svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                                        {!! $tier->icon_svg !!}
                                    </svg>
                                </div>
                            </td>
                        </template>
                        <template x-if="!editing">
                            <td class="px-6 py-4 whitespace-nowrap">
                                <div class="flex items-center">
                                    <span class="inline-flex items-center justify-center w-6 h-6 rounded-full bg-gray-200 dark:bg-gray-600 text-xs font-bold text-gray-600 dark:text-gray-300 mr-2">
                                        {{ $tier->level }}
                                    </span>
                                    <div>
                                        <span class="font-medium text-gray-900 dark:text-white">{{ $tier->name }}</span>
                                        @if($tier->description)
                                            <p class="text-xs text-gray-500 dark:text-gray-400">{{ $tier->description }}</p>
                                        @endif
                                    </div>
                                </div>
                            </td>
                        </template>
                        <template x-if="!editing">
                            <td class="px-6 py-4 whitespace-nowrap text-right">
                                <span class="text-lg font-bold text-green-600 dark:text-green-400">{{ number_format($tier->commission_rate, 1) }}%</span>
                            </td>
                        </template>
                        <template x-if="!editing">
                            <td class="px-6 py-4 whitespace-nowrap text-right text-sm text-gray-900 dark:text-white">
                                @if($tier->min_sales_amount > 0)
                                    RM {{ number_format($tier->min_sales_amount, 0) }}
                                @else
                                    <span class="text-gray-500">Default</span>
                                @endif
                            </td>
                        </template>
                        <template x-if="!editing">
                            <td class="px-6 py-4 whitespace-nowrap text-center">
                                <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-300">
                                    {{ $tier->agents_count }}
                                </span>
                            </td>
                        </template>
                        <template x-if="!editing">
                            <td class="px-6 py-4 whitespace-nowrap text-center">
                                @if($tier->is_active)
                                    <span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-400">
                                        Active
                                    </span>
                                @else
                                    <span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-gray-100 text-gray-600 dark:bg-gray-700 dark:text-gray-400">
                                        Inactive
                                    </span>
                                @endif
                            </td>
                        </template>
                        <template x-if="!editing">
                            <td class="px-6 py-4 whitespace-nowrap text-right text-sm">
                                <button @click="editing = true" class="text-indigo-600 dark:text-indigo-400 hover:text-indigo-900 mr-3">
                                    Edit
                                </button>
                                <form action="{{ route('performance-tiers.toggle', $tier) }}" method="POST" class="inline">
                                    @csrf
                                    <button type="submit" class="{{ $tier->is_active ? 'text-yellow-600 hover:text-yellow-900' : 'text-green-600 hover:text-green-900' }}">
                                        {{ $tier->is_active ? 'Disable' : 'Enable' }}
                                    </button>
                                </form>
                            </td>
                        </template>

                        <!-- Edit Mode -->
                        <template x-if="editing">
                            <td colspan="7" class="px-6 py-4">
                                <form action="{{ route('performance-tiers.update', $tier) }}" method="POST">
                                    @csrf
                                    @method('PUT')
                                    <div class="flex flex-wrap items-center gap-3">
                                        <div class="w-6 text-center font-bold text-gray-500">{{ $tier->level }}</div>

                                        <!-- Icon Selector -->
                                        <div>
                                            <label class="block text-xs text-gray-500 mb-1">Icon</label>
                                            <select name="icon" class="px-2 py-1.5 border border-gray-300 rounded-md text-sm dark:bg-gray-700 dark:border-gray-600 dark:text-white">
                                                @foreach(\App\Models\PerformanceTier::ICONS as $value => $label)
                                                    <option value="{{ $value }}" {{ $tier->icon == $value ? 'selected' : '' }}>{{ $label }}</option>
                                                @endforeach
                                            </select>
                                        </div>

                                        <!-- Color Selector -->
                                        <div>
                                            <label class="block text-xs text-gray-500 mb-1">Color</label>
                                            <select name="color" class="px-2 py-1.5 border border-gray-300 rounded-md text-sm dark:bg-gray-700 dark:border-gray-600 dark:text-white">
                                                <option value="">Auto</option>
                                                @foreach(\App\Models\PerformanceTier::COLORS as $value => $label)
                                                    <option value="{{ $value }}" {{ $tier->color == $value ? 'selected' : '' }}>{{ $label }}</option>
                                                @endforeach
                                            </select>
                                        </div>

                                        <!-- Name -->
                                        <div class="flex-1 min-w-[120px]">
                                            <label class="block text-xs text-gray-500 mb-1">Name</label>
                                            <input type="text" name="name" value="{{ $tier->name }}" required
                                                   class="w-full px-3 py-1.5 border border-gray-300 rounded-md text-sm dark:bg-gray-700 dark:border-gray-600 dark:text-white">
                                        </div>

                                        <!-- Commission Rate -->
                                        <div class="w-20">
                                            <label class="block text-xs text-gray-500 mb-1">Rate</label>
                                            <div class="relative">
                                                <input type="number" name="commission_rate" value="{{ $tier->commission_rate }}" step="0.1" min="0" max="100" required
                                                       class="w-full px-3 py-1.5 border border-gray-300 rounded-md text-sm dark:bg-gray-700 dark:border-gray-600 dark:text-white pr-6">
                                                <span class="absolute right-2 top-1/2 -translate-y-1/2 text-gray-500 text-xs">%</span>
                                            </div>
                                        </div>

                                        <!-- Min Sales -->
                                        <div class="w-28">
                                            <label class="block text-xs text-gray-500 mb-1">Min Sales</label>
                                            <div class="relative">
                                                <span class="absolute left-2 top-1/2 -translate-y-1/2 text-gray-500 text-xs">RM</span>
                                                <input type="number" name="min_sales_amount" value="{{ $tier->min_sales_amount }}" step="100" min="0" required
                                                       class="w-full px-3 py-1.5 border border-gray-300 rounded-md text-sm dark:bg-gray-700 dark:border-gray-600 dark:text-white pl-9">
                                            </div>
                                        </div>

                                        <!-- Description -->
                                        <div class="flex-1 min-w-[150px]">
                                            <label class="block text-xs text-gray-500 mb-1">Description</label>
                                            <input type="text" name="description" value="{{ $tier->description }}"
                                                   class="w-full px-3 py-1.5 border border-gray-300 rounded-md text-sm dark:bg-gray-700 dark:border-gray-600 dark:text-white"
                                                   placeholder="Optional">
                                        </div>

                                        <!-- Actions -->
                                        <div class="flex gap-2 items-end">
                                            <button type="submit" class="px-3 py-1.5 bg-green-600 text-white rounded-md hover:bg-green-700 text-sm">
                                                Save
                                            </button>
                                            <button type="button" @click="editing = false" class="px-3 py-1.5 border border-gray-300 text-gray-700 rounded-md hover:bg-gray-50 text-sm dark:border-gray-600 dark:text-gray-300 dark:hover:bg-gray-700">
                                                Cancel
                                            </button>
                                        </div>
                                    </div>
                                </form>
                            </td>
                        </template>
                    </tr>
                @endforeach
            </tbody>
        </table>
    </div>

    <!-- Add New Tier -->
    <div class="bg-white dark:bg-gray-800 shadow rounded-lg p-6">
        <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-4">Add New Performance Tier</h3>
        <form action="{{ route('performance-tiers.store') }}" method="POST">
            @csrf
            <div class="flex flex-wrap items-end gap-4">
                <!-- Icon -->
                <div>
                    <label class="block text-xs text-gray-500 dark:text-gray-400 mb-1">Icon</label>
                    <select name="icon" class="px-3 py-2 border border-gray-300 rounded-md text-sm dark:bg-gray-700 dark:border-gray-600 dark:text-white">
                        @foreach(\App\Models\PerformanceTier::ICONS as $value => $label)
                            <option value="{{ $value }}">{{ $label }}</option>
                        @endforeach
                    </select>
                </div>

                <!-- Color -->
                <div>
                    <label class="block text-xs text-gray-500 dark:text-gray-400 mb-1">Color</label>
                    <select name="color" class="px-3 py-2 border border-gray-300 rounded-md text-sm dark:bg-gray-700 dark:border-gray-600 dark:text-white">
                        <option value="">Auto</option>
                        @foreach(\App\Models\PerformanceTier::COLORS as $value => $label)
                            <option value="{{ $value }}">{{ $label }}</option>
                        @endforeach
                    </select>
                </div>

                <!-- Name -->
                <div>
                    <label class="block text-xs text-gray-500 dark:text-gray-400 mb-1">Tier Name</label>
                    <input type="text" name="name" required
                           class="px-3 py-2 border border-gray-300 rounded-md text-sm dark:bg-gray-700 dark:border-gray-600 dark:text-white"
                           placeholder="e.g., Diamond">
                </div>

                <!-- Commission Rate -->
                <div>
                    <label class="block text-xs text-gray-500 dark:text-gray-400 mb-1">Commission Rate (%)</label>
                    <input type="number" name="commission_rate" step="0.1" min="0" max="100" required
                           class="w-24 px-3 py-2 border border-gray-300 rounded-md text-sm dark:bg-gray-700 dark:border-gray-600 dark:text-white"
                           placeholder="30">
                </div>

                <!-- Min Sales -->
                <div>
                    <label class="block text-xs text-gray-500 dark:text-gray-400 mb-1">Min. Monthly Sales (RM)</label>
                    <input type="number" name="min_sales_amount" step="100" min="0" required
                           class="w-32 px-3 py-2 border border-gray-300 rounded-md text-sm dark:bg-gray-700 dark:border-gray-600 dark:text-white"
                           placeholder="30000">
                </div>

                <!-- Description -->
                <div class="flex-1">
                    <label class="block text-xs text-gray-500 dark:text-gray-400 mb-1">Description (optional)</label>
                    <input type="text" name="description"
                           class="w-full px-3 py-2 border border-gray-300 rounded-md text-sm dark:bg-gray-700 dark:border-gray-600 dark:text-white"
                           placeholder="Achieved with RM 30,000+ monthly sales">
                </div>

                <button type="submit" class="px-4 py-2 bg-indigo-600 text-white rounded-md hover:bg-indigo-700">
                    Add Tier
                </button>
            </div>
        </form>
    </div>

    <!-- Icon Preview -->
    <div class="mt-6 bg-gray-50 dark:bg-gray-900 rounded-lg p-6">
        <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-4">Available Icons Preview</h3>
        <div class="flex flex-wrap gap-4">
            @foreach(\App\Models\PerformanceTier::ICONS as $iconKey => $iconName)
                @foreach(['gray', 'blue', 'green', 'yellow', 'purple'] as $colorIndex => $colorKey)
                    @if($loop->parent->index == $colorIndex)
                        <div class="text-center">
                            <div class="inline-flex items-center justify-center w-12 h-12 rounded-full {{ (new \App\Models\PerformanceTier)->getColorClasses($colorKey) }} mb-1">
                                <svg class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                                    {!! (new \App\Models\PerformanceTier(['icon' => $iconKey]))->icon_svg !!}
                                </svg>
                            </div>
                            <p class="text-xs text-gray-500 dark:text-gray-400">{{ $iconName }}</p>
                        </div>
                    @endif
                @endforeach
            @endforeach
        </div>
    </div>

    <!-- Comparison with MLM Tiers -->
    <div class="mt-6 bg-gray-50 dark:bg-gray-900 rounded-lg p-6">
        <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-4">Commission Structure Overview</h3>
        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
            <div class="bg-white dark:bg-gray-800 rounded-lg p-4 border border-gray-200 dark:border-gray-700">
                <h4 class="font-medium text-green-600 dark:text-green-400 mb-2">Performance Tiers (Personal Sales)</h4>
                <p class="text-sm text-gray-600 dark:text-gray-400 mb-3">
                    Commission rate for an agent's own direct sales. Based on their previous month's total sales.
                </p>
                <div class="text-sm text-gray-700 dark:text-gray-300">
                    <strong>Example:</strong> Agent sells RM 12,000 in November<br>
                    → December tier: <span class="text-green-600">Gold (22%)</span><br>
                    → Agent earns 22% on their own sales in December
                </div>
            </div>
            <div class="bg-white dark:bg-gray-800 rounded-lg p-4 border border-gray-200 dark:border-gray-700">
                <h4 class="font-medium text-indigo-600 dark:text-indigo-400 mb-2">MLM Tiers (Override Commission)</h4>
                <p class="text-sm text-gray-600 dark:text-gray-400 mb-3">
                    Override commission from downlines' sales. Based on hierarchy position.
                </p>
                <div class="text-sm text-gray-700 dark:text-gray-300">
                    <strong>Example:</strong> Upline is Level 2 (5% override)<br>
                    → Downline sells RM 1,000<br>
                    → Upline earns 5% = RM 50 override
                </div>
            </div>
        </div>
    </div>
</div>
@endsection