@extends('layouts.app')

@section('title', 'Assign Commission Program')

@section('content')
<div class="mx-auto max-w-3xl px-4 sm:px-6 lg:px-8">
    <!-- Header -->
    <div class="mb-8">
        <a href="{{ route('commission-programs.index') }}" class="inline-flex items-center text-sm text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300 mb-4">
            <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18" />
            </svg>
            Back to Programs
        </a>
        <h1 class="text-2xl font-bold text-gray-900 dark:text-white">Assign Commission Program</h1>
        <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">Change commission program for {{ $agent->name }}</p>
    </div>

    <!-- Agent Info Card -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 p-6 mb-6">
        <div class="flex items-center gap-4">
            @if($agent->profile_photo_url)
                <img class="h-16 w-16 rounded-full object-cover" src="{{ $agent->profile_photo_url }}" alt="">
            @else
                <div class="h-16 w-16 rounded-full bg-indigo-100 dark:bg-indigo-900/50 flex items-center justify-center">
                    <span class="text-xl font-medium text-indigo-600 dark:text-indigo-400">{{ $agent->initials }}</span>
                </div>
            @endif
            <div>
                <h2 class="text-lg font-semibold text-gray-900 dark:text-white">{{ $agent->name }}</h2>
                <p class="text-sm text-gray-500 dark:text-gray-400">{{ $agent->email }}</p>
                <div class="flex items-center gap-2 mt-1">
                    <span class="text-xs bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-300 px-2 py-0.5 rounded">{{ $agent->coupon_code }}</span>
                    @if($agent->commissionProgram)
                        <span class="text-xs {{ $agent->commissionProgram->badge_class }} px-2 py-0.5 rounded">
                            Current: {{ $agent->commissionProgram->name }}
                        </span>
                    @endif
                </div>
            </div>
        </div>
    </div>

    <!-- Program Selection Form -->
    <form action="{{ route('commission-programs.assign', $agent) }}" method="POST">
        @csrf

        <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">
                <h3 class="text-lg font-semibold text-gray-900 dark:text-white">Select Commission Program</h3>
            </div>

            <div class="p-6 space-y-6">
                <!-- Program Options -->
                <div class="space-y-4">
                    @foreach($programs as $program)
                        <label class="relative flex items-start p-4 rounded-lg border-2 cursor-pointer transition-colors
                            {{ $agent->commission_program_id == $program->id ? 'border-indigo-500 bg-indigo-50 dark:bg-indigo-900/20' : 'border-gray-200 dark:border-gray-700 hover:border-gray-300 dark:hover:border-gray-600' }}">
                            <input type="radio" name="commission_program_id" value="{{ $program->id }}"
                                   class="mt-1 h-4 w-4 text-indigo-600 border-gray-300 focus:ring-indigo-500"
                                   {{ $agent->commission_program_id == $program->id ? 'checked' : '' }}
                                   {{ !$program->is_active ? 'disabled' : '' }}
                                   data-type="{{ $program->type }}">
                            <div class="ml-3 flex-1">
                                <div class="flex items-center gap-2">
                                    <div class="w-8 h-8 rounded-lg flex items-center justify-center {{ $program->badge_class }}">
                                        <svg class="w-4 h-4" 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>
                                    <span class="font-medium text-gray-900 dark:text-white">{{ $program->name }}</span>
                                    @if($program->is_default)
                                        <span class="text-xs bg-indigo-100 dark:bg-indigo-900/50 text-indigo-600 dark:text-indigo-400 px-2 py-0.5 rounded">Default</span>
                                    @endif
                                    @if(!$program->is_active)
                                        <span class="text-xs bg-red-100 dark:bg-red-900/50 text-red-600 dark:text-red-400 px-2 py-0.5 rounded">Inactive</span>
                                    @endif
                                </div>
                                <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">{{ $program->description }}</p>

                                @if($program->type === 'performance')
                                    <div class="mt-3 p-3 bg-blue-50 dark:bg-blue-900/20 rounded-lg">
                                        <p class="text-xs text-blue-700 dark:text-blue-300">
                                            <strong>How it works:</strong> Commission rate is determined by last month's total sales. Higher sales = higher tier = better rate.
                                        </p>
                                        <div class="mt-2 flex flex-wrap gap-2">
                                            @foreach($performanceTiers->take(4) as $tier)
                                                <span class="text-xs {{ $tier->badge_class }} px-2 py-0.5 rounded">
                                                    {{ $tier->name }}: {{ $tier->commission_rate }}%
                                                </span>
                                            @endforeach
                                        </div>
                                    </div>
                                @elseif($program->type === 'legacy')
                                    <div class="mt-3 p-3 bg-amber-50 dark:bg-amber-900/20 rounded-lg">
                                        <p class="text-xs text-amber-700 dark:text-amber-300">
                                            <strong>How it works:</strong> Fixed commission rate that never changes. Perfect for grandfathered agents.
                                        </p>
                                    </div>
                                @elseif($program->type === 'progressive')
                                    <div class="mt-3 p-3 bg-green-50 dark:bg-green-900/20 rounded-lg">
                                        <p class="text-xs text-green-700 dark:text-green-300">
                                            <strong>How it works:</strong> Commission rate increases as cumulative sales reach thresholds within the month. Resets on the 1st of each month.
                                        </p>
                                        <div class="mt-2 flex flex-wrap gap-2">
                                            @foreach($performanceTiers->take(4) as $tier)
                                                <span class="text-xs {{ $tier->badge_class }} px-2 py-0.5 rounded">
                                                    ≥RM{{ number_format($tier->min_sales_amount) }}: {{ $tier->commission_rate }}%
                                                </span>
                                            @endforeach
                                        </div>
                                    </div>
                                @endif
                            </div>
                        </label>
                    @endforeach
                </div>

                <!-- Legacy Program Fields -->
                <div id="legacy-fields" class="hidden space-y-4 p-4 bg-amber-50 dark:bg-amber-900/20 rounded-lg border border-amber-200 dark:border-amber-800">
                    <h4 class="font-medium text-amber-800 dark:text-amber-200">Legacy Program Settings</h4>
                    <div class="grid grid-cols-2 gap-4">
                        <div>
                            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                                Fixed Commission Rate (%) <span class="text-red-500">*</span>
                            </label>
                            <input type="number" name="legacy_commission_rate" id="legacy_commission_rate"
                                   value="{{ old('legacy_commission_rate', $agent->legacy_commission_rate) }}"
                                   step="0.01" min="0" max="100"
                                   class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white">
                            @error('legacy_commission_rate')
                                <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                            @enderror
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                                Note (optional)
                            </label>
                            <input type="text" name="legacy_program_note"
                                   value="{{ old('legacy_program_note', $agent->legacy_program_note) }}"
                                   placeholder="e.g., Grandfathered 2024"
                                   class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white">
                        </div>
                    </div>
                </div>

                @error('commission_program_id')
                    <p class="text-sm text-red-600">{{ $message }}</p>
                @enderror
            </div>

            <div class="px-6 py-4 bg-gray-50 dark:bg-gray-700/50 border-t border-gray-200 dark:border-gray-700 flex justify-end gap-3">
                <a href="{{ route('commission-programs.index') }}"
                   class="px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700">
                    Cancel
                </a>
                <button type="submit"
                        class="px-4 py-2 text-sm font-medium text-white bg-indigo-600 rounded-lg hover:bg-indigo-700">
                    Save Changes
                </button>
            </div>
        </div>
    </form>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const radios = document.querySelectorAll('input[name="commission_program_id"]');
    const legacyFields = document.getElementById('legacy-fields');
    const legacyRateInput = document.getElementById('legacy_commission_rate');

    function toggleLegacyFields() {
        const selected = document.querySelector('input[name="commission_program_id"]:checked');
        if (selected && selected.dataset.type === 'legacy') {
            legacyFields.classList.remove('hidden');
            legacyRateInput.required = true;
        } else {
            legacyFields.classList.add('hidden');
            legacyRateInput.required = false;
        }
    }

    radios.forEach(radio => {
        radio.addEventListener('change', toggleLegacyFields);
    });

    // Initial state
    toggleLegacyFields();
});
</script>
@endsection