{{-- 
    Health Institution Registration Form
    Multi-step registration form for public users
    
    Uses: <x-site-layout>
    Requirements: 1.1, 1.2
--}}
<x-site-layout 
    title="Register Your Health Institution"
    meta-description="Register your healthcare facility on our directory and reach patients across South Sudan."
>
    {{-- Hero Section --}}
    <section class="bg-gradient-to-r from-green-600 to-green-700 text-white py-12">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="text-center">
                <h1 class="text-3xl md:text-4xl font-bold mb-3">
                    <i class="fas fa-hospital mr-3"></i>Register Your Health Institution
                </h1>
                <p class="text-green-100 text-lg max-w-5xl mx-auto">
                    Join our growing directory of healthcare facilities across South Sudan. 
                    Connect with patients and grow your practice.
                </p>
            </div>
        </div>
    </section>
    
    {{-- Breadcrumb --}}
    <div class="bg-gray-50 border-b border-gray-200">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-3">
            <nav class="flex items-center space-x-2 text-sm text-gray-600" aria-label="Breadcrumb">
                <a href="{{ url('/') }}" class="hover:text-green-600 transition flex items-center">
                    <i class="fas fa-home mr-1"></i>Home
                </a>
                <i class="fas fa-chevron-right text-gray-400 text-xs"></i>
                <a href="{{ route('institutions.index') }}" class="hover:text-green-600 transition">Health Institutions</a>
                <i class="fas fa-chevron-right text-gray-400 text-xs"></i>
                <span class="text-gray-900 font-medium">Register Your Institution</span>
            </nav>
        </div>
    </div>

    {{-- Registration Form --}}
    <section class="py-12 bg-gray-50">
        <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
            
            {{-- Payment Info Alert --}}
            @if($requiresPayment)
                <div class="mb-6 bg-blue-50 border-l-4 border-blue-500 p-4 rounded-r-lg">
                    <div class="flex items-start">
                        <i class="fas fa-info-circle text-blue-500 mt-0.5 mr-3"></i>
                        <div>
                            <h4 class="font-semibold text-blue-800">Listing Fee Required</h4>
                            <p class="text-blue-700 text-sm">
                                After registration, a payment of 
                                <strong>SSP {{ number_format($paymentConfig->amount_ssp) }}</strong>
                                @if($paymentConfig->amount_usd)
                                    (or <strong>USD {{ number_format($paymentConfig->amount_usd) }}</strong>)
                                @endif
                                is required to publish your listing.
                            </p>
                        </div>
                    </div>
                </div>
            @endif
            
            {{-- Global validation error banner --}}
            @if($errors->any())
                <div class="mb-6 bg-red-50 border-l-4 border-red-500 p-4 rounded-r-lg">
                    <div class="flex items-start">
                        <i class="fas fa-exclamation-circle text-red-500 mt-0.5 mr-3 flex-shrink-0"></i>
                        <div>
                            <h4 class="font-semibold text-red-800 mb-1">Please fix the following errors:</h4>
                            <ul class="list-disc list-inside text-sm text-red-700 space-y-1">
                                @foreach($errors->all() as $error)
                                    <li>{{ $error }}</li>
                                @endforeach
                            </ul>
                        </div>
                    </div>
                </div>
            @endif

            {{-- Multi-Step Form --}}
            <form action="{{ route('institutions.register.store') }}" method="POST" enctype="multipart/form-data"
                  x-data="{
                      step: {{ ($errors->any() && $errors->has('contact_name') || $errors->has('contact_email') || $errors->has('contact_password') || $errors->has('terms')) ? 3 : ($errors->has('email') || $errors->has('phone') || $errors->has('description') || $errors->has('services') ? 2 : 1) }},
                      totalSteps: 3,
                      nextStep() {
                          if (!this.validateStep(this.step)) return;
                          if (this.step < this.totalSteps) this.step++;
                          window.scrollTo({ top: 0, behavior: 'smooth' });
                      },
                      prevStep() {
                          if (this.step > 1) this.step--;
                          window.scrollTo({ top: 0, behavior: 'smooth' });
                      },
                      validateStep(s) {
                          const form = document.getElementById('institution-register-form');
                          // Collect all required inputs visible in the current step
                          const stepEl = form.querySelector('[data-step=\'' + s + '\']');
                          if (!stepEl) return true;
                          const inputs = stepEl.querySelectorAll('[required]');
                          let valid = true;
                          inputs.forEach(input => {
                              if (input.type === 'checkbox') {
                                  if (!input.checked) { input.reportValidity(); valid = false; }
                              } else if (!input.value.trim()) {
                                  input.reportValidity(); valid = false;
                              }
                          });
                          return valid;
                      }
                  }"
                  id="institution-register-form">
                @csrf
                
                {{-- Progress Bar --}}
                <div class="mb-8">
                    <div class="flex items-center 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 text-green-600 font-medium" x-text="Math.round((step / totalSteps) * 100) + '% Complete'"></span>
                    </div>
                    <div class="w-full bg-gray-200 rounded-full h-3">
                        <div class="bg-gradient-to-r from-green-600 to-green-700 h-3 rounded-full transition-all duration-300"
                             :style="'width: ' + (step / totalSteps) * 100 + '%'"></div>
                    </div>
                </div>
                
                {{-- Step 1: Institution Details --}}
                <div x-show="step === 1" x-transition class="bg-white rounded-xl shadow-md p-6 lg:p-8" data-step="1">
                    <fieldset>
                        <legend class="text-xl font-bold text-gray-800 mb-6 pb-4 border-b">
                            <i class="fas fa-building text-green-500 mr-2"></i>Institution Details
                        </legend>
                        
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                            {{-- Name --}}
                            <div class="md:col-span-2">
                                <label class="block text-sm font-medium text-gray-700 mb-2">
                                    Institution Name <span class="text-red-500">*</span>
                                </label>
                                <input type="text" name="name" required
                                       value="{{ old('name') }}"
                                       class="w-full px-4 py-3 border-2 border-gray-200 rounded-lg focus:border-green-500 focus:ring-4 focus:ring-green-100 transition"
                                       placeholder="e.g., Juba Teaching Hospital">
                                @error('name')
                                    <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                                @enderror
                            </div>
                            
                            {{-- Short Name --}}
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-2">
                                    Short Name <span class="text-gray-400">(Optional)</span>
                                </label>
                                <input type="text" name="short_name"
                                       value="{{ old('short_name') }}"
                                       class="w-full px-4 py-3 border-2 border-gray-200 rounded-lg focus:border-green-500 transition"
                                       placeholder="e.g., JTH">
                            </div>
                            
                            {{-- Logo --}}
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-2">
                                    Logo <span class="text-gray-400">(Optional)</span>
                                </label>
                                <input type="file" name="logo" accept="image/*"
                                       class="w-full px-4 py-2 border-2 border-gray-200 rounded-lg focus:border-green-500 transition">
                                <p class="mt-1 text-xs text-gray-500">Max 2MB. JPG, PNG, WEBP</p>
                            </div>
                            
                            {{-- City --}}
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-2">
                                    City <span class="text-red-500">*</span>
                                </label>
                                <select name="city" required
                                        class="w-full px-4 py-3 border-2 border-gray-200 rounded-lg focus:border-green-500 transition">
                                    <option value="">Select City</option>
                                    @foreach($cities as $city)
                                        <option value="{{ $city }}" {{ old('city') == $city ? 'selected' : '' }}>{{ $city }}</option>
                                    @endforeach
                                </select>
                                @error('city')
                                    <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                                @enderror
                            </div>
                            
                            {{-- Country --}}
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-2">
                                    Country <span class="text-red-500">*</span>
                                </label>
                                <select name="country" required
                                        class="w-full px-4 py-3 border-2 border-gray-200 rounded-lg focus:border-green-500 transition">
                                    <option value="South Sudan" {{ old('country', 'South Sudan') == 'South Sudan' ? 'selected' : '' }}>South Sudan</option>
                                    <option value="Uganda" {{ old('country') == 'Uganda' ? 'selected' : '' }}>Uganda</option>
                                    <option value="Kenya" {{ old('country') == 'Kenya' ? 'selected' : '' }}>Kenya</option>
                                    <option value="Sudan" {{ old('country') == 'Sudan' ? 'selected' : '' }}>Sudan</option>
                                    <option value="Ethiopia" {{ old('country') == 'Ethiopia' ? 'selected' : '' }}>Ethiopia</option>
                                </select>
                            </div>
                            
                            {{-- Address --}}
                            <div class="md:col-span-2">
                                <label class="block text-sm font-medium text-gray-700 mb-2">
                                    Full Address <span class="text-red-500">*</span>
                                </label>
                                <input type="text" name="address" required
                                       value="{{ old('address') }}"
                                       class="w-full px-4 py-3 border-2 border-gray-200 rounded-lg focus:border-green-500 transition"
                                       placeholder="Street address, area, landmark">
                                @error('address')
                                    <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                                @enderror
                            </div>
                        </div>
                    </fieldset>
                </div>
                
                {{-- Step 2: Contact & Services --}}
                <div x-show="step === 2" x-transition class="bg-white rounded-xl shadow-md p-6 lg:p-8" data-step="2">
                    <fieldset>
                        <legend class="text-xl font-bold text-gray-800 mb-6 pb-4 border-b">
                            <i class="fas fa-phone-alt text-green-500 mr-2"></i>Contact & Services
                        </legend>
                        
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
                            {{-- Email --}}
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-2">
                                    Contact Email <span class="text-red-500">*</span>
                                </label>
                                <input type="email" name="email" required
                                       value="{{ old('email') }}"
                                       class="w-full px-4 py-3 border-2 border-gray-200 rounded-lg focus:border-green-500 transition"
                                       placeholder="info@hospital.org">
                                @error('email')
                                    <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                                @enderror
                            </div>
                            
                            {{-- Phone --}}
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-2">
                                    Phone Number <span class="text-red-500">*</span>
                                </label>
                                <input type="tel" name="phone" required
                                       value="{{ old('phone') }}"
                                       class="w-full px-4 py-3 border-2 border-gray-200 rounded-lg focus:border-green-500 transition"
                                       placeholder="+211 9XX XXX XXX">
                                @error('phone')
                                    <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                                @enderror
                            </div>
                            
                            {{-- Website --}}
                            <div class="md:col-span-2">
                                <label class="block text-sm font-medium text-gray-700 mb-2">
                                    Website <span class="text-gray-400">(Optional)</span>
                                </label>
                                <input type="url" name="website_url"
                                       value="{{ old('website_url') }}"
                                       class="w-full px-4 py-3 border-2 border-gray-200 rounded-lg focus:border-green-500 transition"
                                       placeholder="https://www.hospital.org">
                            </div>
                            
                            {{-- Description --}}
                            <div class="md:col-span-2">
                                <label class="block text-sm font-medium text-gray-700 mb-2">
                                    Description <span class="text-red-500">*</span>
                                </label>
                                <textarea name="description" rows="4" required
                                          class="w-full px-4 py-3 border-2 border-gray-200 rounded-lg focus:border-green-500 transition"
                                          placeholder="Describe your institution, its history, and what makes it unique...">{{ old('description') }}</textarea>
                                <p class="mt-1 text-xs text-gray-500">Minimum 50 characters</p>
                                @error('description')
                                    <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                                @enderror
                            </div>
                        </div>
                        
                        {{-- Services --}}
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-3">
                                Services Offered <span class="text-red-500">*</span>
                            </label>
                            <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-3">
                                @foreach($services as $service)
                                    <label class="flex items-center bg-gray-50 rounded-lg p-3 cursor-pointer hover:bg-green-50 transition">
                                        <input type="checkbox" name="services[]" value="{{ $service }}"
                                               {{ in_array($service, old('services', [])) ? 'checked' : '' }}
                                               class="w-4 h-4 text-green-600 border-gray-300 rounded focus:ring-green-500">
                                        <span class="ml-2 text-sm text-gray-700">{{ $service }}</span>
                                    </label>
                                @endforeach
                            </div>
                            @error('services')
                                <p class="mt-2 text-sm text-red-600">{{ $message }}</p>
                            @enderror
                        </div>
                    </fieldset>
                </div>
                
                {{-- Step 3: Account & Payment --}}
                <div x-show="step === 3" x-transition class="bg-white rounded-xl shadow-md p-6 lg:p-8" data-step="3">
                    <fieldset>
                        <legend class="text-xl font-bold text-gray-800 mb-6 pb-4 border-b">
                            <i class="fas fa-user text-green-500 mr-2"></i>Create Your Account
                        </legend>
                        
                        <p class="text-gray-600 mb-6">
                            Create your Health Marketor account to manage your institution listing.
                        </p>
                        
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                            {{-- Contact Name --}}
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-2">
                                    Your Name <span class="text-red-500">*</span>
                                </label>
                                <input type="text" name="contact_name" required
                                       value="{{ old('contact_name') }}"
                                       class="w-full px-4 py-3 border-2 border-gray-200 rounded-lg focus:border-green-500 transition"
                                       placeholder="John Doe">
                                @error('contact_name')
                                    <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                                @enderror
                            </div>
                            
                            {{-- Contact Email --}}
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-2">
                                    Your Email <span class="text-red-500">*</span>
                                </label>
                                <input type="email" name="contact_email" required
                                       value="{{ old('contact_email') }}"
                                       class="w-full px-4 py-3 border-2 border-gray-200 rounded-lg focus:border-green-500 transition"
                                       placeholder="john@example.com">
                                @error('contact_email')
                                    <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                                @enderror
                            </div>
                            
                            {{-- Contact Phone --}}
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-2">
                                    Your Phone <span class="text-red-500">*</span>
                                </label>
                                <input type="tel" name="contact_phone" required
                                       value="{{ old('contact_phone') }}"
                                       class="w-full px-4 py-3 border-2 border-gray-200 rounded-lg focus:border-green-500 transition"
                                       placeholder="+211 9XX XXX XXX">
                                @error('contact_phone')
                                    <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                                @enderror
                            </div>
                            
                            {{-- Password --}}
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-2">
                                    Password <span class="text-red-500">*</span>
                                </label>
                                <input type="password" name="contact_password" required
                                       class="w-full px-4 py-3 border-2 border-gray-200 rounded-lg focus:border-green-500 transition"
                                       placeholder="Min 8 characters"
                                       autocomplete="new-password">
                                @error('contact_password')
                                    <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                                @enderror
                            </div>
                            
                            {{-- Password Confirmation --}}
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-2">
                                    Confirm Password <span class="text-red-500">*</span>
                                </label>
                                <input type="password" name="contact_password_confirmation" required
                                       class="w-full px-4 py-3 border-2 border-gray-200 rounded-lg focus:border-green-500 transition"
                                       placeholder="Re-enter password"
                                       autocomplete="new-password">
                            </div>
                        </div>
                        
                        {{-- Terms --}}
                        <div class="mt-6 p-4 bg-gray-50 rounded-lg">
                            <label class="flex items-start cursor-pointer">
                                <input type="checkbox" name="terms" value="1" required
                                       class="w-4 h-4 text-green-600 border-gray-300 rounded focus:ring-green-500 mt-1">
                                <span class="ml-3 text-sm text-gray-600">
                                    I agree to the <a href="#" class="text-green-600 hover:text-green-700">Terms of Service</a> 
                                    and <a href="#" class="text-green-600 hover:text-green-700">Privacy Policy</a>.
                                    I confirm that I am authorized to register this institution.
                                </span>
                            </label>
                            @error('terms')
                                <p class="mt-2 text-sm text-red-600">{{ $message }}</p>
                            @enderror
                        </div>
                        
                        {{-- Payment Notice --}}
                        @if($requiresPayment)
                            <div class="mt-6 p-4 bg-yellow-50 border border-yellow-200 rounded-lg">
                                <div class="flex items-start">
                                    <i class="fas fa-exclamation-triangle text-yellow-500 mt-0.5 mr-3"></i>
                                    <div>
                                        <h4 class="font-semibold text-yellow-800">Payment Required</h4>
                                        <p class="text-yellow-700 text-sm">
                                            After registration, you will be redirected to complete payment of 
                                            <strong>SSP {{ number_format($paymentConfig->amount_ssp) }}</strong>
                                            to publish your listing.
                                        </p>
                                    </div>
                                </div>
                            </div>
                        @endif
                    </fieldset>
                </div>
                
                {{-- Navigation Buttons --}}
                <div class="mt-8 flex justify-between">
                    <button type="button" 
                            @click="prevStep()"
                            x-show="step > 1"
                            class="px-6 py-3 bg-gray-200 text-gray-700 font-semibold rounded-lg hover:bg-gray-300 transition">
                        <i class="fas fa-arrow-left mr-2"></i>Previous
                    </button>
                    
                    <div class="ml-auto flex gap-3">
                        <button type="button" 
                                @click="nextStep()"
                                x-show="step < totalSteps"
                                class="px-6 py-3 bg-green-600 text-white font-semibold rounded-lg hover:bg-green-700 transition">
                            Next Step<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-600 to-green-700 text-white font-semibold rounded-lg hover:from-green-700 hover:to-green-800 transition shadow-lg">
                            <i class="fas fa-check mr-2"></i>Complete Registration
                        </button>
                    </div>
                </div>
            </form>
        </div>
    </section>
    
    {{-- Benefits Section --}}
    <section class="py-12 bg-white">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <h2 class="text-2xl font-bold text-gray-800 text-center mb-8">Why List With Us?</h2>
            
            <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
                <div class="text-center p-6">
                    <div class="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-4">
                        <i class="fas fa-users text-2xl text-green-600"></i>
                    </div>
                    <h3 class="font-semibold text-gray-800 mb-2">Reach More Patients</h3>
                    <p class="text-gray-600">Connect with thousands of patients actively searching for healthcare services.</p>
                </div>
                
                <div class="text-center p-6">
                    <div class="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-4">
                        <i class="fas fa-chart-line text-2xl text-green-600"></i>
                    </div>
                    <h3 class="font-semibold text-gray-800 mb-2">Grow Your Practice</h3>
                    <p class="text-gray-600">Increase visibility and attract new patients to your facility.</p>
                </div>
                
                <div class="text-center p-6">
                    <div class="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-4">
                        <i class="fas fa-clock text-2xl text-green-600"></i>
                    </div>
                    <h3 class="font-semibold text-gray-800 mb-2">24/7 Visibility</h3>
                    <p class="text-gray-600">Your listing is available around the clock for patients to discover.</p>
                </div>
            </div>
        </div>
    </section>
</x-site-layout>
