<x-site-layout title="Become a Partner">

    {{-- Hero --}}
    <section class="relative bg-gradient-to-r from-indigo-600 to-blue-700 py-16">
        <div class="absolute inset-0 bg-black opacity-10"></div>
        <div class="relative max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
            <span class="inline-block px-4 py-1 bg-white bg-opacity-20 rounded-full text-white text-sm font-medium mb-4">
                <i class="fas fa-handshake mr-1"></i> Partner Registration
            </span>
            <h1 class="text-4xl md:text-5xl font-bold text-white mb-4">Become a Partner</h1>
            <p class="text-indigo-100 text-lg max-w-5xl mx-auto">
                Collaborate with SSHIA to advance health outcomes. Partner with us to amplify your organisation's impact.
            </p>
            <div class="flex flex-wrap justify-center gap-6 mt-8 text-sm text-indigo-100">
                <span><i class="fas fa-check-circle mr-1"></i> Strategic Collaboration</span>
                <span><i class="fas fa-check-circle mr-1"></i> Shared Resources</span>
                <span><i class="fas fa-check-circle mr-1"></i> Directory Listing</span>
                <span><i class="fas fa-check-circle mr-1"></i> Joint Programmes</span>
            </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-indigo-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>
                <span class="text-gray-500">Register</span>
                <i class="fas fa-chevron-right text-gray-400 text-xs"></i>
                <span class="text-gray-900 font-medium">Become a Partner</span>
            </nav>
        </div>
    </div>

    <div class="bg-amber-50 border-b border-amber-200">
        <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-3 flex items-center gap-2 text-sm text-amber-800">
            <i class="fas fa-info-circle text-amber-500"></i>
            The email and password you provide will create your organisation's login account on SSHIA.
        </div>
    </div>

    <section class="py-12 bg-gray-50">
        <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">

            @if(session('error'))
                <div class="mb-6 bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded-xl flex items-center gap-2">
                    <i class="fas fa-exclamation-circle"></i> {{ session('error') }}
                </div>
            @endif
            @if($errors->any())
                <div class="mb-6 bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded-xl">
                    <p class="font-medium flex items-center gap-2"><i class="fas fa-exclamation-triangle"></i> Please fix the errors below.</p>
                </div>
            @endif

            <form action="{{ route('register.role.partner.store') }}" method="POST" class="space-y-6">
                @csrf

                {{-- Organisation Information --}}
                <div class="bg-white rounded-2xl shadow-sm overflow-hidden">
                    <div class="bg-gray-50 px-6 py-4 border-b border-gray-100">
                        <h2 class="text-base font-semibold text-gray-900 flex items-center gap-2">
                            <i class="fas fa-building text-indigo-600"></i> Organisation Information
                        </h2>
                    </div>
                    <div class="p-6 grid grid-cols-1 md:grid-cols-2 gap-5">
                        <div>
                            <label for="organization_name" class="block text-sm font-medium text-gray-700 mb-1">Organisation Name <span class="text-red-500">*</span></label>
                            <input type="text" id="organization_name" name="organization_name" value="{{ old('organization_name') }}"
                                   class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 transition"
                                   placeholder="Official organisation name" required>
                            @error('organization_name')<p class="mt-1 text-sm text-red-600">{{ $message }}</p>@enderror
                        </div>
                        <div>
                            <label for="legal_name" class="block text-sm font-medium text-gray-700 mb-1">Legal / Registered Name</label>
                            <input type="text" id="legal_name" name="legal_name" value="{{ old('legal_name') }}"
                                   class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 transition"
                                   placeholder="If different from above">
                        </div>
                        <div>
                            <label for="organization_type" class="block text-sm font-medium text-gray-700 mb-1">Organisation Type <span class="text-red-500">*</span></label>
                            <select id="organization_type" name="organization_type"
                                    class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 transition" required>
                                <option value="">-- Select Type --</option>
                                <option value="government" {{ old('organization_type') === 'government' ? 'selected' : '' }}>Government Agency</option>
                                <option value="ngo" {{ old('organization_type') === 'ngo' ? 'selected' : '' }}>NGO / Non-Profit</option>
                                <option value="private_sector" {{ old('organization_type') === 'private_sector' ? 'selected' : '' }}>Private Sector</option>
                                <option value="academic" {{ old('organization_type') === 'academic' ? 'selected' : '' }}>Academic Institution</option>
                                <option value="healthcare" {{ old('organization_type') === 'healthcare' ? 'selected' : '' }}>Healthcare Organisation</option>
                                <option value="international" {{ old('organization_type') === 'international' ? 'selected' : '' }}>International Organisation</option>
                                <option value="community_based" {{ old('organization_type') === 'community_based' ? 'selected' : '' }}>Community-Based Organisation</option>
                                <option value="faith_based" {{ old('organization_type') === 'faith_based' ? 'selected' : '' }}>Faith-Based Organisation</option>
                                <option value="other" {{ old('organization_type') === 'other' ? 'selected' : '' }}>Other</option>
                            </select>
                            @error('organization_type')<p class="mt-1 text-sm text-red-600">{{ $message }}</p>@enderror
                        </div>
                        <div>
                            <label for="email" class="block text-sm font-medium text-gray-700 mb-1">Organisation Email <span class="text-red-500">*</span></label>
                            <input type="email" id="email" name="email" value="{{ old('email') }}"
                                   class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 transition"
                                   placeholder="info@organisation.org" required>
                            @error('email')<p class="mt-1 text-sm text-red-600">{!! $message !!}</p>@enderror
                        </div>
                        <div>
                            <label for="phone" class="block text-sm font-medium text-gray-700 mb-1">Phone Number</label>
                            <input type="tel" id="phone" name="phone" value="{{ old('phone') }}"
                                   class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 transition"
                                   placeholder="+256 7XX XXX XXX">
                        </div>
                        <div>
                            <label for="website" class="block text-sm font-medium text-gray-700 mb-1">Website</label>
                            <input type="url" id="website" name="website" value="{{ old('website') }}"
                                   class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 transition"
                                   placeholder="https://www.organisation.org">
                            @error('website')<p class="mt-1 text-sm text-red-600">{{ $message }}</p>@enderror
                        </div>
                        <div class="md:col-span-2">
                            <label for="description" class="block text-sm font-medium text-gray-700 mb-1">Organisation Description <span class="text-red-500">*</span></label>
                            <textarea id="description" name="description" rows="4"
                                      class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 transition"
                                      placeholder="Describe your organisation's work and mission..." required>{{ old('description') }}</textarea>
                            @error('description')<p class="mt-1 text-sm text-red-600">{{ $message }}</p>@enderror
                        </div>
                        <div class="md:col-span-2">
                            <label for="mission_statement" class="block text-sm font-medium text-gray-700 mb-1">Mission Statement</label>
                            <textarea id="mission_statement" name="mission_statement" rows="2"
                                      class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 transition"
                                      placeholder="Your organisation's mission statement...">{{ old('mission_statement') }}</textarea>
                        </div>
                    </div>
                </div>

                {{-- Location --}}
                <div class="bg-white rounded-2xl shadow-sm overflow-hidden">
                    <div class="bg-gray-50 px-6 py-4 border-b border-gray-100">
                        <h2 class="text-base font-semibold text-gray-900 flex items-center gap-2">
                            <i class="fas fa-map-marker-alt text-indigo-600"></i> Location
                        </h2>
                    </div>
                    <div class="p-6 grid grid-cols-1 md:grid-cols-3 gap-5">
                        <div class="md:col-span-3">
                            <label for="address" class="block text-sm font-medium text-gray-700 mb-1">Address</label>
                            <input type="text" id="address" name="address" value="{{ old('address') }}"
                                   class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 transition"
                                   placeholder="Street address">
                        </div>
                        <div>
                            <label for="city" class="block text-sm font-medium text-gray-700 mb-1">City</label>
                            <input type="text" id="city" name="city" value="{{ old('city') }}"
                                   class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 transition"
                                   placeholder="City">
                        </div>
                        <div class="md:col-span-2">
                            <label for="country" class="block text-sm font-medium text-gray-700 mb-1">Country</label>
                            <input type="text" id="country" name="country" value="{{ old('country') }}"
                                   class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 transition"
                                   placeholder="Country">
                        </div>
                    </div>
                </div>

                {{-- Services Offered --}}
                <div class="bg-white rounded-2xl shadow-sm overflow-hidden">
                    <div class="bg-gray-50 px-6 py-4 border-b border-gray-100">
                        <h2 class="text-base font-semibold text-gray-900 flex items-center gap-2">
                            <i class="fas fa-cogs text-indigo-600"></i> Services Offered
                        </h2>
                    </div>
                    <div class="p-6">
                        @php
                            $serviceOptions = ['Health Education','Training & Capacity Building','Research & Data','Advocacy','Community Outreach','Clinical Services','Policy Development','Funding & Grants','Technical Assistance','Other'];
                            $selectedServices = old('services_offered', []);
                        @endphp
                        <div class="grid grid-cols-2 md:grid-cols-3 gap-3">
                            @foreach($serviceOptions as $option)
                                <label class="flex items-center gap-2 cursor-pointer p-3 border border-gray-200 rounded-lg hover:bg-indigo-50 hover:border-indigo-300 transition">
                                    <input type="checkbox" name="services_offered[]" value="{{ $option }}"
                                           class="h-4 w-4 text-indigo-600 border-gray-300 rounded focus:ring-indigo-500"
                                           {{ in_array($option, $selectedServices) ? 'checked' : '' }}>
                                    <span class="text-sm text-gray-700">{{ $option }}</span>
                                </label>
                            @endforeach
                        </div>
                    </div>
                </div>

                {{-- Primary Contact --}}
                <div class="bg-white rounded-2xl shadow-sm overflow-hidden">
                    <div class="bg-gray-50 px-6 py-4 border-b border-gray-100">
                        <h2 class="text-base font-semibold text-gray-900 flex items-center gap-2">
                            <i class="fas fa-user-circle text-indigo-600"></i> Primary Contact Person
                        </h2>
                    </div>
                    <div class="p-6 grid grid-cols-1 md:grid-cols-2 gap-5">
                        <div>
                            <label for="contact_name" class="block text-sm font-medium text-gray-700 mb-1">Full Name <span class="text-red-500">*</span></label>
                            <input type="text" id="contact_name" name="contact_name" value="{{ old('contact_name') }}"
                                   class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 transition"
                                   placeholder="Contact person's full name" required>
                            @error('contact_name')<p class="mt-1 text-sm text-red-600">{{ $message }}</p>@enderror
                        </div>
                        <div>
                            <label for="contact_title" class="block text-sm font-medium text-gray-700 mb-1">Title / Position</label>
                            <input type="text" id="contact_title" name="contact_title" value="{{ old('contact_title') }}"
                                   class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 transition"
                                   placeholder="e.g. Executive Director">
                        </div>
                        <div>
                            <label for="contact_email" class="block text-sm font-medium text-gray-700 mb-1">Contact Email <span class="text-red-500">*</span></label>
                            <input type="email" id="contact_email" name="contact_email" value="{{ old('contact_email') }}"
                                   class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 transition"
                                   placeholder="contact@organisation.org" required>
                            @error('contact_email')<p class="mt-1 text-sm text-red-600">{{ $message }}</p>@enderror
                        </div>
                        <div>
                            <label for="contact_phone" class="block text-sm font-medium text-gray-700 mb-1">Contact Phone</label>
                            <input type="tel" id="contact_phone" name="contact_phone" value="{{ old('contact_phone') }}"
                                   class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 transition"
                                   placeholder="+256 7XX XXX XXX">
                        </div>
                    </div>
                </div>

                {{-- Account Security --}}
                <div class="bg-white rounded-2xl shadow-sm overflow-hidden">
                    <div class="bg-gray-50 px-6 py-4 border-b border-gray-100">
                        <h2 class="text-base font-semibold text-gray-900 flex items-center gap-2">
                            <i class="fas fa-lock text-indigo-600"></i> Account Password
                            <span class="text-xs text-gray-400 font-normal ml-1">(used to log in to your partner account)</span>
                        </h2>
                    </div>
                    <div class="p-6">
                        @include('registration._partials.password-fields', ['color' => 'indigo'])
                    </div>
                </div>

                {{-- Terms --}}
                <div class="bg-white rounded-2xl shadow-sm p-6">
                    <label class="flex items-start gap-3 cursor-pointer">
                        <input type="checkbox" name="terms_accepted" value="1"
                               class="mt-1 h-4 w-4 text-indigo-600 border-gray-300 rounded focus:ring-indigo-500"
                               {{ old('terms_accepted') ? 'checked' : '' }} required>
                        <span class="text-sm text-gray-600">
                            I agree to the <a href="{{ route('pages.terms') }}" class="text-indigo-600 hover:underline" target="_blank">Terms and Conditions</a>
                            and <a href="{{ route('pages.privacy') }}" class="text-indigo-600 hover:underline" target="_blank">Privacy Policy</a>.
                            I confirm I am authorised to submit this application on behalf of the organisation. <span class="text-red-500">*</span>
                        </span>
                    </label>
                    @error('terms_accepted')<p class="mt-2 text-sm text-red-600">{{ $message }}</p>@enderror
                </div>

                @include('registration._partials.bottom-nav', ['color' => 'indigo', 'submitLabel' => 'Submit Partner Application'])
            </form>
        </div>
    </section>

</x-site-layout>
