<x-app-layout>

    <div class="py-12">
        <div class="max-w-4xl mx-auto sm:px-6 lg:px-8">
            <div class="bg-white overflow-hidden shadow-sm sm:rounded-lg">
                <div class="p-6 text-gray-900">
                    
                    @if(session('success'))
                        <div class="mb-6 p-4 bg-green-100 border border-green-400 text-green-700 rounded-lg">
                            <i class="fas fa-check-circle mr-2"></i>
                            {{ session('success') }}
                        </div>
                    @endif

                    <!-- Multi-step form with Alpine.js -->
                    <div x-data="{
                        step: 1,
                        totalSteps: 3,
                        formData: {
                            first_name: '{{ old('first_name') }}',
                            last_name: '{{ old('last_name') }}',
                            email: '{{ old('email') }}',
                            phone: '{{ old('phone') }}',
                            date_of_birth: '{{ old('date_of_birth') }}',
                            country: '{{ old('country') }}',
                            bio: '{{ old('bio') }}'
                        }
                    }">
                        
                        <!-- Progress Bar -->
                        <div class="mb-8">
                            <div class="flex justify-between mb-2">
                                <span class="text-sm font-medium text-gray-700">
                                    Step <span x-text="step"></span> of <span x-text="totalSteps"></span>
                                </span>
                                <span class="text-sm font-medium text-blue-600" x-text="Math.round((step / totalSteps) * 100) + '%'"></span>
                            </div>
                            <div class="w-full bg-gray-200 rounded-full h-3 shadow-inner">
                                <div class="bg-gradient-to-r from-blue-500 to-purple-500 h-3 rounded-full transition-all duration-500 ease-out" 
                                     :style="'width: ' + ((step / totalSteps) * 100) + '%'"></div>
                            </div>
                        </div>

                        <form method="POST" action="{{ route('samples.form.store') }}" enctype="multipart/form-data">
                            @csrf
                            
                            <!-- Step 1: Personal Information -->
                            <fieldset x-show="step === 1" 
                                      x-transition:enter="transition ease-out duration-300"
                                      x-transition:enter-start="opacity-0 transform translate-x-8"
                                      x-transition:enter-end="opacity-100 transform translate-x-0"
                                      class="border-2 border-blue-200 rounded-lg p-6 mb-6 bg-gradient-to-br from-blue-50 to-white">
                                <legend class="text-lg font-semibold px-4 text-blue-800">
                                    <i class="fas fa-user-circle mr-2"></i>
                                    Personal Information
                                </legend>
                                
                                <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mt-4">
                                    <x-forms.input 
                                        name="first_name"
                                        label="First Name"
                                        icon="user"
                                        :required="true"
                                        x-model="formData.first_name"
                                    />
                                    
                                    <x-forms.input 
                                        name="last_name"
                                        label="Last Name"
                                        icon="user"
                                        :required="true"
                                        x-model="formData.last_name"
                                    />
                                    
                                    <x-forms.input 
                                        name="email"
                                        label="Email Address"
                                        type="email"
                                        icon="envelope"
                                        help-text="We'll never share your email"
                                        :required="true"
                                        x-model="formData.email"
                                    />
                                    
                                    <x-forms.input 
                                        name="phone"
                                        label="Phone Number"
                                        type="tel"
                                        icon="phone"
                                        placeholder="(555) 123-4567"
                                        x-mask="(999) 999-9999"
                                        x-model="formData.phone"
                                    />
                                </div>
                            </fieldset>
                            
                            <!-- Step 2: Additional Details -->
                            <fieldset x-show="step === 2"
                                      x-transition:enter="transition ease-out duration-300"
                                      x-transition:enter-start="opacity-0 transform translate-x-8"
                                      x-transition:enter-end="opacity-100 transform translate-x-0"
                                      class="border-2 border-green-200 rounded-lg p-6 mb-6 bg-gradient-to-br from-green-50 to-white">
                                <legend class="text-lg font-semibold px-4 text-green-800">
                                    <i class="fas fa-info-circle mr-2"></i>
                                    Additional Details
                                </legend>
                                
                                <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mt-4">
                                    <x-forms.input 
                                        name="date_of_birth"
                                        label="Date of Birth"
                                        type="date"
                                        icon="calendar"
                                        x-model="formData.date_of_birth"
                                    />
                                    
                                    <x-forms.select 
                                        name="country"
                                        label="Country"
                                        icon="globe"
                                        :options="[
                                            'USA' => 'United States',
                                            'Canada' => 'Canada',
                                            'UK' => 'United Kingdom',
                                            'Australia' => 'Australia',
                                            'Germany' => 'Germany',
                                            'France' => 'France'
                                        ]"
                                        x-model="formData.country"
                                    />
                                    
                                    <div class="col-span-2">
                                        <x-forms.textarea 
                                            name="bio"
                                            label="Biography"
                                            icon="align-left"
                                            rows="4"
                                            help-text="Tell us about yourself (max 1000 characters)"
                                            x-model="formData.bio"
                                        />
                                    </div>
                                </div>
                            </fieldset>
                            
                            <!-- Step 3: File Upload -->
                            <fieldset x-show="step === 3"
                                      x-transition:enter="transition ease-out duration-300"
                                      x-transition:enter-start="opacity-0 transform translate-x-8"
                                      x-transition:enter-end="opacity-100 transform translate-x-0"
                                      class="border-2 border-purple-200 rounded-lg p-6 mb-6 bg-gradient-to-br from-purple-50 to-white">
                                <legend class="text-lg font-semibold px-4 text-purple-800">
                                    <i class="fas fa-file-upload mr-2"></i>
                                    Document Upload
                                </legend>
                                
                                <div x-data="{ 
                                    files: [],
                                    previews: [],
                                    handleFiles(event) {
                                        const fileList = event.target.files;
                                        this.files = Array.from(fileList);
                                        this.previews = [];
                                        
                                        this.files.forEach(file => {
                                            if (file.type.startsWith('image/')) {
                                                const reader = new FileReader();
                                                reader.onload = (e) => {
                                                    this.previews.push({ name: file.name, url: e.target.result, type: 'image' });
                                                };
                                                reader.readAsDataURL(file);
                                            } else {
                                                this.previews.push({ name: file.name, url: null, type: 'file' });
                                            }
                                        });
                                    },
                                    removeFile(index) {
                                        this.files.splice(index, 1);
                                        this.previews.splice(index, 1);
                                    }
                                }" class="mt-4">
                                    <label class="block text-sm font-medium text-gray-700 mb-2">
                                        <i class="fas fa-upload mr-2"></i>
                                        Upload Documents (PDF, DOC, Images)
                                    </label>
                                    
                                    <div class="border-2 border-dashed border-gray-300 rounded-lg p-8 text-center hover:border-blue-500 transition-colors cursor-pointer bg-white">
                                        <i class="fas fa-cloud-upload-alt text-5xl text-gray-400 mb-4"></i>
                                        <p class="text-gray-600 mb-2">Drag and drop files here or click to browse</p>
                                        <p class="text-sm text-gray-500">Supported: PDF, DOC, DOCX, JPG, PNG (Max 2MB each)</p>
                                        <input type="file" 
                                               name="documents[]" 
                                               multiple 
                                               accept=".pdf,.doc,.docx,.jpg,.jpeg,.png"
                                               @change="handleFiles($event)" 
                                               class="hidden" 
                                               id="file-upload" />
                                        <label for="file-upload" class="mt-4 inline-block px-6 py-3 bg-blue-500 text-white rounded-lg hover:bg-blue-600 cursor-pointer transition">
                                            <i class="fas fa-folder-open mr-2"></i>
                                            Choose Files
                                        </label>
                                    </div>
                                    
                                    <!-- File Previews -->
                                    <div class="mt-4 grid grid-cols-2 md:grid-cols-4 gap-4" x-show="previews.length > 0">
                                        <template x-for="(preview, index) in previews" :key="index">
                                            <div class="relative group">
                                                <div class="border-2 border-gray-200 rounded-lg p-2 hover:border-blue-500 transition">
                                                    <template x-if="preview.type === 'image'">
                                                        <img :src="preview.url" class="w-full h-32 object-cover rounded" />
                                                    </template>
                                                    <template x-if="preview.type === 'file'">
                                                        <div class="w-full h-32 flex items-center justify-center bg-gray-100 rounded">
                                                            <i class="fas fa-file text-4xl text-gray-400"></i>
                                                        </div>
                                                    </template>
                                                    <p class="text-xs text-gray-600 mt-2 truncate" x-text="preview.name"></p>
                                                </div>
                                                <button type="button" 
                                                        @click="removeFile(index)"
                                                        class="absolute -top-2 -right-2 bg-red-500 text-white rounded-full w-6 h-6 flex items-center justify-center hover:bg-red-600 transition opacity-0 group-hover:opacity-100">
                                                    <i class="fas fa-times text-xs"></i>
                                                </button>
                                            </div>
                                        </template>
                                    </div>
                                </div>
                            </fieldset>
                            
                            <!-- Navigation Buttons -->
                            <div class="flex justify-between items-center pt-6 border-t border-gray-200">
                                <button type="button" 
                                        @click="step--" 
                                        x-show="step > 1"
                                        class="px-6 py-3 bg-gray-500 text-white rounded-lg hover:bg-gray-600 transition transform hover:scale-105 shadow-md">
                                    <i class="fas fa-arrow-left mr-2"></i>
                                    Previous
                                </button>
                                
                                <button type="button" 
                                        @click="step++" 
                                        x-show="step < totalSteps"
                                        class="px-6 py-3 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition transform hover:scale-105 shadow-md ml-auto">
                                    Next
                                    <i class="fas fa-arrow-right ml-2"></i>
                                </button>
                                
                                <button type="submit"
                                        x-show="step === totalSteps"
                                        class="px-8 py-3 bg-gradient-to-r from-green-500 to-emerald-500 text-white rounded-lg hover:from-green-600 hover:to-emerald-600 transition transform hover:scale-105 shadow-lg ml-auto">
                                    <i class="fas fa-check-circle mr-2"></i>
                                    Submit Application
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</x-app-layout>
