<x-app-layout>
    <x-slot name="header">
            {{ $category }}
    </x-slot>

    <div class="py-0 md:py-12" id="custom-timebank-style">
        <div class="mx-auto max-w-7xl sm:px-6 lg:px-8">
            <div class="overflow-hidden bg-theme-background shadow-xl sm:rounded-lg">
                <div class="border-b border-theme-primary bg-theme-background p-6 sm:px-20 lg:px-32 lg:py-18">
                    <livewire:posts.manage-actions :post="$post" />
                    <div class="mb-2 mt-0 md:mt-6 lg:mt-12">
                        <div class="text-xs lg:text-sm text-theme-secondary">{{ $update }}</div>
                    </div>
                    @if (!$post->category || !str_starts_with($post->category->type ?? '', 'App\Models\ImagePost'))
                        <h2 class="mt-4 lg:mt-8 text-3xl lg:text-5xl font-semibold leading-tight text-theme-primary">
                            {{ $post->translations->first()->title }}
                        </h2>
                    @endif

                    @if ($post->category && $post->category->type === 'App\Models\Article' && $post->author)
                        <div class="mt-6 flex items-center space-x-4 cursor-pointer hover:opacity-80"
                                onclick="window.location='{{ url(strtolower(class_basename($post->author_model)) . '/' . $post->author->id) }}'">
                            @if ($post->author->profile_photo_path)
                                <img class="h-9 w-9 rounded-full profile-photo object-cover outline outline-1 outline-offset-1 outline-theme-secondary"
                                        src="{{ url(Storage::url($post->author->profile_photo_path)) }}"
                                        alt="{{ $post->author->full_name ?? $post->author->name }}">
                            @endif
                            <span class="text-lg">
                                {{ $post->author->full_name ?? $post->author->name }}
                            </span>
                        </div>
                    @endif

                    @if (isset($post->meeting->from))
                        <h3 class="mt-4 lg:mt-8 text-xl lg:text-4xl font-semibold leading-tight text-theme-primary">
                            {{ ucfirst(Illuminate\Support\Carbon::parse($post->meeting->from)->isoFormat('dddd D MMMM, HH:mm')) . ' ' . __('h.') }}
                        </h3>
                    @endif
                    @if (isset($post->translations->first()->excerpt))
                        <div class="mt-6">
                            <div class="px-0 py-2  text-xl lg:text-2xl leading-normal lg:leading-loose font-bold text-theme-primary">
                                {{ $post->translations->first()->excerpt }}
                            </div>
                        </div>
                    @endif

                    <!-- Image --->
                    <div class="my-4 lg:my-12">
                        @if ($media != null)
                            {{ $media('hero', ['class' => 'w-full h-auto']) }}
                            @php
                                $locale = App::getLocale();
                                $imageCaption = $media->getCustomProperty('caption-' . $locale);

                                // Fallback to other locales if caption not found
                                if (!$imageCaption) {
                                    $fallbackLocales = array_keys(config('laravellocalization.supportedLocales'));
                                    foreach ($fallbackLocales as $fallbackLocale) {
                                        $imageCaption = $media->getCustomProperty('caption-' . $fallbackLocale);
                                        if ($imageCaption) {
                                            break;
                                        }
                                    }
                                }

                                $imageOwner = $media->getCustomProperty('owner');
                                $captionParts = array_filter([$imageCaption, $imageOwner]);
                                $captionText = implode(' ', $captionParts);
                            @endphp
                            @if ($captionText)
                                <div class="mt-1 lg:mt-2 text-right text-3xs lg:text-xs text-theme-secondary">
                                    {{ $captionText }}
                                </div>
                            @endif
                        @endif
                    </div>

                    @if (isset($post->translations->first()->content))
                        {{-- Post content with list styling --}}
                        <div class="post-content mt-2 lg:mt-6 mb-12 lg:mb-16 lg:mx-32 text-base lg:text-lg leading-relaxed md:leading-loose lg:leading-loose text-theme-primary">
                            {!! \App\Helpers\StringHelper::sanitizeHtml($post->translations->first()->content) !!}
                        </div>
                    @endif

                    @if (isset($post->meeting))
                        <div class="my-12 bg-theme-surface rounded-lg p-6 md:mx-32 border">
                            <table class="w-full">
                                <tbody>

                                    @if(isset($post->meeting->price))
                                        <tr>
                                            <td class="py-2 pr-4 font-semibold text-theme-primary w-1/3">{{ __('Price') }}</td>
                                            <td class="py-2 text-theme-primary">
                                                @if(strtolower($post->meeting->transactionType->name) == 'work')
                                                    {{ $post->meeting->price === 0 ? __('Free') : tbFormat($post->meeting->price) }}
                                                    ( {{ __('messages.posts.based_on_quantity', ['nr'=> $post->meeting->based_on_quantity]) }} )
                                                @elseif(strtolower($post->meeting->transactionType->name) == 'gift')
                                                    {{ __('messages.posts.transaction_types.gift') }}
                                                @elseif(strtolower($post->meeting->transactionType->name) == 'donation')
                                                    {{ __('messages.posts.transaction_types.donation') }}
                                                @endif
                                            </td>
                                        </tr>
                                    @endif
                                    
                                    @if($post->meeting->venue)
                                        <tr>
                                            <td class="py-2 pr-4 font-semibold text-theme-primary w-1/3">{{ __('Location') }}</td>
                                            <td class="py-2 text-theme-primary">{{ $post->meeting->venue }}</td>
                                        </tr>
                                    @endif

                                    @if($post->meeting->address)
                                        <tr>
                                            <td class="py-2 pr-4 font-semibold text-theme-primary w-1/3">{{ __('Address') }}</td>
                                            <td class="py-2 text-theme-primary">
                                                <a href="https://www.openstreetmap.org/search?query={{ urlencode($post->meeting->address) }}"
                                                   target="_blank"
                                                   class="underline hover:text-theme-secondary">
                                                    {{ $post->meeting->address }}
                                                </a>
                                            </td>
                                        </tr>
                                    @endif

                                    @if($post->meeting->from)
                                        <tr>
                                            <td class="py-2 pr-4 font-semibold text-theme-primary w-1/3">{{ __('Date & Time') }}</td>
                                            <td class="py-2 text-theme-primary">{{ Illuminate\Support\Carbon::parse($post->meeting->from)->isoFormat('dddd D MMMM YYYY, H:mm') }} {{ __('hour') }}</td>
                                        </tr>
                                    @endif

                                    @if(isset($post->meeting->meetingable->name))
                                        <tr>
                                            <td class="py-2 pr-4 font-semibold text-theme-primary w-1/3">{{ __('Organizer') }}</td>
                                            <td class="py-2 text-theme-primary">
                                                <a href="{{ url(strtolower(class_basename($post->meeting->meetingable)) . '/' . $post->meeting->meetingable->id) }}"
                                                   class="flex items-center space-x-3 hover:opacity-80 cursor-pointer">
                                                    @if(isset($post->meeting->meetingable->profile_photo_path))
                                                        <img src="{{ url(Storage::url($post->meeting->meetingable->profile_photo_path)) }}"
                                                             class="w-10 h-10 rounded-full profile-photo object-cover outline outline-1 outline-offset-1 outline-theme-secondary">
                                                    @endif
                                                    <span>{{ $post->meeting->meetingable->name }}</span>
                                                </a>
                                            </td>
                                        </tr>
                                    @endif
                                </tbody>
                            </table>
                        </div>

                        <div class="my-12 flex flex-col md:flex-row justify-between gap-6">
                            <!-- Social Share Buttons -->
                            <div class="md:self-end">
                                {{-- <div class="mb-3 text-sm">{{ __('Share') }}</div> --}}
                                {!! Share::mastodon()
                                    ->bluesky()
                                    ->linkedin()
                                    ->instagram()
                                    ->facebook()
                                    ->whatsapp()
                                    {{-- ->x() --}}
                                    {{-- ->telegram() --}}
                                    ->text($post->translations->first()->title)
                                    ->render() !!}
                                <div class="mt-2 text-sm invisible"><!-- Spacer to match reservation count -->&nbsp;</div>
                            </div>

                            <!-- Reservation Button -->
                            <div>
                                <livewire:reserve-button :post="$post" :wire:key="'reserve-'.$post->id" />
                            </div>
                        </div>
                    @else
                        <div class="flex flex-col md:flex-row justify-between gap-6">
                            <!-- Social Share Buttons -->
                            <div class="md:self-end">
                                {{-- <div class="mb-3 text-sm">{{ __('Share') }}</div> --}}
                                {!! Share::mastodon()
                                    ->bluesky()
                                    ->linkedin()
                                    ->instagram()
                                    ->facebook()
                                    ->whatsapp()
                                    {{-- ->x() --}}
                                    {{-- ->telegram() --}}
                                    ->text($post->translations->first()->title)
                                    ->render() !!}
                                <div class="mt-2 text-sm invisible"><!-- Spacer to match reservation count -->&nbsp;</div>
                            </div>
                        </div>

                    @endif

                    <livewire:posts.manage-actions :post="$post" />

                </div>
            </div>
        </div>
    </div>
</x-app-layout>
