{{--
    Health Marketor Dashboard — Edit Institution
    Authenticated page with <x-app-layout> + <x-module-hero>
    Requirements: 8.1, 8.4
--}}
<x-app-layout>

    <x-module-hero
        title="Edit Institution"
        description="{{ $institution->name }}"
        icon="fa-hospital"
    >
        <x-slot name="backButton">
            <a href="{{ route('dashboard.institutions.index') }}"
               class="inline-flex items-center gap-2 text-white/80 hover:text-white text-sm transition">
                <i class="fas fa-arrow-left"></i> Back to My Institutions
            </a>
        </x-slot>
        <x-slot name="tabs">
            @can('view institutions')
                <a href="{{ route('dashboard.institutions.index') }}"
                   class="module-hero-tab">
                    <i class="fas fa-hospital"></i> My Institutions
                </a>
            @endcan
            @can('view machines')
                <a href="{{ route('dashboard.machines.index') }}"
                   class="module-hero-tab">
                    <i class="fas fa-cogs"></i> My Machines
                </a>
            @endcan
            @can('view payments')
                <a href="{{ route('dashboard.payments.index') }}"
                   class="module-hero-tab">
                    <i class="fas fa-credit-card"></i> Payment History
                </a>
            @endcan
        </x-slot>
    </x-module-hero>

    <div class="p-6">

        {{-- Session Messages --}}
        @if(session('success'))
            <div class="mb-4 p-4 bg-green-100 border border-green-400 text-green-700 rounded-lg flex items-center">
                <i class="fas fa-check-circle mr-3"></i>{{ session('success') }}
            </div>
        @endif

        @if($errors->any())
            <div class="mb-4 p-4 bg-red-100 border border-red-400 text-red-700 rounded-lg">
                <div class="flex items-center mb-2">
                    <i class="fas fa-exclamation-circle mr-3"></i>
                    <strong>Please fix the following errors:</strong>
                </div>
                <ul class="list-disc list-inside ml-4 text-sm">
                    @foreach($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        @endif

        {{-- Edit Form --}}
        <form action="{{ route('dashboard.institutions.update', $institution) }}"
              method="POST"
              enctype="multipart/form-data"
              x-data="{
                  step: 1,
                  totalSteps: 4,
                  services: {{ json_encode($institution->services ?? []) }},
                  newService: '',
                  addService() {
                      if (this.newService.trim() && !this.services.includes(this.newService.trim())) {
                          this.services.push(this.newService.trim());
                      }
                      this.newService = '';
                  },
                  removeService(index) { this.services.splice(index, 1); },
                  togglePredefined(service) {
                      const idx = this.services.indexOf(service);
                      if (idx > -1) { this.services.splice(idx, 1); }
                      else { this.services.push(service); }
                  }
              }">
            @csrf
            @method('PUT')

            {{-- Step Indicator --}}
            <div class="mb-6">
                <div class="flex justify-between text-sm text-gray-600 mb-2">
                    <span>Step <span x-text="step"></span> of 4</span>
                    <span x-text="Math.round((step / totalSteps) * 100) + '% Complete'"></span>
                </div>
                <div class="w-full bg-gray-200 rounded-full h-2">
                    <div class="bg-green-600 h-2 rounded-full transition-all duration-300"
                         :style="'width: ' + ((step / totalSteps) * 100) + '%'"></div>
                </div>
                <div class="flex justify-between mt-2">
                    @foreach(['Basic Info', 'Location', 'Services', 'Review'] as $i => $label)
                        <span class="text-xs font-medium"
                              :class="{{ $i + 1 }} <= step ? 'text-green-600' : 'text-gray-400'">
                            {{ $label }}
                        </span>
                    @endforeach
                </div>
            </div>

            {{-- Step 1: Basic Information --}}
            <div x-show="step === 1" x-transition>
                <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-6 mb-4">
                    <h3 class="text-base font-semibold text-gray-800 border-b border-gray-200 pb-3 mb-4">
                        <i class="fas fa-hospital mr-2 text-green-600"></i>Basic Information
                    </h3>
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                        <div class="md:col-span-2">
                            <label class="block text-sm font-medium text-gray-700 mb-1">
                                Institution Name <span class="text-red-500">*</span>
                            </label>
                            <input type="text" name="name" value="{{ old('name', $institution->name) }}" required
                                   class="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:border-green-500 focus:ring-1 focus:ring-green-500 transition">
                            @error('name')<p class="mt-1 text-xs text-red-600">{{ $message }}</p>@enderror
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">Short Name</label>
                            <input type="text" name="short_name" value="{{ old('short_name', $institution->short_name) }}"
                                   class="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:border-green-500 transition">
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">Logo</label>
                            <input type="file" name="logo" accept="image/*"
                                   class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:border-green-500 transition text-sm">
                            @if($institution->logo)
                                <p class="mt-1 text-xs text-gray-500">
                                    <i class="fas fa-image mr-1"></i>Current: {{ basename($institution->logo) }}
                                </p>
                            @endif
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">
                                Email <span class="text-red-500">*</span>
                            </label>
                            <input type="email" name="email" value="{{ old('email', $institution->email) }}" required
                                   class="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:border-green-500 transition">
                            @error('email')<p class="mt-1 text-xs text-red-600">{{ $message }}</p>@enderror
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">
                                Phone <span class="text-red-500">*</span>
                            </label>
                            <input type="tel" name="phone" value="{{ old('phone', $institution->phone) }}" required
                                   class="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:border-green-500 transition">
                            @error('phone')<p class="mt-1 text-xs text-red-600">{{ $message }}</p>@enderror
                        </div>
                        <div class="md:col-span-2">
                            <label class="block text-sm font-medium text-gray-700 mb-1">Website URL</label>
                            <input type="url" name="website_url" value="{{ old('website_url', $institution->website_url) }}"
                                   placeholder="https://"
                                   class="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:border-green-500 transition">
                        </div>
                    </div>
                </div>
            </div>

            {{-- Step 2: Location --}}
            <div x-show="step === 2" x-transition>
                <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-6 mb-4">
                    <h3 class="text-base font-semibold text-gray-800 border-b border-gray-200 pb-3 mb-4">
                        <i class="fas fa-map-marker-alt mr-2 text-green-600"></i>Location Details
                    </h3>
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">
                                City <span class="text-red-500">*</span>
                            </label>
                            <select name="city" required
                                    class="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:border-green-500 transition">
                                <option value="">Select City</option>
                                @foreach($cities as $city)
                                    <option value="{{ $city }}" {{ old('city', $institution->city) == $city ? 'selected' : '' }}>
                                        {{ $city }}
                                    </option>
                                @endforeach
                            </select>
                            @error('city')<p class="mt-1 text-xs text-red-600">{{ $message }}</p>@enderror
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">Country</label>
                            <input type="text" name="country" value="{{ old('country', $institution->country ?? 'South Sudan') }}"
                                   class="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:border-green-500 transition">
                        </div>
                        <div class="md:col-span-2">
                            <label class="block text-sm font-medium text-gray-700 mb-1">Full Address</label>
                            <textarea name="address" rows="2"
                                      class="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:border-green-500 transition">{{ old('address', $institution->address) }}</textarea>
                        </div>
                    </div>
                </div>
            </div>

            {{-- Step 3: Services & Description --}}
            <div x-show="step === 3" x-transition>
                <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-6 mb-4">
                    <h3 class="text-base font-semibold text-gray-800 border-b border-gray-200 pb-3 mb-4">
                        <i class="fas fa-stethoscope mr-2 text-green-600"></i>Services & Description
                    </h3>
                    <div class="space-y-6">
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">
                                Description <span class="text-red-500">*</span>
                            </label>
                            <textarea name="description" rows="4" required
                                      class="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:border-green-500 transition">{{ old('description', $institution->description) }}</textarea>
                            @error('description')<p class="mt-1 text-xs text-red-600">{{ $message }}</p>@enderror
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-2">Services Offered</label>
                            <div class="flex flex-wrap gap-2 mb-3">
                                @foreach($services as $service)
                                    <button type="button"
                                            @click="togglePredefined('{{ $service }}')"
                                            :class="services.includes('{{ $service }}') ? 'bg-green-600 text-white' : 'bg-gray-100 text-gray-700 hover:bg-gray-200'"
                                            class="px-3 py-1 rounded-full text-sm transition">
                                        {{ $service }}
                                    </button>
                                @endforeach
                            </div>
                            <div class="flex gap-2">
                                <input type="text" x-model="newService" placeholder="Add custom service…"
                                       class="flex-1 px-4 py-2 border border-gray-300 rounded-lg text-sm focus:border-green-500 transition">
                                <button type="button" @click="addService()"
                                        class="btn-action-approve px-4 py-2">
                                    <i class="fas fa-plus"></i>
                                </button>
                            </div>
                            <div class="flex flex-wrap gap-2 mt-3">
                                <template x-for="(service, index) in services" :key="index">
                                    <span class="inline-flex items-center px-3 py-1 bg-green-100 text-green-800 rounded-full text-sm">
                                        <span x-text="service"></span>
                                        <button type="button" @click="removeService(index)"
                                                class="ml-2 text-green-600 hover:text-green-800">
                                            <i class="fas fa-times text-xs"></i>
                                        </button>
                                    </span>
                                </template>
                            </div>
                            <template x-for="(service, index) in services" :key="'s-' + index">
                                <input type="hidden" name="services[]" :value="service">
                            </template>
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">Additional Images</label>
                            <input type="file" name="images[]" multiple accept="image/*"
                                   class="w-full px-4 py-2 border border-gray-300 rounded-lg text-sm focus:border-green-500 transition">
                            @if($institution->images && count($institution->images) > 0)
                                <p class="mt-1 text-xs text-gray-500">
                                    <i class="fas fa-images mr-1"></i>{{ count($institution->images) }} current image(s)
                                </p>
                            @endif
                        </div>
                    </div>
                </div>
            </div>

            {{-- Step 4: Review --}}
            <div x-show="step === 4" x-transition>
                <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-6 mb-4">
                    <h3 class="text-base font-semibold text-gray-800 border-b border-gray-200 pb-3 mb-4">
                        <i class="fas fa-check-circle mr-2 text-green-600"></i>Review & Save
                    </h3>
                    <div class="p-4 bg-green-50 rounded-lg text-sm text-green-800">
                        <ul class="space-y-2">
                            <li><i class="fas fa-check mr-2"></i>All changes will be saved immediately.</li>
                            <li><i class="fas fa-check mr-2"></i>Published listings are visible to the public right away.</li>
                            <li><i class="fas fa-info-circle mr-2 text-blue-600"></i>Click "Save Changes" to apply your updates.</li>
                        </ul>
                    </div>
                </div>
            </div>

            {{-- Navigation --}}
            <div class="flex justify-between mt-4">
                <button type="button" @click="step--" x-show="step > 1"
                        class="inline-flex items-center gap-2 px-5 py-2.5 bg-gray-200 text-gray-700 rounded-lg hover:bg-gray-300 transition text-sm font-medium">
                    <i class="fas fa-arrow-left"></i> Previous
                </button>
                <button type="button" @click="step++" x-show="step < totalSteps"
                        class="inline-flex items-center gap-2 px-5 py-2.5 bg-green-600 text-white rounded-lg hover:bg-green-700 transition text-sm font-medium ml-auto">
                    Next <i class="fas fa-arrow-right"></i>
                </button>
                <button type="submit" x-show="step === totalSteps"
                        class="inline-flex items-center gap-2 px-6 py-2.5 bg-green-600 text-white rounded-lg hover:bg-green-700 transition text-sm font-medium ml-auto">
                    <i class="fas fa-save"></i> Save Changes
                </button>
            </div>
        </form>

    </div>

</x-app-layout>
