<x-app-layout>
    <x-module-hero title="Edit Organization" description="{{ $organization->name }}" icon="fa-building">
        <x-slot name="backButton">
            <a href="{{ route('organization.details.index') }}" class="inline-flex items-center gap-2 text-[#475569] hover:text-[#1e293b] text-sm transition">
                <i class="fas fa-arrow-left text-xs"></i> Back to Organizations
            </a>
        </x-slot>
        <x-slot name="tabs">
            @can('view organizations')
            <a href="{{ route('organization.details.index') }}"
               class="module-hero-tab {{ request()->routeIs('organization.details.*') ? 'border-b-2 border-[#1e293b]' : 'opacity-70 hover:opacity-100 transition-opacity' }}
                      inline-flex items-center gap-2 px-4 py-3 text-[#1e293b] text-sm font-medium
                      md:w-auto w-full border-b border-[#cbd5e1] md:border-b-0">
                <i class="fas fa-building text-sm"></i> Organization Details
            </a>
            @endcan
            @can('view leadership positions')
            <a href="{{ route('organization.leadership-positions.index') }}"
               class="module-hero-tab {{ request()->routeIs('organization.leadership-positions.*') ? 'border-b-2 border-[#1e293b]' : 'opacity-70 hover:opacity-100 transition-opacity' }}
                      inline-flex items-center gap-2 px-4 py-3 text-[#1e293b] text-sm font-medium
                      md:w-auto w-full border-b border-[#cbd5e1] md:border-b-0">
                <i class="fas fa-sitemap text-sm"></i> Leadership Positions
            </a>
            @endcan
            @can('view leadership history')
            <a href="{{ route('organization.leadership-history.index') }}"
               class="module-hero-tab {{ request()->routeIs('organization.leadership-history.*') ? 'border-b-2 border-[#1e293b]' : 'opacity-70 hover:opacity-100 transition-opacity' }}
                      inline-flex items-center gap-2 px-4 py-3 text-[#1e293b] text-sm font-medium
                      md:w-auto w-full border-b border-[#cbd5e1] md:border-b-0">
                <i class="fas fa-history text-sm"></i> Leadership History
            </a>
            @endcan
            @can('view staff history')
            <a href="{{ route('organization.staff-history.index') }}"
               class="module-hero-tab {{ request()->routeIs('organization.staff-history.*') ? 'border-b-2 border-[#1e293b]' : 'opacity-70 hover:opacity-100 transition-opacity' }}
                      inline-flex items-center gap-2 px-4 py-3 text-[#1e293b] text-sm font-medium
                      md:w-auto w-full border-b border-[#cbd5e1] md:border-b-0">
                <i class="fas fa-user-tie text-sm"></i> Staff History
            </a>
            @endcan
            @can('view election cycles')
            <a href="{{ route('organization.election-cycles.index') }}"
               class="module-hero-tab {{ request()->routeIs('organization.election-cycles.*') ? 'border-b-2 border-[#1e293b]' : 'opacity-70 hover:opacity-100 transition-opacity' }}
                      inline-flex items-center gap-2 px-4 py-3 text-[#1e293b] text-sm font-medium
                      md:w-auto w-full border-b border-[#cbd5e1] md:border-b-0">
                <i class="fas fa-calendar-alt text-sm"></i> Election Cycles
            </a>
            @endcan
            @can('view voting procedures')
            <a href="{{ route('organization.voting-procedures.index') }}"
               class="module-hero-tab {{ request()->routeIs('organization.voting-procedures.*') ? 'border-b-2 border-[#1e293b]' : 'opacity-70 hover:opacity-100 transition-opacity' }}
                      inline-flex items-center gap-2 px-4 py-3 text-[#1e293b] text-sm font-medium
                      md:w-auto w-full border-b border-[#cbd5e1] md:border-b-0">
                <i class="fas fa-vote-yea text-sm"></i> Voting Procedures
            </a>
            @endcan
            @can('view organogram')
            <a href="{{ route('organization.organogram.show') }}"
               class="module-hero-tab {{ request()->routeIs('organization.organogram.*') ? 'border-b-2 border-[#1e293b]' : 'opacity-70 hover:opacity-100 transition-opacity' }}
                      inline-flex items-center gap-2 px-4 py-3 text-[#1e293b] text-sm font-medium
                      md:w-auto w-full border-b border-[#cbd5e1] md:border-b-0">
                <i class="fas fa-project-diagram text-sm"></i> Organogram
            </a>
            @endcan
        </x-slot>
        <x-slot name="actions">
            @can('view organizations')
            <a href="{{ route('organization.details.show', $organization) }}" class="inline-flex items-center gap-2 px-4 py-2 bg-[#1e293b] text-white text-sm font-medium rounded-lg hover:bg-[#334155] transition">
                <i class="fas fa-eye"></i> View
            </a>
            @endcan
        </x-slot>
    </x-module-hero>

    <div class="p-6">
        @if($errors->any())
        <div class="mb-6 p-4 bg-red-100 border border-red-400 text-red-700 rounded-lg">
            <ul class="list-disc list-inside space-y-1">@foreach($errors->all() as $error)<li>{{ $error }}</li>@endforeach</ul>
        </div>
        @endif

        <form action="{{ route('organization.details.update', $organization) }}" method="POST">
            @csrf @method('PUT')

            <div class="mb-6">
                <h3 class="text-lg font-semibold text-gray-800 border-b pb-2 mb-4"><i class="fas fa-info-circle mr-2 text-green-600"></i>Basic Information</h3>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div>
                        <label class="block text-sm font-semibold text-gray-700 mb-1" for="name">Organization Name <span class="text-red-500">*</span></label>
                        <input type="text" id="name" name="name" value="{{ old('name', $organization->name) }}" class="w-full px-4 py-2 border border-gray-300 rounded-lg bg-white text-gray-800 focus:ring-2 focus:ring-green-500 focus:border-transparent" required>
                        @error('name')<p class="mt-1 text-sm text-red-600">{{ $message }}</p>@enderror
                    </div>
                    <div>
                        <label class="block text-sm font-semibold text-gray-700 mb-1" for="short_name">Short Name <span class="text-red-500">*</span></label>
                        <input type="text" id="short_name" name="short_name" value="{{ old('short_name', $organization->short_name) }}" class="w-full px-4 py-2 border border-gray-300 rounded-lg bg-white text-gray-800 focus:ring-2 focus:ring-green-500 focus:border-transparent" required>
                        @error('short_name')<p class="mt-1 text-sm text-red-600">{{ $message }}</p>@enderror
                    </div>
                    <div>
                        <label class="block text-sm font-semibold text-gray-700 mb-1" for="year_of_formation">Year of Formation <span class="text-red-500">*</span></label>
                        <input type="number" id="year_of_formation" name="year_of_formation" value="{{ old('year_of_formation', $organization->year_of_formation) }}" min="1800" max="{{ date('Y') }}" class="w-full px-4 py-2 border border-gray-300 rounded-lg bg-white text-gray-800 focus:ring-2 focus:ring-green-500 focus:border-transparent" required>
                        @error('year_of_formation')<p class="mt-1 text-sm text-red-600">{{ $message }}</p>@enderror
                    </div>
                </div>
            </div>

            <div class="mb-6">
                <h3 class="text-lg font-semibold text-gray-800 border-b pb-2 mb-4"><i class="fas fa-map-marker-alt mr-2 text-green-600"></i>Location Information</h3>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div>
                        <label class="block text-sm font-semibold text-gray-700 mb-1" for="country">Country <span class="text-red-500">*</span></label>
                        <input type="text" id="country" name="country" value="{{ old('country', $organization->country) }}" class="w-full px-4 py-2 border border-gray-300 rounded-lg bg-white text-gray-800 focus:ring-2 focus:ring-green-500 focus:border-transparent" required>
                        @error('country')<p class="mt-1 text-sm text-red-600">{{ $message }}</p>@enderror
                    </div>
                    <div>
                        <label class="block text-sm font-semibold text-gray-700 mb-1" for="city">City <span class="text-red-500">*</span></label>
                        <input type="text" id="city" name="city" value="{{ old('city', $organization->city) }}" class="w-full px-4 py-2 border border-gray-300 rounded-lg bg-white text-gray-800 focus:ring-2 focus:ring-green-500 focus:border-transparent" required>
                        @error('city')<p class="mt-1 text-sm text-red-600">{{ $message }}</p>@enderror
                    </div>
                    <div>
                        <label class="block text-sm font-semibold text-gray-700 mb-1" for="postal_code">Postal Code <span class="text-red-500">*</span></label>
                        <input type="text" id="postal_code" name="postal_code" value="{{ old('postal_code', $organization->postal_code) }}" class="w-full px-4 py-2 border border-gray-300 rounded-lg bg-white text-gray-800 focus:ring-2 focus:ring-green-500 focus:border-transparent" required>
                        @error('postal_code')<p class="mt-1 text-sm text-red-600">{{ $message }}</p>@enderror
                    </div>
                    <div>
                        <label class="block text-sm font-semibold text-gray-700 mb-1" for="postal_address">Postal Address <span class="text-red-500">*</span></label>
                        <textarea id="postal_address" name="postal_address" rows="3" class="w-full px-4 py-2 border border-gray-300 rounded-lg bg-white text-gray-800 focus:ring-2 focus:ring-green-500 focus:border-transparent" required>{{ old('postal_address', $organization->postal_address) }}</textarea>
                        @error('postal_address')<p class="mt-1 text-sm text-red-600">{{ $message }}</p>@enderror
                    </div>
                    <div class="md:col-span-2">
                        <label class="block text-sm font-semibold text-gray-700 mb-1" for="physical_address">Physical Address <span class="text-red-500">*</span></label>
                        <textarea id="physical_address" name="physical_address" rows="3" class="w-full px-4 py-2 border border-gray-300 rounded-lg bg-white text-gray-800 focus:ring-2 focus:ring-green-500 focus:border-transparent" required>{{ old('physical_address', $organization->physical_address) }}</textarea>
                        @error('physical_address')<p class="mt-1 text-sm text-red-600">{{ $message }}</p>@enderror
                    </div>
                </div>
            </div>

            <div class="mb-6">
                <h3 class="text-lg font-semibold text-gray-800 border-b pb-2 mb-4"><i class="fas fa-address-book mr-2 text-green-600"></i>Contact Information</h3>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div>
                        <label class="block text-sm font-semibold text-gray-700 mb-1" for="email">Email <span class="text-red-500">*</span></label>
                        <input type="email" id="email" name="email" value="{{ old('email', $organization->email) }}" class="w-full px-4 py-2 border border-gray-300 rounded-lg bg-white text-gray-800 focus:ring-2 focus:ring-green-500 focus:border-transparent" required>
                        @error('email')<p class="mt-1 text-sm text-red-600">{{ $message }}</p>@enderror
                    </div>
                    <div>
                        <label class="block text-sm font-semibold text-gray-700 mb-1" for="hotline">Hotline <span class="text-red-500">*</span></label>
                        <input type="text" id="hotline" name="hotline" value="{{ old('hotline', $organization->hotline) }}" class="w-full px-4 py-2 border border-gray-300 rounded-lg bg-white text-gray-800 focus:ring-2 focus:ring-green-500 focus:border-transparent" required>
                        @error('hotline')<p class="mt-1 text-sm text-red-600">{{ $message }}</p>@enderror
                    </div>
                </div>
            </div>

            <div class="mb-6">
                <h3 class="text-lg font-semibold text-gray-800 border-b pb-2 mb-4"><i class="fas fa-share-alt mr-2 text-green-600"></i>Social Media Links <span class="text-sm font-normal text-gray-500">(Optional)</span></h3>
                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                    <div>
                        <label class="block text-sm font-semibold text-gray-700 mb-1"><i class="fab fa-whatsapp mr-1" style="color:#25D366;"></i>WhatsApp</label>
                        <input type="url" name="social_media_links[whatsapp]" value="{{ old('social_media_links.whatsapp', $organization->social_media_links['whatsapp'] ?? '') }}" class="w-full px-4 py-2 border border-gray-300 rounded-lg bg-white text-gray-800 focus:ring-2 focus:ring-green-500 focus:border-transparent" placeholder="https://wa.me/...">
                    </div>
                    <div>
                        <label class="block text-sm font-semibold text-gray-700 mb-1"><i class="fab fa-facebook mr-1" style="color:#1877F2;"></i>Facebook</label>
                        <input type="url" name="social_media_links[facebook]" value="{{ old('social_media_links.facebook', $organization->social_media_links['facebook'] ?? '') }}" class="w-full px-4 py-2 border border-gray-300 rounded-lg bg-white text-gray-800 focus:ring-2 focus:ring-green-500 focus:border-transparent" placeholder="https://facebook.com/...">
                    </div>
                    <div>
                        <label class="block text-sm font-semibold text-gray-700 mb-1"><i class="fab fa-x-twitter mr-1" style="color:#000000;"></i>X / Twitter</label>
                        <input type="url" name="social_media_links[twitter]" value="{{ old('social_media_links.twitter', $organization->social_media_links['twitter'] ?? '') }}" class="w-full px-4 py-2 border border-gray-300 rounded-lg bg-white text-gray-800 focus:ring-2 focus:ring-green-500 focus:border-transparent" placeholder="https://x.com/...">
                    </div>
                    <div>
                        <label class="block text-sm font-semibold text-gray-700 mb-1"><i class="fab fa-tiktok mr-1" style="color:#ff0050;"></i>TikTok</label>
                        <input type="url" name="social_media_links[tiktok]" value="{{ old('social_media_links.tiktok', $organization->social_media_links['tiktok'] ?? '') }}" class="w-full px-4 py-2 border border-gray-300 rounded-lg bg-white text-gray-800 focus:ring-2 focus:ring-green-500 focus:border-transparent" placeholder="https://tiktok.com/@...">
                    </div>
                    <div>
                        <label class="block text-sm font-semibold text-gray-700 mb-1"><i class="fab fa-linkedin mr-1" style="color:#0A66C2;"></i>LinkedIn</label>
                        <input type="url" name="social_media_links[linkedin]" value="{{ old('social_media_links.linkedin', $organization->social_media_links['linkedin'] ?? '') }}" class="w-full px-4 py-2 border border-gray-300 rounded-lg bg-white text-gray-800 focus:ring-2 focus:ring-green-500 focus:border-transparent" placeholder="https://linkedin.com/company/...">
                    </div>
                    <div>
                        <label class="block text-sm font-semibold text-gray-700 mb-1"><i class="fab fa-instagram mr-1" style="color:#E1306C;"></i>Instagram</label>
                        <input type="url" name="social_media_links[instagram]" value="{{ old('social_media_links.instagram', $organization->social_media_links['instagram'] ?? '') }}" class="w-full px-4 py-2 border border-gray-300 rounded-lg bg-white text-gray-800 focus:ring-2 focus:ring-green-500 focus:border-transparent" placeholder="https://instagram.com/...">
                    </div>
                    <div>
                        <label class="block text-sm font-semibold text-gray-700 mb-1"><i class="fab fa-youtube mr-1" style="color:#FF0000;"></i>YouTube</label>
                        <input type="url" name="social_media_links[youtube]" value="{{ old('social_media_links.youtube', $organization->social_media_links['youtube'] ?? '') }}" class="w-full px-4 py-2 border border-gray-300 rounded-lg bg-white text-gray-800 focus:ring-2 focus:ring-green-500 focus:border-transparent" placeholder="https://youtube.com/@...">
                    </div>
                </div>
            </div>

            <div class="flex justify-end gap-3 pt-4 border-t border-gray-200">
                <a href="{{ route('organization.details.index') }}" class="px-6 py-2 bg-gray-200 text-gray-700 rounded-lg hover:bg-gray-300 transition font-medium">
                    <i class="fas fa-times mr-2"></i>Cancel
                </a>
                <button type="submit" class="theme-btn-primary px-6 py-2 rounded-lg">
                    <i class="fas fa-save mr-2"></i>Update Organization
                </button>
            </div>
        </form>
    </div>
</x-app-layout>
