@props([
    'title' => 'Form',
    'subtitle' => 'Please fill in the required information',
    'action' => '#',
    'method' => 'POST',
    'sections' => [],
    'submitText' => 'Submit',
    'backUrl' => null,
    'showSaveDraft' => false,
    'disabled' => false,
    'icon' => null
])

<div class="max-w-6xl mx-auto p-6">
    <!-- Modern Form Card -->
    <div class="bg-white/95 backdrop-blur-xl rounded-2xl shadow-2xl border border-white/30 overflow-hidden card-container">
        <!-- Form Header -->
        <div class="form-header relative overflow-hidden">
            <div class="absolute top-0 right-0 w-32 h-32 bg-white/10 rounded-full blur-3xl -mr-16 -mt-16"></div>
            <div class="absolute bottom-0 left-0 w-24 h-24 bg-white/10 rounded-full blur-2xl -ml-12 -mb-12"></div>
            <div class="relative z-10">
                <h3 class="flex items-center">
                    @if($icon)
                        {!! $icon !!}
                    @else
                        <svg class="w-6 h-6 mr-3" fill="currentColor" viewBox="0 0 24 24">
                            <path d="M9 11H7v2h2v-2zm4 0h-2v2h2v-2zm4 0h-2v2h2v-2zm2-7h-1V2h-2v2H8V2H6v2H5c-1.11 0-1.99.9-1.99 2L3 20c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 16H5V9h14v11z"/>
                        </svg>
                    @endif
                    {{ $title }}
                </h3>
                <p>{{ $subtitle }}</p>
            </div>
        </div>
        
        <!-- Form Body -->
        <form action="{{ $action }}" method="{{ $method }}" class="form-body">
            @csrf
            @if($method == 'PUT')
                @method('PUT')
            @endif
            
            @foreach($sections as $section)
                <div class="form-section">
                    @if($section['title'])
                        <h4 class="form-section-title">
                            @if($section['icon'])
                                {!! $section['icon'] !!}
                            @endif
                            {{ $section['title'] }}
                        </h4>
                    @endif
                    
                    <div class="{{ $section['grid'] ?? 'grid-2' }}">
                        @foreach($section['fields'] as $field)
                            <div class="form-group {{ $field['class'] ?? '' }}">
                                @switch($field['type'])
                                    @case('text')
                                    @case('email')
                                    @case('tel')
                                    @case('password')
                                        <label class="form-label">
                                            {{ $field['label'] }} 
                                            @if($field['required'] ?? false)<span class="required">*</span>@endif
                                        </label>
                                        <div class="input-group">
                                            @if($field['icon'] ?? false)
                                                <span class="input-icon">{!! $field['icon'] !!}</span>
                                            @endif
                                            <input 
                                                type="{{ $field['type'] }}" 
                                                name="{{ $field['name'] }}" 
                                                {{ $field['required'] ?? false ? 'required' : '' }}
                                                {{ ($field['readonly'] ?? false) || $disabled ? 'readonly' : '' }}
                                                {{ $field['placeholder'] ? 'placeholder="' . htmlspecialchars(trim($field['placeholder'], '"\''), ENT_QUOTES, 'UTF-8') . '"' : '' }}
                                                {{ $field['value'] ? 'value="' . htmlspecialchars(trim($field['value'], '"\''), ENT_QUOTES, 'UTF-8') . '"' : '' }}
                                                class="form-input w-full border-2 border-gray-200 rounded-xl focus:border-red-500 focus:ring-4 focus:ring-red-100 outline-none bg-gray-50 hover:bg-white text-gray-900 placeholder-gray-500 {{ $field['icon'] ?? false ? 'input-with-icon' : '' }} {{ ($field['readonly'] ?? false) || $disabled ? 'bg-gray-100 cursor-not-allowed' : '' }}"
                                                {{ $field['attributes'] ?? '' }}
                                            >
                                        </div>
                                        @if($field['help'] ?? false)
                                            <p class="text-xs text-gray-500 mt-1">{{ $field['help'] }}</p>
                                        @endif
                                        @break
                                        
                                    @case('textarea')
                                        <label class="form-label">
                                            {{ $field['label'] }} 
                                            @if($field['required'] ?? false)<span class="required">*</span>@endif
                                        </label>
                                        <textarea 
                                            name="{{ $field['name'] }}" 
                                            rows="{{ $field['rows'] ?? 3 }}"
                                            {{ $field['required'] ?? false ? 'required' : '' }}
                                            {{ ($field['readonly'] ?? false) || $disabled ? 'readonly' : '' }}
                                            {{ $field['placeholder'] ? 'placeholder="' . htmlspecialchars(trim($field['placeholder'], '"\''), ENT_QUOTES, 'UTF-8') . '"' : '' }}
                                            class="form-textarea w-full border-2 border-gray-200 rounded-xl focus:border-red-500 focus:ring-4 focus:ring-red-100 outline-none bg-gray-50 hover:bg-white resize-none text-gray-900 placeholder-gray-500 {{ ($field['readonly'] ?? false) || $disabled ? 'bg-gray-100 cursor-not-allowed' : '' }}"
                                            {{ $field['attributes'] ?? '' }}
                                        >{{ isset($field['value']) ? htmlspecialchars(trim($field['value'], '"\''), ENT_QUOTES, 'UTF-8') : '' }}</textarea>
                                        @if($field['help'] ?? false)
                                            <p class="text-xs text-gray-500 mt-1">{{ $field['help'] }}</p>
                                        @endif
                                        @break
                                        
                                    @case('select')
                                        <label class="form-label">
                                            {{ $field['label'] }} 
                                            @if($field['required'] ?? false)<span class="required">*</span>@endif
                                        </label>
                                        <div class="relative">
                                            <select 
                                                name="{{ $field['name'] }}" 
                                                {{ $field['required'] ?? false ? 'required' : '' }}
                                                {{ ($field['readonly'] ?? false) || $disabled ? 'disabled' : '' }}
                                                class="form-select w-full border-2 border-gray-200 rounded-xl focus:border-red-500 focus:ring-4 focus:ring-red-100 outline-none bg-gray-50 hover:bg-white appearance-none text-gray-900 {{ ($field['readonly'] ?? false) || $disabled ? 'bg-gray-100 cursor-not-allowed' : '' }}"
                                                {{ $field['attributes'] ?? '' }}
                                            >
                                                <option value="">{{ $field['placeholder'] ?? 'Select an option' }}</option>
                                                @foreach($field['options'] as $value => $label)
                                                    <option value="{{ $value }}" {{ ($field['selected'] ?? null) == $value ? 'selected' : '' }}>
                                                        {{ $label }}
                                                    </option>
                                                @endforeach
                                            </select>
                                            <div class="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 pointer-events-none">
                                                <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
                                                    <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"/>
                                                </svg>
                                            </div>
                                        </div>
                                        @if($field['help'] ?? false)
                                            <p class="text-xs text-gray-500 mt-1">{{ $field['help'] }}</p>
                                        @endif
                                        @break
                                        
                                    @case('checkbox')
                                        <div class="flex items-center space-x-3 mt-6">
                                            <input 
                                                type="checkbox" 
                                                name="{{ $field['name'] }}" 
                                                value="1"
                                                {{ $field['checked'] ?? false ? 'checked' : '' }}
                                                class="w-4 h-4 text-red-600 border-gray-300 rounded focus:ring-red-500"
                                                {{ $field['attributes'] ?? '' }}
                                            >
                                            <label class="form-label mb-0">{{ $field['label'] }}</label>
                                        </div>
                                        @if($field['help'] ?? false)
                                            <p class="text-xs text-gray-500 mt-1">{{ $field['help'] }}</p>
                                        @endif
                                        @break
                                        
                                    @case('file')
                                        <label class="form-label">
                                            {{ $field['label'] }} 
                                            @if($field['required'] ?? false)<span class="required">*</span>@endif
                                        </label>
                                        <input 
                                            type="file" 
                                            name="{{ $field['name'] }}" 
                                            {{ $field['required'] ?? false ? 'required' : '' }}
                                            {{ $field['accept'] ? 'accept="' . $field['accept'] . '"' : '' }}
                                            class="form-input w-full border-2 border-gray-200 rounded-xl focus:border-red-500 focus:ring-4 focus:ring-red-100 outline-none bg-gray-50 hover:bg-white text-gray-900 file:mr-4 file:py-2 file:px-4 file:rounded-full file:border-0 file:text-sm file:font-semibold file:bg-red-50 file:text-red-700 hover:file:bg-red-100"
                                            {{ $field['attributes'] ?? '' }}
                                        >
                                        @if($field['help'] ?? false)
                                            <p class="text-xs text-gray-500 mt-1">{{ $field['help'] }}</p>
                                        @endif
                                        @break
                                @endswitch
                            </div>
                        @endforeach
                    </div>
                </div>
            @endforeach
            
            <!-- Form Actions -->
            <div class="form-actions">
                <div>
                    @if($backUrl)
                        <a href="{{ $backUrl }}" class="btn-secondary flex items-center">
                            <svg class="w-4 h-4 mr-2" fill="currentColor" viewBox="0 0 24 24">
                                <path d="M15 18l-6-6 6-6"/>
                            </svg>
                            Back
                        </a>
                    @endif
                </div>
                <div class="flex gap-3">
                    @if($showSaveDraft)
                        <button type="button" onclick="saveAsDraft()" class="btn-secondary flex items-center">
                            <svg class="w-4 h-4 mr-2" fill="currentColor" viewBox="0 0 24 24">
                                <path d="M17 3H5c-1.11 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V7l-4-4zm-5 16c-1.66 0-3-1.34-3-3s1.34-3 3-3 3 1.34 3 3zm3-10H5v6h4V7h6v6z"/>
                            </svg>
                            Save as Draft
                        </button>
                    @endif
                    <button type="submit" class="btn-primary flex items-center" {{ $disabled ? 'disabled' : '' }}>
                        {{ $submitText }}
                        <svg class="w-4 h-4 ml-2" fill="currentColor" viewBox="0 0 24 24">
                            <path d="M9 18l6-6-6-6"/>
                        </svg>
                    </button>
                </div>
            </div>
        </form>
    </div>
</div>

@if($showSaveDraft)
<script>
function saveAsDraft() {
    const form = document.querySelector('form');
    const formData = new FormData(form);
    const data = {};
    formData.forEach((value, key) => {
        data[key] = value;
    });
    localStorage.setItem('formData', JSON.stringify(data));
    alert('Form saved as draft!');
}

// Restore form data on page load (only if input is empty - don't override database values)
document.addEventListener('DOMContentLoaded', function() {
    const savedData = localStorage.getItem('formData');
    if (savedData) {
        const data = JSON.parse(savedData);
        Object.keys(data).forEach(key => {
            const input = document.querySelector(`[name="${key}"]`);
            // Only restore if input exists and is empty (no value from database)
            if (input && !input.value && data[key]) {
                if (input.type === 'checkbox') {
                    input.checked = data[key] === '1';
                } else {
                    input.value = data[key];
                }
            }
        });
    }
    
    // Auto-save on input change
    const form = document.querySelector('form');
    const inputs = form.querySelectorAll('input, select, textarea');
    inputs.forEach(input => {
        input.addEventListener('input', saveAsDraft);
        input.addEventListener('change', saveAsDraft);
    });
    
    // Clear draft on submit
    form.addEventListener('submit', function(e) {
        localStorage.removeItem('formData');
    });
});
</script>
@endif