@extends('admin.layouts.app')

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

@section('content')
<div class="container-fluid px-4 py-6">
    <!-- Page Header -->
    <div class="mb-8">
        <div class="flex items-center justify-between">
            <div>
                <h1 class="text-3xl font-bold text-gray-900 mb-2">Create Commission</h1>
                <p class="text-gray-600">Set up commission rates for vendors</p>
            </div>
            <div>
                <a href="{{ route('commissions.index') }}" class="inline-flex items-center px-4 py-2 border border-gray-300 rounded-lg text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary">
                    <i class="fas fa-arrow-left mr-2"></i>
                    Back to Commissions
                </a>
            </div>
        </div>
    </div>

    <!-- Error Messages -->
    @if($errors->any())
        <div class="mb-6 bg-red-50 border border-red-200 rounded-lg p-4">
            <div class="flex">
                <div class="flex-shrink-0">
                    <i class="fas fa-exclamation-circle text-red-400"></i>
                </div>
                <div class="ml-3">
                    <ul class="text-sm text-red-700">
                        @foreach($errors->all() as $error)
                            <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                </div>
            </div>
        </div>
    @endif

    <form action="{{ route('commissions.store') }}" method="POST" class="space-y-8">
        @csrf

        <!-- Basic Information -->
        <div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
            <div class="px-6 py-4 border-b border-gray-200">
                <h3 class="text-lg font-semibold text-gray-900 flex items-center">
                    <i class="fas fa-info-circle mr-3 text-primary"></i>
                    Basic Information
                </h3>
            </div>
            <div class="p-6 space-y-6">
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div>
                        <label for="name" class="block text-sm font-medium text-gray-700 mb-2">Commission Name *</label>
                        <input type="text" id="name" name="name" value="{{ old('name') }}" required
                               class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-transparent transition-colors"
                               placeholder="e.g., Global Commission, Electronics Category">
                    </div>
                    <div>
                        <label for="priority" class="block text-sm font-medium text-gray-700 mb-2">Priority *</label>
                        <input type="number" id="priority" name="priority" value="{{ old('priority', 0) }}" required min="0" max="100"
                               class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-transparent transition-colors"
                               placeholder="Higher number = higher priority">
                        <p class="mt-1 text-sm text-gray-500">Higher priority commissions override lower ones</p>
                    </div>
                </div>
                <div>
                    <label for="description" class="block text-sm font-medium text-gray-700 mb-2">Description</label>
                    <textarea id="description" name="description" rows="3"
                              class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-transparent transition-colors"
                              placeholder="Optional description for this commission rule">{{ old('description') }}</textarea>
                </div>
                <div class="flex items-center">
                    <input type="checkbox" id="is_active" name="is_active" value="1" {{ old('is_active', true) ? 'checked' : '' }}
                           class="h-4 w-4 text-primary focus:ring-primary border-gray-300 rounded">
                    <label for="is_active" class="ml-2 block text-sm text-gray-900">
                        Active - Enable this commission rule
                    </label>
                </div>
            </div>
        </div>

        <!-- Commission Type -->
        <div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
            <div class="px-6 py-4 border-b border-gray-200">
                <h3 class="text-lg font-semibold text-gray-900 flex items-center">
                    <i class="fas fa-cogs mr-3 text-primary"></i>
                    Commission Type & Scope
                </h3>
            </div>
            <div class="p-6 space-y-6">
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-4">Commission Scope *</label>
                    <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                        <div>
                            <input type="radio" id="type_global" name="type" value="global" {{ old('type', 'global') === 'global' ? 'checked' : '' }}
                                   class="sr-only peer" onchange="toggleTypeFields()">
                            <label for="type_global" class="flex items-center justify-center p-4 border-2 border-gray-200 rounded-lg cursor-pointer peer-checked:border-primary peer-checked:bg-primary/5 hover:border-primary transition-colors">
                                <div class="text-center">
                                    <i class="fas fa-globe text-2xl text-gray-400 mb-2"></i>
                                    <div class="text-sm font-medium text-gray-900">Global</div>
                                    <div class="text-xs text-gray-500">Applies to all products</div>
                                </div>
                            </label>
                        </div>
                        <div>
                            <input type="radio" id="type_category" name="type" value="category" {{ old('type') === 'category' ? 'checked' : '' }}
                                   class="sr-only peer" onchange="toggleTypeFields()">
                            <label for="type_category" class="flex items-center justify-center p-4 border-2 border-gray-200 rounded-lg cursor-pointer peer-checked:border-primary peer-checked:bg-primary/5 hover:border-primary transition-colors">
                                <div class="text-center">
                                    <i class="fas fa-folder text-2xl text-gray-400 mb-2"></i>
                                    <div class="text-sm font-medium text-gray-900">Category</div>
                                    <div class="text-xs text-gray-500">Specific to a category</div>
                                </div>
                            </label>
                        </div>
                        <div>
                            <input type="radio" id="type_product" name="type" value="product" {{ old('type') === 'product' ? 'checked' : '' }}
                                   class="sr-only peer" onchange="toggleTypeFields()">
                            <label for="type_product" class="flex items-center justify-center p-4 border-2 border-gray-200 rounded-lg cursor-pointer peer-checked:border-primary peer-checked:bg-primary/5 hover:border-primary transition-colors">
                                <div class="text-center">
                                    <i class="fas fa-box text-2xl text-gray-400 mb-2"></i>
                                    <div class="text-sm font-medium text-gray-900">Product</div>
                                    <div class="text-xs text-gray-500">Specific to a product</div>
                                </div>
                            </label>
                        </div>
                    </div>
                </div>

                <!-- Category Selection -->
                <div id="category_field" class="hidden">
                    <label for="category_id" class="block text-sm font-medium text-gray-700 mb-2">Select Category *</label>
                    <select id="category_id" name="category_id"
                            class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-transparent transition-colors">
                        <option value="">Choose a category...</option>
                        @foreach($categories as $category)
                            <option value="{{ $category->id }}" {{ old('category_id') == $category->id ? 'selected' : '' }}>
                                {{ $category->name }}
                            </option>
                        @endforeach
                    </select>
                </div>

                <!-- Product Selection -->
                <div id="product_field" class="hidden">
                    <label for="product_id" class="block text-sm font-medium text-gray-700 mb-2">Select Product *</label>
                    <select id="product_id" name="product_id"
                            class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-transparent transition-colors">
                        <option value="">Choose a product...</option>
                        @foreach($products as $product)
                            <option value="{{ $product->id }}" {{ old('product_id') == $product->id ? 'selected' : '' }}>
                                {{ $product->name }} ({{ $product->product_code }})
                            </option>
                        @endforeach
                    </select>
                </div>
            </div>
        </div>

        <!-- Commission Rate -->
        <div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
            <div class="px-6 py-4 border-b border-gray-200">
                <h3 class="text-lg font-semibold text-gray-900 flex items-center">
                    <i class="fas fa-percentage mr-3 text-primary"></i>
                    Commission Rate
                </h3>
            </div>
            <div class="p-6 space-y-6">
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-4">Commission Type *</label>
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                        <div>
                            <input type="radio" id="commission_percentage" name="commission_type" value="percentage" {{ old('commission_type', 'percentage') === 'percentage' ? 'checked' : '' }}
                                   class="sr-only peer">
                            <label for="commission_percentage" class="flex items-center p-4 border-2 border-gray-200 rounded-lg cursor-pointer peer-checked:border-primary peer-checked:bg-primary/5 hover:border-primary transition-colors">
                                <i class="fas fa-percentage text-primary mr-3"></i>
                                <div>
                                    <div class="text-sm font-medium text-gray-900">Percentage</div>
                                    <div class="text-xs text-gray-500">Percentage of sale amount</div>
                                </div>
                            </label>
                        </div>
                        <div>
                            <input type="radio" id="commission_fixed" name="commission_type" value="fixed" {{ old('commission_type') === 'fixed' ? 'checked' : '' }}
                                   class="sr-only peer">
                            <label for="commission_fixed" class="flex items-center p-4 border-2 border-gray-200 rounded-lg cursor-pointer peer-checked:border-primary peer-checked:bg-primary/5 hover:border-primary transition-colors">
                                <i class="fas fa-dollar-sign text-primary mr-3"></i>
                                <div>
                                    <div class="text-sm font-medium text-gray-900">Fixed Amount</div>
                                    <div class="text-xs text-gray-500">Fixed amount per sale</div>
                                </div>
                            </label>
                        </div>
                    </div>
                </div>

                <div>
                    <label for="commission_value" class="block text-sm font-medium text-gray-700 mb-2">
                        Commission Value * <span id="value_label">(Percentage)</span>
                    </label>
                    <div class="relative">
                        <input type="number" id="commission_value" name="commission_value" step="0.01" min="0" value="{{ old('commission_value') }}" required
                               class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-transparent transition-colors pr-12"
                               placeholder="Enter commission value">
                        <div class="absolute inset-y-0 right-0 flex items-center pr-3">
                            <span id="value_suffix" class="text-gray-500">%</span>
                        </div>
                    </div>
                    <p class="mt-1 text-sm text-gray-500">Enter the commission rate vendors will earn</p>
                </div>
            </div>
        </div>

        <!-- Save Button -->
        <div class="flex justify-end">
            <button type="submit" class="inline-flex items-center px-6 py-3 border border-transparent rounded-lg shadow-sm text-base font-medium text-white bg-gradient-to-r from-primary to-blue-600 hover:from-primary/90 hover:to-blue-600/90 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary transition-all duration-200 transform hover:scale-105">
                <i class="fas fa-save mr-2"></i>
                Create Commission
            </button>
        </div>
    </form>
</div>

<script>
function toggleTypeFields() {
    const type = document.querySelector('input[name="type"]:checked').value;
    const categoryField = document.getElementById('category_field');
    const productField = document.getElementById('product_field');

    categoryField.classList.add('hidden');
    productField.classList.add('hidden');

    if (type === 'category') {
        categoryField.classList.remove('hidden');
    } else if (type === 'product') {
        productField.classList.remove('hidden');
    }
}

function updateCommissionType() {
    const type = document.querySelector('input[name="commission_type"]:checked').value;
    const label = document.getElementById('value_label');
    const suffix = document.getElementById('value_suffix');
    const input = document.getElementById('commission_value');

    if (type === 'percentage') {
        label.textContent = '(Percentage)';
        suffix.textContent = '%';
        input.step = '0.01';
        input.placeholder = 'e.g., 10.50';
    } else {
        label.textContent = '(Fixed Amount)';
        suffix.textContent = '$';
        input.step = '0.01';
        input.placeholder = 'e.g., 5.00';
    }
}

// Initialize on page load
document.addEventListener('DOMContentLoaded', function() {
    toggleTypeFields();
    updateCommissionType();

    // Add event listeners
    document.querySelectorAll('input[name="type"]').forEach(radio => {
        radio.addEventListener('change', toggleTypeFields);
    });

    document.querySelectorAll('input[name="commission_type"]').forEach(radio => {
        radio.addEventListener('change', updateCommissionType);
    });
});
</script>
@endsection