@extends('layouts.main')

@section('title')
    {{ __('credit_packages.create') }}
@endsection

@section('page_title')
    {{ __('credit_packages.create') }}
@endsection

@php
    $breadcrumbs = [
        ['url' => route('dashboard'), 'label' => __('credit_packages.dashboard')],
        ['url' => route('admin.credits.dashboard'), 'label' => __('credit_packages.credit_management')],
        ['url' => route('credit-packages.index'), 'label' => __('credit_packages.packages')],
        ['url' => '', 'label' => __('credit_packages.create')],
    ];
@endphp

@section('content')
    <div class="w-full space-y-6">
        <!-- Header Section -->
        <div class="border border-white bg-fl-gray-extra-light/50 backdrop-blur-xl rounded-24 p-4 sm:p-6 shadow-front-box-shadow-glow">
            <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
                <div class="flex items-center space-x-3 sm:space-x-4">
                    <div class="w-10 h-10 sm:w-12 sm:h-12 bg-primary rounded-lg flex items-center justify-center shadow-sm flex-shrink-0">
                        <i class="fas fa-plus text-white text-lg sm:text-xl"></i>
                    </div>
                    <div class="flex-1 min-w-0">
                        <h1 class="text-xl sm:text-2xl font-semibold text-gray-700">{{ __('credit_packages.create') }}</h1>
                        <p class="text-sm sm:text-base text-gray-600 mt-1">{{ __('credit_packages.create_description') }}</p>
                    </div>
                </div>
                <a href="{{ route('credit-packages.index') }}" class="btn btn-outline-secondary shadow-lg hover:shadow-xl w-full sm:w-auto justify-center">
                    <i class="fas fa-arrow-left mr-2"></i>
                    <span class="hidden sm:inline whitespace-nowrap">{{ __('credit_packages.back_to_packages') }}</span>
                    <span class="sm:hidden">{{ __('credit_packages.back') }}</span>
                </a>
            </div>
        </div>

        <!-- Form Card -->
        <div class="border border-white bg-fl-gray-extra-light/50 backdrop-blur-xl rounded-24 shadow-front-box-shadow-glow">
            <div class="md:p-6 p-4">
                <form action="{{ route('credit-packages.store') }}" method="POST">
                    @csrf
                
                <div class="space-y-6">
                    <!-- Basic Info -->
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                        <div>
                            <label for="name" class="form-label">{{ __('credit_packages.package_name') }} *</label>
                            <input type="text" name="name" id="name" class="form-control @error('name') border-red-500 @enderror" value="{{ old('name') }}" required>
                            <p class="text-xs text-gray-500 mt-1">{{ __('credit_packages.package_name_help') }}</p>
                            @error('name')
                                <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                            @enderror
                        </div>

                        <div>
                            <label for="title" class="form-label">{{ __('credit_packages.display_title') }} *</label>
                            <input type="text" name="title" id="title" class="form-control @error('title') border-red-500 @enderror" value="{{ old('title') }}" required>
                            <p class="text-xs text-gray-500 mt-1">{{ __('credit_packages.display_title_help') }}</p>
                            @error('title')
                                <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                            @enderror
                        </div>
                    </div>

                    <div>
                        <label for="subtitle" class="form-label">{{ __('credit_packages.subtitle') }}</label>
                        <input type="text" name="subtitle" id="subtitle" class="form-control @error('subtitle') border-red-500 @enderror" value="{{ old('subtitle') }}">
                        <p class="text-xs text-gray-500 mt-1">{{ __('credit_packages.subtitle_help') }}</p>
                        @error('subtitle')
                            <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                        @enderror
                    </div>

                    <!-- Pricing -->
                    <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                        <div>
                            <label for="credits" class="form-label">{{ __('credit_packages.credits_label') }} *</label>
                            <input type="number" name="credits" id="credits" class="form-control @error('credits') border-red-500 @enderror" value="{{ old('credits') }}" min="1" required>
                            @error('credits')
                                <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                            @enderror
                        </div>

                        <div>
                            <label for="price" class="form-label">{{ __('credit_packages.price_label') }} *</label>
                            <input type="number" step="0.01" name="price" id="price" class="form-control @error('price') border-red-500 @enderror" value="{{ old('price') }}" min="0" required>
                            @error('price')
                                <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                            @enderror
                        </div>

                        <div>
                            <label for="effective_rate" class="form-label">{{ __('credit_packages.rate_per_message_label') }} *</label>
                            <input type="number" step="0.01" name="effective_rate" id="effective_rate" class="form-control @error('effective_rate') border-red-500 @enderror" value="{{ old('effective_rate') }}" min="0" required readonly>
                            <p class="text-xs text-gray-500 mt-1">{{ __('credit_packages.rate_help') }}</p>
                            @error('effective_rate')
                                <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                            @enderror
                        </div>
                    </div>

                    <!-- Features -->
                    <div>
                        <label class="form-label">{{ __('credit_packages.features') }}</label>
                        <div id="features-container" class="space-y-2">
                            @if(old('features'))
                                @foreach(old('features') as $index => $feature)
                                    <div class="flex gap-2 items-center">
                                        <input type="text" name="features[]" class="form-control" value="{{ $feature }}">
                                        <button type="button" onclick="removeFeature(this)" class="btn btn-outline-danger">
                                            <i class="fas fa-times"></i>
                                        </button>
                                    </div>
                                @endforeach
                            @else
                                <div class="flex gap-2 items-center">
                                    <input type="text" name="features[]" class="form-control" placeholder="{{ __('credit_packages.features_placeholder') }}">
                                    <button type="button" onclick="removeFeature(this)" class="btn btn-outline-danger">
                                        <i class="fas fa-times"></i>
                                    </button>
                                </div>
                            @endif
                        </div>
                        <button type="button" onclick="addFeature()" class="btn btn-outline-secondary mt-2">
                            <i class="fas fa-plus mr-2"></i>{{ __('credit_packages.add_feature') }}
                        </button>
                    </div>

                    <!-- Settings -->
                    <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                        <div>
                            <label for="sort_order" class="form-label">{{ __('credit_packages.sort_order') }} *</label>
                            <input type="number" name="sort_order" id="sort_order" class="form-control @error('sort_order') border-red-500 @enderror" value="{{ old('sort_order', 0) }}" min="0" required>
                            @error('sort_order')
                                <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                            @enderror
                        </div>

                        <div class="flex items-center">
                            <input id="is_popular" name="is_popular" type="checkbox" value="1" {{ old('is_popular') ? 'checked' : '' }} 
                                   class="h-4 w-4 text-primary focus:ring-primary border-gray-300 rounded" />
                            <label for="is_popular" class="ml-2 block text-sm text-gray-700 cursor-pointer">
                                {{ __('credit_packages.mark_as_popular') }}
                            </label>
                        </div>

                        <div class="flex items-center">
                            <input id="is_active" name="is_active" type="checkbox" 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-700 cursor-pointer">
                                {{ __('credit_packages.active_label') }}
                            </label>
                        </div>
                    </div>

                    <!-- Submit Buttons -->
                    <div class="flex gap-3 pt-6 border-t border-white/30 justify-end">
                        <button type="submit" class="btn btn-primary">
                            <i class="fas fa-save mr-2"></i>{{ __('credit_packages.create_package_button') }}
                        </button>
                        <a href="{{ route('credit-packages.index') }}" class="btn btn-outline-secondary">
                            <i class="fas fa-times mr-2"></i>{{ __('credit_packages.cancel') }}
                        </a>
                    </div>
                </div>
                </form>
            </div>
        </div>
    </div>
@endsection

@push('custom_scripts')
<script>
    function addFeature() {
        const container = document.getElementById('features-container');
        const div = document.createElement('div');
        div.className = 'flex gap-2 items-center';
        div.innerHTML = `
            <input type="text" name="features[]" class="form-control" placeholder="{{ __('credit_packages.features_placeholder') }}">
            <button type="button" onclick="removeFeature(this)" class="btn btn-outline-danger">
                <i class="fas fa-times"></i>
            </button>
        `;
        container.appendChild(div);
        
        // Focus on the new input
        const newInput = div.querySelector('input');
        newInput.focus();
        
        // Add smooth animation
        div.style.opacity = '0';
        div.style.transform = 'translateY(-10px)';
        container.appendChild(div);
        
        // Animate in
        setTimeout(() => {
            div.style.transition = 'all 0.3s ease';
            div.style.opacity = '1';
            div.style.transform = 'translateY(0)';
        }, 10);
    }

    function removeFeature(button) {
        const container = document.getElementById('features-container');
        const featureDiv = button.parentElement;
        
        // Only allow removal if there's more than one feature
        if (container.children.length > 1) {
            // Add removal animation
            featureDiv.style.transition = 'all 0.3s ease';
            featureDiv.style.opacity = '0';
            featureDiv.style.transform = 'translateX(-20px)';
            
            // Remove after animation
            setTimeout(() => {
                if (featureDiv.parentNode) {
                    featureDiv.remove();
                }
            }, 300);
        } else {
            // Show a brief message if trying to remove the last feature
            const input = featureDiv.querySelector('input');
            if (input) {
                input.placeholder = @json(__('credit_packages.at_least_one_feature_required'));
                input.style.borderColor = '#ef4444';
                setTimeout(() => {
                    input.placeholder = @json(__('credit_packages.features_placeholder'));
                    input.style.borderColor = '';
                }, 2000);
            }
        }
    }

    // Auto-calculate rate based on price and credits
    function calculateRate() {
        const priceInput = document.getElementById('price');
        const creditsInput = document.getElementById('credits');
        const rateInput = document.getElementById('effective_rate');
        
        const price = parseFloat(priceInput.value) || 0;
        const credits = parseInt(creditsInput.value) || 0;
        
        if (price > 0 && credits > 0) {
            const rate = price / credits;
            rateInput.value = rate.toFixed(2);
        } else {
            rateInput.value = '';
        }
    }

    // Initialize tooltips for dynamically added buttons
    document.addEventListener('DOMContentLoaded', function() {
        // Add event listeners for auto-calculation
        const priceInput = document.getElementById('price');
        const creditsInput = document.getElementById('credits');
        
        if (priceInput) {
            priceInput.addEventListener('input', calculateRate);
            priceInput.addEventListener('change', calculateRate);
        }
        
        if (creditsInput) {
            creditsInput.addEventListener('input', calculateRate);
            creditsInput.addEventListener('change', calculateRate);
        }
        
        // Re-initialize tooltips when new features are added
        const observer = new MutationObserver(function(mutations) {
            mutations.forEach(function(mutation) {
                if (mutation.type === 'childList') {
                    // Re-initialize tooltips for new elements
                    if (typeof reinitTooltips === 'function') {
                        reinitTooltips();
                    }
                }
            });
        });
        
        const container = document.getElementById('features-container');
        if (container) {
            observer.observe(container, { childList: true, subtree: true });
        }
    });
</script>
@endpush