@extends('layouts.app')

@section('title', 'Commission Programs')

@section('content')
<div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
    <!-- Header -->
    <div class="sm:flex sm:items-center sm:justify-between mb-8">
        <div>
            <h1 class="text-2xl font-bold text-gray-900 dark:text-white">Commission Programs</h1>
            <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">Manage how agents earn commissions on their sales</p>
        </div>
    </div>

    <!-- Program Cards -->
    <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
        @foreach($programs as $program)
            <div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 overflow-hidden {{ !$program->is_active ? 'opacity-60' : '' }}">
                <div class="p-6">
                    <div class="flex items-center justify-between mb-4">
                        <div class="flex items-center gap-3">
                            <div class="w-10 h-10 rounded-lg flex items-center justify-center {{ $program->badge_class }}">
                                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="{{ $program->icon_svg }}" />
                                </svg>
                            </div>
                            <div>
                                <h3 class="font-semibold text-gray-900 dark:text-white">{{ $program->name }}</h3>
                                @if($program->is_default)
                                    <span class="text-xs text-indigo-600 dark:text-indigo-400">Default</span>
                                @endif
                            </div>
                        </div>
                        <span class="text-2xl font-bold text-gray-900 dark:text-white">{{ $program->agents_count }}</span>
                    </div>
                    <p class="text-sm text-gray-500 dark:text-gray-400 mb-4">{{ $program->description }}</p>
                    <div class="flex items-center justify-between">
                        <a href="{{ route('commission-programs.index', ['program' => $program->id]) }}"
                           class="text-sm font-medium text-indigo-600 dark:text-indigo-400 hover:text-indigo-800 dark:hover:text-indigo-300">
                            View Agents →
                        </a>
                        @if(!$program->is_default && $program->is_active)
                            <form action="{{ route('commission-programs.set-default', $program) }}" method="POST" class="inline">
                                @csrf
                                @method('PATCH')
                                <button type="submit" class="text-xs text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300">
                                    Set as Default
                                </button>
                            </form>
                        @endif
                    </div>
                </div>
                @if($program->type === 'progressive')
                    <div class="px-6 py-3 bg-gray-50 dark:bg-gray-700/50 border-t border-gray-200 dark:border-gray-700">
                        <div class="flex items-center justify-between">
                            <span class="text-xs text-gray-500 dark:text-gray-400">Cycle resets monthly</span>
                            <form action="{{ route('commission-programs.reset-cycle') }}" method="POST" class="inline"
                                  onsubmit="return confirm('Reset cycle sales for all Progressive agents? This cannot be undone.')">
                                @csrf
                                <button type="submit" class="text-xs text-amber-600 hover:text-amber-800 dark:text-amber-400 dark:hover:text-amber-300 font-medium">
                                    Reset Now
                                </button>
                            </form>
                        </div>
                    </div>
                @endif
            </div>
        @endforeach
    </div>

    <!-- Performance Tiers Reference (for Progressive program) -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 mb-8">
        <div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700">
            <h2 class="text-lg font-semibold text-gray-900 dark:text-white">Commission Rate Tiers</h2>
            <p class="text-sm text-gray-500 dark:text-gray-400">Used by Performance & Progressive programs</p>
        </div>
        <div class="p-6">
            <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
                @foreach($performanceTiers as $tier)
                    <div class="text-center p-4 rounded-lg {{ $tier->badge_class }}">
                        <div class="text-2xl font-bold">{{ $tier->commission_rate }}%</div>
                        <div class="text-sm font-medium">{{ $tier->name }}</div>
                        <div class="text-xs opacity-75 mt-1">
                            @if($tier->min_sales_amount > 0)
                                ≥ RM {{ number_format($tier->min_sales_amount) }}
                            @else
                                Starting tier
                            @endif
                        </div>
                    </div>
                @endforeach
            </div>
        </div>
    </div>

    <!-- Agents List -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700">
        <div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700">
            <div class="sm:flex sm:items-center sm:justify-between">
                <h2 class="text-lg font-semibold text-gray-900 dark:text-white">
                    @if($selectedProgram)
                        {{ $programs->firstWhere('id', $selectedProgram)?->name ?? 'All' }} Agents
                    @else
                        All Agents
                    @endif
                </h2>
                <div class="mt-4 sm:mt-0 flex items-center gap-4">
                    <!-- Search -->
                    <form action="{{ route('commission-programs.index') }}" method="GET" class="flex items-center gap-2">
                        @if($selectedProgram)
                            <input type="hidden" name="program" value="{{ $selectedProgram }}">
                        @endif
                        <input type="text" name="search" value="{{ $search }}" placeholder="Search agents..."
                               class="px-3 py-1.5 text-sm border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white">
                        <button type="submit" class="px-3 py-1.5 text-sm bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-600">
                            Search
                        </button>
                    </form>
                    <!-- Filter -->
                    <select onchange="window.location.href='{{ route('commission-programs.index') }}?program='+this.value"
                            class="px-3 py-1.5 text-sm border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white">
                        <option value="">All Programs</option>
                        @foreach($programs as $program)
                            <option value="{{ $program->id }}" {{ $selectedProgram == $program->id ? 'selected' : '' }}>
                                {{ $program->name }}
                            </option>
                        @endforeach
                    </select>
                </div>
            </div>
        </div>

        @if($agents->count() > 0)
            <div class="overflow-x-auto">
                <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
                    <thead class="bg-gray-50 dark:bg-gray-700/50">
                        <tr>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
                                <input type="checkbox" id="select-all" class="rounded border-gray-300 dark:border-gray-600">
                            </th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Agent</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Program</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Current Rate</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Details</th>
                            <th class="px-6 py-3 text-right text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Actions</th>
                        </tr>
                    </thead>
                    <tbody class="bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700">
                        @foreach($agents as $agent)
                            <tr class="hover:bg-gray-50 dark:hover:bg-gray-700/50">
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <input type="checkbox" name="agent_ids[]" value="{{ $agent->id }}" class="agent-checkbox rounded border-gray-300 dark:border-gray-600">
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <div class="flex items-center">
                                        <div class="h-10 w-10 flex-shrink-0">
                                            @if($agent->profile_photo_url)
                                                <img class="h-10 w-10 rounded-full object-cover" src="{{ $agent->profile_photo_url }}" alt="">
                                            @else
                                                <div class="h-10 w-10 rounded-full bg-indigo-100 dark:bg-indigo-900/50 flex items-center justify-center">
                                                    <span class="text-sm font-medium text-indigo-600 dark:text-indigo-400">{{ $agent->initials }}</span>
                                                </div>
                                            @endif
                                        </div>
                                        <div class="ml-4">
                                            <div class="text-sm font-medium text-gray-900 dark:text-white">{{ $agent->name }}</div>
                                            <div class="text-sm text-gray-500 dark:text-gray-400">{{ $agent->coupon_code }}</div>
                                        </div>
                                    </div>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    @if($agent->commissionProgram)
                                        <span class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-xs font-medium {{ $agent->commissionProgram->badge_class }}">
                                            <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="{{ $agent->commissionProgram->icon_svg }}" />
                                            </svg>
                                            {{ $agent->commissionProgram->name }}
                                        </span>
                                    @else
                                        <span class="text-sm text-gray-400 dark:text-gray-500">Not assigned</span>
                                    @endif
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <span class="text-lg font-semibold text-gray-900 dark:text-white">
                                        {{ number_format($agent->getPersonalCommissionRate(), 2) }}%
                                    </span>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">
                                    @if($agent->isLegacyProgram())
                                        <div>Fixed Rate: {{ $agent->legacy_commission_rate }}%</div>
                                        @if($agent->legacy_program_note)
                                            <div class="text-xs text-gray-400">{{ $agent->legacy_program_note }}</div>
                                        @endif
                                    @elseif($agent->isProgressiveProgram())
                                        <div>Cycle Sales: RM {{ number_format($agent->current_cycle_sales ?? 0, 2) }}</div>
                                        <div class="text-xs text-gray-400">
                                            @if($agent->getSalesToNextProgressiveTier())
                                                RM {{ number_format($agent->getSalesToNextProgressiveTier(), 2) }} to next tier
                                            @else
                                                Max tier reached
                                            @endif
                                        </div>
                                    @else
                                        <div>Tier: {{ $agent->performanceTier?->name ?? 'Basic' }}</div>
                                        <div class="text-xs text-gray-400">Based on last month sales</div>
                                    @endif
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                                    <a href="{{ route('commission-programs.assign-form', $agent) }}"
                                       class="text-indigo-600 dark:text-indigo-400 hover:text-indigo-900 dark:hover:text-indigo-300">
                                        Change Program
                                    </a>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>

            <!-- Bulk Actions -->
            <div id="bulk-actions" class="hidden px-6 py-4 bg-gray-50 dark:bg-gray-700/50 border-t border-gray-200 dark:border-gray-700">
                <form action="{{ route('commission-programs.bulk-assign') }}" method="POST" class="flex items-center gap-4">
                    @csrf
                    <input type="hidden" name="agent_ids" id="selected-agent-ids">
                    <span class="text-sm text-gray-600 dark:text-gray-400"><span id="selected-count">0</span> selected</span>
                    <select name="commission_program_id" required class="px-3 py-1.5 text-sm border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white">
                        <option value="">Select Program</option>
                        @foreach($programs->where('is_active', true) as $program)
                            <option value="{{ $program->id }}" data-type="{{ $program->type }}">{{ $program->name }}</option>
                        @endforeach
                    </select>
                    <input type="number" name="legacy_commission_rate" id="bulk-legacy-rate" placeholder="Legacy Rate %" step="0.01" min="0" max="100"
                           class="hidden w-28 px-3 py-1.5 text-sm border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white">
                    <button type="submit" class="px-4 py-1.5 text-sm bg-indigo-600 text-white rounded-lg hover:bg-indigo-700">
                        Assign to Program
                    </button>
                </form>
            </div>

            <!-- Pagination -->
            <div class="px-6 py-4 border-t border-gray-200 dark:border-gray-700">
                {{ $agents->links() }}
            </div>
        @else
            <div class="px-6 py-12 text-center">
                <svg class="mx-auto h-12 w-12 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0z" />
                </svg>
                <h3 class="mt-2 text-sm font-medium text-gray-900 dark:text-white">No agents found</h3>
                <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">
                    @if($selectedProgram)
                        No agents are assigned to this program yet.
                    @else
                        No agents match your search criteria.
                    @endif
                </p>
            </div>
        @endif
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const selectAll = document.getElementById('select-all');
    const checkboxes = document.querySelectorAll('.agent-checkbox');
    const bulkActions = document.getElementById('bulk-actions');
    const selectedCount = document.getElementById('selected-count');
    const selectedIds = document.getElementById('selected-agent-ids');
    const programSelect = document.querySelector('select[name="commission_program_id"]');
    const legacyRateInput = document.getElementById('bulk-legacy-rate');

    function updateBulkActions() {
        const checked = document.querySelectorAll('.agent-checkbox:checked');
        const count = checked.length;

        if (count > 0) {
            bulkActions.classList.remove('hidden');
            selectedCount.textContent = count;
            selectedIds.value = JSON.stringify(Array.from(checked).map(cb => cb.value));
        } else {
            bulkActions.classList.add('hidden');
        }
    }

    selectAll.addEventListener('change', function() {
        checkboxes.forEach(cb => cb.checked = this.checked);
        updateBulkActions();
    });

    checkboxes.forEach(cb => {
        cb.addEventListener('change', updateBulkActions);
    });

    // Show/hide legacy rate input based on selected program
    programSelect.addEventListener('change', function() {
        const selectedOption = this.options[this.selectedIndex];
        const type = selectedOption.dataset.type;

        if (type === 'legacy') {
            legacyRateInput.classList.remove('hidden');
            legacyRateInput.required = true;
        } else {
            legacyRateInput.classList.add('hidden');
            legacyRateInput.required = false;
        }
    });
});
</script>
@endsection