@extends('layouts.app')

@section('title', 'Registration Settings')

@section('content')
<div class="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
    <div class="mb-6">
        <h1 class="text-3xl font-bold tracking-tight text-gray-900 dark:text-white">Registration Settings</h1>
        <p class="mt-2 text-sm text-gray-700 dark:text-gray-300">Configure agent registration requirements and pricing</p>
    </div>

    @if(session('success'))
        <div class="mb-6 rounded-lg bg-green-50 dark:bg-green-900/50 p-4">
            <p class="text-sm text-green-800 dark:text-green-200">{{ session('success') }}</p>
        </div>
    @endif

    @if($errors->any())
        <div class="mb-6 rounded-lg bg-red-50 dark:bg-red-900/50 p-4">
            <p class="text-sm font-medium text-red-800 dark:text-red-200">Please fix the following errors:</p>
            <ul class="mt-2 text-sm text-red-700 dark:text-red-300 list-disc list-inside">
                @foreach($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
    @endif

    <form method="POST" action="{{ route('admin.registration-settings.update') }}">
        @csrf
        @method('PUT')

        <!-- Registration Type -->
        <div class="bg-white dark:bg-gray-800 shadow rounded-lg p-6 mb-6">
            <h2 class="text-lg font-semibold text-gray-900 dark:text-white mb-4">Registration Type</h2>

            <div class="space-y-4">
                <div>
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-3">How should new agents register?</label>

                    <div class="space-y-3">
                        <label class="flex items-start p-4 border rounded-lg cursor-pointer transition-colors {{ $settings['registration_type'] === 'product' ? 'border-indigo-500 bg-indigo-50 dark:bg-indigo-900/20' : 'border-gray-300 dark:border-gray-600 hover:border-gray-400' }}">
                            <input type="radio" name="registration_type" value="product"
                                {{ $settings['registration_type'] === 'product' ? 'checked' : '' }}
                                class="mt-0.5 h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300">
                            <div class="ml-3">
                                <span class="block text-sm font-medium text-gray-900 dark:text-white">Product Commitment</span>
                                <span class="block text-sm text-gray-500 dark:text-gray-400">Agents select products to purchase during registration (minimum commitment required)</span>
                            </div>
                        </label>

                        <label class="flex items-start p-4 border rounded-lg cursor-pointer transition-colors {{ $settings['registration_type'] === 'fee' ? 'border-indigo-500 bg-indigo-50 dark:bg-indigo-900/20' : 'border-gray-300 dark:border-gray-600 hover:border-gray-400' }}">
                            <input type="radio" name="registration_type" value="fee"
                                {{ $settings['registration_type'] === 'fee' ? 'checked' : '' }}
                                class="mt-0.5 h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300">
                            <div class="ml-3">
                                <span class="block text-sm font-medium text-gray-900 dark:text-white">Registration Fee</span>
                                <span class="block text-sm text-gray-500 dark:text-gray-400">Agents pay a fixed registration fee (configured in Registration Fees)</span>
                            </div>
                        </label>
                    </div>
                </div>
            </div>
        </div>

        <!-- Product Commitment Settings -->
        <div class="bg-white dark:bg-gray-800 shadow rounded-lg p-6 mb-6" id="product-settings">
            <h2 class="text-lg font-semibold text-gray-900 dark:text-white mb-4">Product Commitment Settings</h2>
            <p class="text-sm text-gray-500 dark:text-gray-400 mb-4">These settings apply when registration type is "Product Commitment"</p>

            <div class="space-y-4">
                <div>
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Minimum Commitment Amount (RM)</label>
                    <input type="number" name="registration_minimum_commitment"
                        value="{{ old('registration_minimum_commitment', $settings['minimum_commitment']) }}"
                        step="0.01" min="0"
                        class="w-full px-4 py-2.5 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-indigo-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-white"
                        placeholder="500.00">
                    <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">Minimum total value of products an agent must purchase to complete registration</p>
                </div>

                <div>
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Agent Discount (%)</label>
                    <input type="number" name="registration_agent_discount_percent"
                        value="{{ old('registration_agent_discount_percent', $settings['agent_discount_percent']) }}"
                        step="0.01" min="0" max="100"
                        class="w-full px-4 py-2.5 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-indigo-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-white"
                        placeholder="25.00">
                    <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">Discount percentage from retail price for agents during registration</p>
                </div>
            </div>

            <!-- Example Calculation -->
            <div class="mt-6 p-4 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
                <h3 class="text-sm font-medium text-gray-900 dark:text-white mb-2">Example Calculation</h3>
                <div class="text-sm text-gray-600 dark:text-gray-300 space-y-1">
                    <p>If a product has retail price of <strong>RM 100.00</strong>:</p>
                    <p class="pl-4">Agent Price = RM 100.00 - (<span id="example-discount">{{ $settings['agent_discount_percent'] }}</span>% discount) = <strong>RM <span id="example-price">{{ number_format(100 - (100 * $settings['agent_discount_percent'] / 100), 2) }}</span></strong></p>
                </div>
            </div>
        </div>

        <!-- Referral Commission Settings -->
        <div class="bg-white dark:bg-gray-800 shadow rounded-lg p-6 mb-6">
            <h2 class="text-lg font-semibold text-gray-900 dark:text-white mb-4">Referral Commission</h2>
            <p class="text-sm text-gray-500 dark:text-gray-400 mb-4">Configure commission for referrers when new agents register using their referral code</p>

            <div class="space-y-4">
                <!-- Enable/Disable -->
                <div>
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-3">Enable Referral Commission?</label>
                    <div class="flex space-x-4">
                        <label class="flex items-center">
                            <input type="radio" name="referral_commission_enabled" value="true"
                                {{ $referralSettings['enabled'] ? 'checked' : '' }}
                                class="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300">
                            <span class="ml-2 text-sm text-gray-900 dark:text-white">Yes</span>
                        </label>
                        <label class="flex items-center">
                            <input type="radio" name="referral_commission_enabled" value="false"
                                {{ !$referralSettings['enabled'] ? 'checked' : '' }}
                                class="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300">
                            <span class="ml-2 text-sm text-gray-900 dark:text-white">No</span>
                        </label>
                    </div>
                    <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">When enabled, the referring agent earns commission when a new agent completes registration</p>
                </div>

                <!-- Commission Type -->
                <div id="commission-type-section">
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Commission Type</label>
                    <select name="referral_commission_type"
                        class="w-full px-4 py-2.5 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-indigo-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-white">
                        <option value="fixed" {{ $referralSettings['type'] === 'fixed' ? 'selected' : '' }}>Fixed Amount Only</option>
                        <option value="percentage" {{ $referralSettings['type'] === 'percentage' ? 'selected' : '' }}>Percentage Only</option>
                        <option value="both" {{ $referralSettings['type'] === 'both' ? 'selected' : '' }}>Fixed + Percentage</option>
                    </select>
                </div>

                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <!-- Fixed Amount -->
                    <div id="fixed-amount-section">
                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Fixed Amount (RM)</label>
                        <input type="number" name="referral_commission_fixed"
                            value="{{ old('referral_commission_fixed', $referralSettings['fixed_amount']) }}"
                            step="0.01" min="0"
                            class="w-full px-4 py-2.5 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-indigo-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-white"
                            placeholder="0.00">
                        <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">Fixed commission per registration</p>
                    </div>

                    <!-- Percentage -->
                    <div id="percentage-section">
                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Percentage (%)</label>
                        <input type="number" name="referral_commission_percent"
                            value="{{ old('referral_commission_percent', $referralSettings['percentage']) }}"
                            step="0.01" min="0" max="100"
                            class="w-full px-4 py-2.5 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-indigo-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-white"
                            placeholder="10.00">
                        <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">Percentage of registration amount (after discount)</p>
                    </div>
                </div>
            </div>

            <!-- Example Calculation -->
            <div class="mt-6 p-4 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
                <h3 class="text-sm font-medium text-gray-900 dark:text-white mb-2">Example Calculation</h3>
                <div class="text-sm text-gray-600 dark:text-gray-300 space-y-1">
                    <p>If new agent registers with <strong>RM 500.00</strong> product commitment:</p>
                    <p class="pl-4" id="referral-example">
                        Referral Commission = <strong>RM <span id="referral-commission-result">{{ number_format($referralSettings['type'] === 'fixed' ? $referralSettings['fixed_amount'] : ($referralSettings['type'] === 'percentage' ? 500 * $referralSettings['percentage'] / 100 : $referralSettings['fixed_amount'] + (500 * $referralSettings['percentage'] / 100)), 2) }}</span></strong>
                    </p>
                </div>
            </div>
        </div>

        <!-- Quick Links -->
        <div class="bg-white dark:bg-gray-800 shadow rounded-lg p-6 mb-6">
            <h2 class="text-lg font-semibold text-gray-900 dark:text-white mb-4">Related Settings</h2>
            <div class="space-y-3">
                <a href="{{ route('admin.payment-settings.index') }}" class="flex items-center justify-between p-3 border border-gray-200 dark:border-gray-700 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700/50 transition-colors">
                    <div>
                        <span class="block text-sm font-medium text-gray-900 dark:text-white">Payment Gateway</span>
                        <span class="block text-sm text-gray-500 dark:text-gray-400">Configure BayarCash settings and payment fees</span>
                    </div>
                    <svg class="w-5 h-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
                    </svg>
                </a>
                <a href="{{ route('admin.registrations.index') }}" class="flex items-center justify-between p-3 border border-gray-200 dark:border-gray-700 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700/50 transition-colors">
                    <div>
                        <span class="block text-sm font-medium text-gray-900 dark:text-white">View Registrations</span>
                        <span class="block text-sm text-gray-500 dark:text-gray-400">Manage pending and completed agent registrations</span>
                    </div>
                    <svg class="w-5 h-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
                    </svg>
                </a>
            </div>
        </div>

        <button type="submit" class="w-full py-3 px-4 bg-indigo-600 hover:bg-indigo-700 text-white font-medium rounded-lg">
            Save Settings
        </button>
    </form>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const discountInput = document.querySelector('input[name="registration_agent_discount_percent"]');
    const exampleDiscount = document.getElementById('example-discount');
    const examplePrice = document.getElementById('example-price');

    discountInput.addEventListener('input', function() {
        const discount = parseFloat(this.value) || 0;
        const price = 100 - (100 * discount / 100);
        exampleDiscount.textContent = discount.toFixed(2);
        examplePrice.textContent = price.toFixed(2);
    });

    // Update radio button styling
    const radios = document.querySelectorAll('input[name="registration_type"]');
    radios.forEach(radio => {
        radio.addEventListener('change', function() {
            document.querySelectorAll('input[name="registration_type"]').forEach(r => {
                const label = r.closest('label');
                if (r.checked) {
                    label.classList.add('border-indigo-500', 'bg-indigo-50', 'dark:bg-indigo-900/20');
                    label.classList.remove('border-gray-300', 'dark:border-gray-600');
                } else {
                    label.classList.remove('border-indigo-500', 'bg-indigo-50', 'dark:bg-indigo-900/20');
                    label.classList.add('border-gray-300', 'dark:border-gray-600');
                }
            });
        });
    });

    // Referral commission calculations
    const commissionType = document.querySelector('select[name="referral_commission_type"]');
    const fixedInput = document.querySelector('input[name="referral_commission_fixed"]');
    const percentInput = document.querySelector('input[name="referral_commission_percent"]');
    const commissionResult = document.getElementById('referral-commission-result');
    const fixedSection = document.getElementById('fixed-amount-section');
    const percentSection = document.getElementById('percentage-section');

    function updateCommissionExample() {
        const type = commissionType.value;
        const fixed = parseFloat(fixedInput.value) || 0;
        const percent = parseFloat(percentInput.value) || 0;
        const baseAmount = 500; // Example base amount

        let commission = 0;
        if (type === 'fixed') {
            commission = fixed;
        } else if (type === 'percentage') {
            commission = baseAmount * (percent / 100);
        } else if (type === 'both') {
            commission = fixed + (baseAmount * (percent / 100));
        }

        commissionResult.textContent = commission.toFixed(2);
    }

    function updateFieldVisibility() {
        const type = commissionType.value;
        fixedSection.style.opacity = (type === 'fixed' || type === 'both') ? '1' : '0.5';
        percentSection.style.opacity = (type === 'percentage' || type === 'both') ? '1' : '0.5';
    }

    commissionType.addEventListener('change', function() {
        updateCommissionExample();
        updateFieldVisibility();
    });

    fixedInput.addEventListener('input', updateCommissionExample);
    percentInput.addEventListener('input', updateCommissionExample);

    // Initial visibility
    updateFieldVisibility();
});
</script>
@endsection