@extends('layouts.marketplace')

@section('title', 'Community')

@section('mobile_header')
    <div class="flex items-center justify-between border-b border-slate-200 dark:border-slate-800 bg-background-light/80 dark:bg-background-dark/80 backdrop-blur-md px-4 py-3">
        <div class="flex items-center gap-3">
            <div class="flex h-10 w-10 items-center justify-center rounded-xl bg-primary text-white">
                <span class="material-symbols-outlined">groups</span>
            </div>
            <h1 class="text-xl font-bold tracking-tight">Community</h1>
        </div>
        <div class="flex gap-2">
            <button class="flex h-10 w-10 items-center justify-center rounded-full hover:bg-slate-200 dark:hover:bg-slate-800 transition-colors" type="button">
                <span class="material-symbols-outlined">search</span>
            </button>
            @include('pharmacy.partials.notifications_icon', ['anchorClass' => 'flex h-10 w-10 items-center justify-center rounded-full hover:bg-slate-200 dark:hover:bg-slate-800 transition-colors relative'])
        </div>
    </div>
@endsection

@section('mobile_content')
    @php
        $tab = request('tab', 'trending');
        if (! in_array($tab, ['all', 'following', 'trending'], true)) {
            $tab = 'trending';
        }
        $myPharmacyId = auth()->user()->pharmacy_id;
    @endphp
    <main class="flex-1 pb-24">
        <div class="p-4 border-b border-slate-200 dark:border-slate-800" id="communityCreate">
            <form class="flex gap-3" method="POST" action="{{ route('pharmacy.community.store') }}" enctype="multipart/form-data">
                @csrf
                <div class="h-10 w-10 shrink-0 overflow-hidden rounded-full bg-slate-200 dark:bg-slate-700">
                    <img class="h-full w-full object-cover" src="{{ asset('images/pharma-logo.png') }}" alt="Pharmacy logo">
                </div>
                <div class="flex-1">
                    <textarea id="communityBodyMobile" class="w-full resize-none border-none bg-transparent p-0 text-base placeholder-slate-500 focus:ring-0" name="body" placeholder="What's happening in your community?" rows="2" required>{{ old('body') }}</textarea>
                    <input id="communityImageMobile" class="hidden" name="media[]" type="file" accept="image/*,application/pdf" multiple data-upload-status="communityImageMobileStatus" data-preview-container="communityImageMobilePreview">
                    <input id="communityLocationMobile" class="hidden mt-3 w-full rounded-xl border border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900 px-4 py-3 text-sm text-slate-900 dark:text-white placeholder-slate-400 focus:outline-none focus:ring-1 focus:ring-primary" name="location_url" value="{{ old('location_url') }}" placeholder="Google Maps link (optional)" type="url">
                    <input id="communityVideoMobile" class="hidden mt-3 w-full rounded-xl border border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900 px-4 py-3 text-sm text-slate-900 dark:text-white placeholder-slate-400 focus:outline-none focus:ring-1 focus:ring-primary" name="video_url" value="{{ old('video_url') }}" placeholder="Video URL (optional)" type="url">
                    <div class="mt-3 flex items-center justify-between">
                        <div class="flex gap-1 items-center">
                            <label class="flex h-9 w-9 items-center justify-center rounded-full text-slate-600 dark:text-slate-400 hover:bg-slate-100 dark:hover:bg-slate-800 cursor-pointer" for="communityImageMobile">
                                <span class="material-symbols-outlined text-xl">image</span>
                            </label>
                            <button class="flex h-9 w-9 items-center justify-center rounded-full text-slate-600 dark:text-slate-400 hover:bg-slate-100 dark:hover:bg-slate-800" type="button" data-toggle-video="communityVideoMobile">
                                <span class="material-symbols-outlined text-xl">videocam</span>
                            </button>
                            <button class="flex h-9 w-9 items-center justify-center rounded-full text-slate-600 dark:text-slate-400 hover:bg-slate-100 dark:hover:bg-slate-800" type="button" data-toggle-location="communityLocationMobile">
                                <span class="material-symbols-outlined text-xl">location_on</span>
                            </button>
                            <span id="communityImageMobileStatus" class="hidden text-xs font-bold text-green-600 ms-1">img is uploaded</span>
                        </div>
                        <button class="rounded-full bg-primary px-5 py-1.5 text-sm font-bold text-white shadow-sm hover:opacity-90 active:scale-95 transition-all" type="submit">
                            Post
                        </button>
                    </div>
                    <div id="communityImageMobilePreview" class="hidden mt-3 rounded-xl border border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900 p-3"></div>
                </div>
            </form>
        </div>

        <div class="flex border-b border-slate-200 dark:border-slate-800 overflow-x-auto no-scrollbar">
            <a class="flex-1 whitespace-nowrap px-6 py-4 text-sm font-bold @if($tab === 'trending') border-b-[3px] border-primary text-primary @else text-slate-500 dark:text-slate-400 @endif" href="{{ route('pharmacy.community.index', ['tab' => 'trending']) }}">Trending</a>
            <a class="flex-1 whitespace-nowrap px-6 py-4 text-sm font-medium @if($tab === 'all') border-b-[3px] border-primary text-primary font-bold @else text-slate-500 dark:text-slate-400 @endif" href="{{ route('pharmacy.community.index', ['tab' => 'all']) }}">Latest</a>
            <a class="flex-1 whitespace-nowrap px-6 py-4 text-sm font-medium @if($tab === 'following') border-b-[3px] border-primary text-primary font-bold @else text-slate-500 dark:text-slate-400 @endif" href="{{ route('pharmacy.community.index', ['tab' => 'following']) }}">Following</a>
            <button class="flex-1 whitespace-nowrap px-6 py-4 text-sm font-medium text-slate-500 dark:text-slate-400" type="button">Groups</button>
        </div>

        <div class="space-y-1 bg-slate-100 dark:bg-slate-900/50">
            @if($posts->count() === 0)
                <div class="bg-background-light dark:bg-background-dark p-4 shadow-sm text-slate-500 dark:text-slate-400">
                    No posts yet.
                </div>
            @else
                @foreach($posts as $post)
                    <div class="bg-background-light dark:bg-background-dark p-4 shadow-sm">
                        <div class="flex items-center justify-between mb-3">
                            <div class="flex items-center gap-3 min-w-0">
                                <div class="h-10 w-10 overflow-hidden rounded-full bg-slate-200 shrink-0">
                                    <img class="h-full w-full object-cover" src="{{ asset('images/pharma-logo.png') }}" alt="Pharmacy logo">
                                </div>
                                <div class="min-w-0">
                                    <p class="text-sm font-bold truncate">{{ $post->pharmacy?->name }}</p>
                                    <p class="text-xs text-slate-500 truncate">{{ $post->created_at?->diffForHumans() }}</p>
                                </div>
                            </div>
                            <details class="relative">
                                <summary class="list-none cursor-pointer text-slate-400">
                                    <span class="material-symbols-outlined">more_horiz</span>
                                </summary>
                                <div class="absolute right-0 mt-2 w-40 rounded-xl border border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900 shadow-lg overflow-hidden z-10">
                                    @if($post->pharmacy_id === $myPharmacyId)
                                        <a class="block px-4 py-2 text-sm font-semibold text-slate-700 dark:text-slate-200 hover:bg-slate-50 dark:hover:bg-slate-800" href="{{ route('pharmacy.community.edit', $post) }}">Edit</a>
                                        <form method="POST" action="{{ route('pharmacy.community.destroy', $post) }}">
                                            @csrf
                                            @method('DELETE')
                                            <button class="w-full text-left px-4 py-2 text-sm font-semibold text-red-700 hover:bg-red-50 dark:hover:bg-red-900/10" type="submit">Delete</button>
                                        </form>
                                    @endif
                                </div>
                            </details>
                        </div>

                        <h3 class="mb-2 text-base font-bold leading-snug break-words">{{ $post->title ?: 'Post' }}</h3>
                        <p class="mb-3 text-sm text-slate-600 dark:text-slate-400 break-words">
                            {{ \Illuminate\Support\Str::limit($post->body, 220) }}
                        </p>

                        @php
                            $mediaPaths = is_array($post->media_paths) && count($post->media_paths) > 0
                                ? $post->media_paths
                                : ($post->image_path ? [$post->image_path] : []);
                            $pdfPaths = array_values(array_filter($mediaPaths, fn ($p) => is_string($p) && \Illuminate\Support\Str::endsWith(strtolower($p), '.pdf')));
                            $imagePaths = array_values(array_filter($mediaPaths, fn ($p) => is_string($p) && ! \Illuminate\Support\Str::endsWith(strtolower($p), '.pdf')));
                            $imageUrls = array_map(fn ($p) => asset($p), $imagePaths);
                        @endphp
                        @if(count($imageUrls) > 0)
                            @if(count($imageUrls) === 1)
                                <button class="mb-4 aspect-video w-full overflow-hidden rounded-xl" type="button" data-lightbox='@json($imageUrls)' data-lightbox-index="0">
                                    <img class="h-full w-full object-cover" src="{{ $imageUrls[0] }}" alt="Post image">
                                </button>
                            @else
                                <div class="mb-4 grid grid-cols-2 gap-2">
                                    @foreach($imageUrls as $i => $url)
                                        <button class="aspect-square w-full overflow-hidden rounded-xl" type="button" data-lightbox='@json($imageUrls)' data-lightbox-index="{{ $i }}">
                                            <img class="h-full w-full object-cover" src="{{ $url }}" alt="Post image">
                                        </button>
                                    @endforeach
                                </div>
                            @endif
                        @endif

                        @if(count($pdfPaths) > 0)
                            <div class="mb-4 flex flex-col gap-2">
                                @foreach($pdfPaths as $path)
                                    <a class="group inline-flex items-center gap-1.5 text-sm font-bold text-primary no-underline" href="{{ asset($path) }}" target="_blank" rel="noopener noreferrer">
                                        <span class="material-symbols-outlined text-lg">picture_as_pdf</span>
                                        <span class="group-hover:underline underline-offset-4">Open PDF</span>
                                    </a>
                                @endforeach
                            </div>
                        @endif

                        @if($post->video_url)
                            <a class="group inline-flex items-center gap-1.5 text-sm font-bold text-primary no-underline mb-4" href="{{ $post->video_url }}" target="_blank" rel="noopener noreferrer">
                                <span class="material-symbols-outlined text-lg">play_circle</span>
                                <span class="group-hover:underline underline-offset-4">Open Video</span>
                            </a>
                        @endif

                        @if($post->location_url)
                            <a class="group inline-flex items-center gap-1.5 text-sm font-bold text-primary no-underline mb-4" href="{{ $post->location_url }}" target="_blank" rel="noopener noreferrer">
                                <span class="material-symbols-outlined text-lg">location_on</span>
                                <span class="group-hover:underline underline-offset-4">Location</span>
                            </a>
                        @endif

                        <div class="flex items-center justify-between pt-2 border-t border-slate-100 dark:border-slate-800">
                            <div class="flex gap-4">
                                <form method="POST" action="{{ route('pharmacy.community.like', $post) }}">
                                    @csrf
                                    <button class="flex items-center gap-1.5 text-slate-600 dark:text-slate-400 @if($post->liked_by_me) text-primary @endif" type="submit">
                                        <span class="material-symbols-outlined text-[20px]">favorite</span>
                                        <span class="text-xs font-medium">{{ $post->likes_count }}</span>
                                    </button>
                                </form>
                                <a class="flex items-center gap-1.5 text-slate-600 dark:text-slate-400" href="{{ route('pharmacy.community.show', $post) }}">
                                    <span class="material-symbols-outlined text-[20px]">chat_bubble</span>
                                    <span class="text-xs font-medium">{{ $post->replies_count }}</span>
                                </a>
                                <button class="flex items-center gap-1.5 text-slate-600 dark:text-slate-400" type="button">
                                    <span class="material-symbols-outlined text-[20px]">share</span>
                                </button>
                            </div>
                            <a class="text-xs font-bold text-primary" href="{{ route('pharmacy.community.show', $post) }}">Read More</a>
                        </div>
                    </div>
                @endforeach

                <div class="p-4">
                    {{ $posts->links() }}
                </div>
            @endif
        </div>
    </main>

    <button class="fixed bottom-24 right-6 flex h-14 w-14 items-center justify-center rounded-full bg-primary text-white shadow-lg shadow-primary/30 z-40 active:scale-90 transition-transform md:hidden" type="button" data-scroll-to-create>
        <span class="material-symbols-outlined text-2xl">add</span>
    </button>

    <nav class="fixed bottom-0 left-0 right-0 bg-white dark:bg-slate-900 border-t border-slate-200 dark:border-slate-800 px-6 py-2 flex justify-between items-center z-50 md:hidden">
        <a class="flex flex-col items-center gap-1 @if(request()->routeIs('pharmacy.marketplace')) text-primary @else text-slate-400 dark:text-slate-500 @endif" href="{{ route('pharmacy.marketplace') }}">
            <span class="material-symbols-outlined">storefront</span>
            <span class="text-[10px] font-medium @if(request()->routeIs('pharmacy.marketplace')) font-bold @endif">Market</span>
        </a>
        <a class="flex flex-col items-center gap-1 @if(request()->routeIs('pharmacy.community.*')) text-primary @else text-slate-400 dark:text-slate-500 @endif" href="{{ route('pharmacy.community.index') }}">
            <span class="material-symbols-outlined">forum</span>
            <span class="text-[10px] font-medium @if(request()->routeIs('pharmacy.community.*')) font-bold @endif">Community</span>
        </a>
        <a class="flex flex-col items-center gap-1 @if(request()->routeIs('pharmacy.requests')) text-primary @else text-slate-400 dark:text-slate-500 @endif" href="{{ route('pharmacy.requests') }}">
            <span class="material-symbols-outlined">assignment</span>
            <span class="text-[10px] font-medium @if(request()->routeIs('pharmacy.requests')) font-bold @endif">Requests</span>
        </a>
        <a class="flex flex-col items-center gap-1 @if(request()->routeIs('pharmacy.stock.*')) text-primary @else text-slate-400 dark:text-slate-500 @endif" href="{{ route('pharmacy.stock.index') }}">
            <span class="material-symbols-outlined">inventory_2</span>
            <span class="text-[10px] font-medium @if(request()->routeIs('pharmacy.stock.*')) font-bold @endif">Stock</span>
        </a>
        <a class="flex flex-col items-center gap-1 @if(request()->routeIs('pharmacy.verifications.*')) text-primary @else text-slate-400 dark:text-slate-500 @endif" href="{{ route('pharmacy.verifications.index') }}">
            <span class="material-symbols-outlined">verified_user</span>
            <span class="text-[10px] font-medium @if(request()->routeIs('pharmacy.verifications.*')) font-bold @endif">Verify</span>
        </a>
    </nav>
    <script>
        (function () {
            function initCommunityPage() {
                document.querySelectorAll('[data-toggle-location]').forEach(function (btn) {
                    btn.addEventListener('click', function () {
                        var id = btn.getAttribute('data-toggle-location');
                        if (!id) return;
                        var input = document.getElementById(id);
                        if (!input) return;
                        input.classList.toggle('hidden');
                        if (!input.classList.contains('hidden')) {
                            input.focus();
                        }
                    });
                });

                document.querySelectorAll('[data-toggle-video]').forEach(function (btn) {
                    btn.addEventListener('click', function () {
                        var id = btn.getAttribute('data-toggle-video');
                        if (!id) return;
                        var input = document.getElementById(id);
                        if (!input) return;
                        input.classList.toggle('hidden');
                        if (!input.classList.contains('hidden')) {
                            input.focus();
                        }
                    });
                });

                document.querySelectorAll('input[type="file"][data-upload-status]').forEach(function (input) {
                    input.addEventListener('change', function () {
                    var statusId = input.getAttribute('data-upload-status');
                    if (!statusId) return;
                    var statusEl = document.getElementById(statusId);
                    if (!statusEl) return;
                    var files = input.files ? Array.from(input.files) : [];
                    if (files.length === 0) {
                        statusEl.classList.add('hidden');
                        return;
                    }
                    statusEl.classList.remove('hidden');
                    statusEl.innerHTML =
                        '<span class="inline-flex items-center gap-1.5">' +
                        '<span class="material-symbols-outlined animate-spin text-base">progress_activity</span>' +
                        '<span>Uploading...</span>' +
                        '</span>';
                    window.setTimeout(function () {
                        statusEl.textContent = files.length + (files.length === 1 ? ' file selected' : ' files selected');
                    }, 800);

                    var previewId = input.getAttribute('data-preview-container');
                    if (!previewId) return;
                    var previewEl = document.getElementById(previewId);
                    if (!previewEl) return;

                    var objectUrls = [];
                    try {
                        objectUrls = input.dataset.objectUrls ? JSON.parse(input.dataset.objectUrls) : [];
                    } catch (e) {
                        objectUrls = [];
                    }
                    if (Array.isArray(objectUrls)) {
                        objectUrls.forEach(function (u) {
                            try {
                                URL.revokeObjectURL(u);
                            } catch (e) {}
                        });
                    }
                    delete input.dataset.objectUrls;

                    var html = '<div class="flex flex-col gap-2">';
                    files.forEach(function (file, index) {
                        var name = (file && file.name ? file.name : '').toLowerCase();
                        var isPdf = (file && file.type === 'application/pdf') || name.endsWith('.pdf');
                        if (isPdf) {
                            html +=
                                '<div class="w-full rounded-xl border border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900 p-3">' +
                                '<div class="flex items-center gap-3 overflow-hidden">' +
                                '<div class="min-w-0 flex-1 flex items-center gap-2 text-slate-700 dark:text-slate-200">' +
                                '<span class="material-symbols-outlined text-xl text-red-500">picture_as_pdf</span>' +
                                '<div class="min-w-0 flex-1">' +
                                '<div class="text-sm font-bold truncate">' +
                                (file.name || 'document.pdf') +
                                '</div>' +
                                '<div class="text-xs text-slate-500 dark:text-slate-400">Ready to upload</div>' +
                                '</div>' +
                                '</div>' +
                                '<button type="button" class="shrink-0 rounded-lg bg-slate-200 px-3 py-1.5 text-xs font-bold text-slate-700 hover:bg-slate-300 dark:bg-slate-700 dark:text-slate-200 dark:hover:bg-slate-600" data-remove-upload-file="' +
                                input.id +
                                '" data-remove-upload-index="' +
                                index +
                                '">Remove</button>' +
                                '</div>' +
                                '</div>';
                            return;
                        }

                        var fileUrl = URL.createObjectURL(file);
                        objectUrls.push(fileUrl);
                        html +=
                            '<div class="w-full rounded-xl border border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900 p-3">' +
                            '<div class="flex items-start gap-3 overflow-hidden">' +
                            '<div class="min-w-0 flex-1 flex items-start gap-3">' +
                            '<img class="h-20 w-28 shrink-0 rounded-lg object-cover border border-slate-200 dark:border-slate-700" src="' +
                            fileUrl +
                            '" alt="Selected image">' +
                            '<div class="min-w-0 flex-1">' +
                            '<div class="text-sm font-bold text-slate-900 dark:text-white truncate">' +
                            (file.name || 'image') +
                            '</div>' +
                            '<div class="text-xs text-slate-500 dark:text-slate-400">Ready to upload</div>' +
                            '</div>' +
                            '</div>' +
                            '<button type="button" class="shrink-0 rounded-lg bg-slate-200 px-3 py-1.5 text-xs font-bold text-slate-700 hover:bg-slate-300 dark:bg-slate-700 dark:text-slate-200 dark:hover:bg-slate-600" data-remove-upload-file="' +
                            input.id +
                            '" data-remove-upload-index="' +
                            index +
                            '">Remove</button>' +
                            '</div>' +
                            '</div>';
                    });
                    html +=
                        '<div class="flex justify-end">' +
                        '<button type="button" class="rounded-lg bg-slate-200 px-3 py-1.5 text-xs font-bold text-slate-700 hover:bg-slate-300 dark:bg-slate-700 dark:text-slate-200 dark:hover:bg-slate-600" data-remove-upload="' +
                        input.id +
                        '">Remove all</button>' +
                        '</div>' +
                        '</div>';

                    previewEl.innerHTML = html;
                    input.dataset.objectUrls = JSON.stringify(objectUrls);

                    previewEl.classList.remove('hidden');
                    });
                });

                document.addEventListener('click', function (e) {
                var btnFile = e.target && e.target.closest ? e.target.closest('[data-remove-upload-file]') : null;
                if (btnFile) {
                    var inputId = btnFile.getAttribute('data-remove-upload-file');
                    var indexStr = btnFile.getAttribute('data-remove-upload-index');
                    var index = indexStr ? parseInt(indexStr, 10) : -1;
                    if (!inputId || index < 0) return;
                    var input = document.getElementById(inputId);
                    if (!input) return;
                    var files = input.files ? Array.from(input.files) : [];
                    if (files.length === 0) return;
                    files.splice(index, 1);
                    var dt = new DataTransfer();
                    files.forEach(function (f) {
                        dt.items.add(f);
                    });
                    input.files = dt.files;
                    input.dispatchEvent(new Event('change'));
                    return;
                }

                var btn = e.target && e.target.closest ? e.target.closest('[data-remove-upload]') : null;
                if (!btn) return;
                var inputIdAll = btn.getAttribute('data-remove-upload');
                if (!inputIdAll) return;
                var inputAll = document.getElementById(inputIdAll);
                if (!inputAll) return;

                var objectUrls = [];
                try {
                    objectUrls = inputAll.dataset.objectUrls ? JSON.parse(inputAll.dataset.objectUrls) : [];
                } catch (e) {
                    objectUrls = [];
                }
                if (Array.isArray(objectUrls)) {
                    objectUrls.forEach(function (u) {
                        try {
                            URL.revokeObjectURL(u);
                        } catch (e) {}
                    });
                }
                delete inputAll.dataset.objectUrls;

                inputAll.value = '';

                var statusId = inputAll.getAttribute('data-upload-status');
                if (statusId) {
                    var statusEl = document.getElementById(statusId);
                    if (statusEl) statusEl.classList.add('hidden');
                }

                var previewId = inputAll.getAttribute('data-preview-container');
                if (previewId) {
                    var previewEl = document.getElementById(previewId);
                    if (previewEl) {
                        previewEl.classList.add('hidden');
                        previewEl.innerHTML = '';
                    }
                }
                });

                document.querySelectorAll('form[enctype="multipart/form-data"]').forEach(function (form) {
                    form.addEventListener('submit', function () {
                    var submitBtn = form.querySelector('button[type="submit"]');
                    if (submitBtn) {
                        submitBtn.disabled = true;
                        submitBtn.classList.add('opacity-80', 'cursor-not-allowed');
                        submitBtn.innerHTML =
                            '<span class="inline-flex items-center gap-2">' +
                            '<span class="material-symbols-outlined animate-spin text-lg">progress_activity</span>' +
                            '<span>Uploading...</span>' +
                            '</span>';
                    }

                    var fileInput = form.querySelector('input[type="file"][data-upload-status]');
                    if (!fileInput) return;
                    var statusId = fileInput.getAttribute('data-upload-status');
                    if (!statusId) return;
                    var statusEl = document.getElementById(statusId);
                    if (!statusEl) return;
                    var files = fileInput.files ? Array.from(fileInput.files) : [];
                    if (files.length === 0) return;
                    statusEl.classList.remove('hidden');
                    statusEl.innerHTML =
                        '<span class="inline-flex items-center gap-1.5">' +
                        '<span class="material-symbols-outlined animate-spin text-base">progress_activity</span>' +
                        '<span>Uploading...</span>' +
                        '</span>';
                    });
                });

                var fab = document.querySelector('[data-scroll-to-create]');
                if (fab) {
                    fab.addEventListener('click', function () {
                        var el = document.getElementById('communityCreate');
                        if (el && el.scrollIntoView) {
                            el.scrollIntoView({ behavior: 'smooth', block: 'start' });
                        }
                        var input = document.getElementById('communityBodyMobile');
                        if (input && input.focus) {
                            window.setTimeout(function () {
                                input.focus();
                            }, 250);
                        }
                    });
                }

                if (!window.pmLightboxInitialized) {
                    window.pmLightboxInitialized = true;

                    var modal = document.getElementById('pmLightbox');
                    if (!modal) {
                        modal = document.createElement('div');
                        modal.id = 'pmLightbox';
                        modal.className = 'hidden fixed inset-0 z-[100]';
                        modal.innerHTML =
                            '<div class="absolute inset-0 bg-black/80" data-lightbox-close></div>' +
                            '<div class="absolute inset-0 flex items-center justify-center p-4">' +
                            '<div class="relative w-full max-w-4xl">' +
                            '<button type="button" class="absolute -top-12 right-0 text-white/90 hover:text-white" data-lightbox-close>' +
                            '<span class="material-symbols-outlined text-3xl">close</span>' +
                            '</button>' +
                            '<button type="button" class="absolute left-0 top-1/2 -translate-y-1/2 text-white/80 hover:text-white p-2" data-lightbox-prev>' +
                            '<span class="material-symbols-outlined text-4xl">chevron_left</span>' +
                            '</button>' +
                            '<button type="button" class="absolute right-0 top-1/2 -translate-y-1/2 text-white/80 hover:text-white p-2" data-lightbox-next>' +
                            '<span class="material-symbols-outlined text-4xl">chevron_right</span>' +
                            '</button>' +
                            '<img class="mx-auto max-h-[80vh] w-auto rounded-xl shadow-2xl" data-lightbox-img alt="Preview">' +
                            '<div class="mt-3 text-center text-white/80 text-sm font-bold" data-lightbox-count></div>' +
                            '</div>' +
                            '</div>';
                        document.body.appendChild(modal);
                    }

                    var state = { images: [], index: 0 };
                    var imgEl = modal.querySelector('[data-lightbox-img]');
                    var countEl = modal.querySelector('[data-lightbox-count]');

                    function render() {
                        if (!imgEl) return;
                        var url = state.images[state.index];
                        imgEl.src = url || '';
                        if (countEl) {
                            countEl.textContent = state.images.length > 0 ? state.index + 1 + ' / ' + state.images.length : '';
                        }
                    }

                    function open(images, index) {
                        state.images = Array.isArray(images) ? images : [];
                        state.index = typeof index === 'number' ? index : 0;
                        if (state.index < 0) state.index = 0;
                        if (state.index >= state.images.length) state.index = state.images.length - 1;
                        modal.classList.remove('hidden');
                        document.body.classList.add('overflow-hidden');
                        render();
                    }

                    function close() {
                        modal.classList.add('hidden');
                        document.body.classList.remove('overflow-hidden');
                        state.images = [];
                        state.index = 0;
                        if (imgEl) imgEl.src = '';
                        if (countEl) countEl.textContent = '';
                    }

                    function prev() {
                        if (state.images.length === 0) return;
                        state.index = (state.index - 1 + state.images.length) % state.images.length;
                        render();
                    }

                    function next() {
                        if (state.images.length === 0) return;
                        state.index = (state.index + 1) % state.images.length;
                        render();
                    }

                    document.addEventListener('click', function (e) {
                        var trigger = e.target && e.target.closest ? e.target.closest('[data-lightbox]') : null;
                        if (trigger) {
                            var raw = trigger.getAttribute('data-lightbox');
                            var idxRaw = trigger.getAttribute('data-lightbox-index');
                            var idx = idxRaw ? parseInt(idxRaw, 10) : 0;
                            try {
                                open(JSON.parse(raw || '[]'), isNaN(idx) ? 0 : idx);
                            } catch (err) {}
                            return;
                        }

                        if (e.target && e.target.closest && e.target.closest('[data-lightbox-close]')) {
                            close();
                            return;
                        }

                        if (e.target && e.target.closest && e.target.closest('[data-lightbox-prev]')) {
                            prev();
                            return;
                        }

                        if (e.target && e.target.closest && e.target.closest('[data-lightbox-next]')) {
                            next();
                            return;
                        }
                    });

                    document.addEventListener('keydown', function (e) {
                        if (modal.classList.contains('hidden')) return;
                        if (e.key === 'Escape') close();
                        if (e.key === 'ArrowLeft') prev();
                        if (e.key === 'ArrowRight') next();
                    });
                }
            }

            if (document.readyState === 'loading') {
                document.addEventListener('DOMContentLoaded', initCommunityPage);
            } else {
                initCommunityPage();
            }
        })();
    </script>
@endsection

@section('desktop_content')
    @php
        $tab = request('tab', 'all');
        if (! in_array($tab, ['all', 'following', 'trending'], true)) {
            $tab = 'all';
        }
        $myPharmacyId = auth()->user()->pharmacy_id;
    @endphp
    <main class="flex flex-1 justify-center py-8 px-4 md:px-0">
        <div class="layout-content-container flex flex-col max-w-[800px] flex-1 gap-6">
            <div class="bg-white dark:bg-slate-900 rounded-xl border border-slate-200 dark:border-slate-800 p-5 shadow-sm">
                <div class="flex gap-4">
                    <div class="h-12 w-12 rounded-full overflow-hidden bg-white flex items-center justify-center border border-slate-200 dark:border-slate-800 shrink-0">
                        <img class="h-full w-full object-contain p-2" src="{{ asset('images/pharma-logo.png') }}" alt="Pharmacy logo">
                    </div>
                    <div class="flex-1 flex flex-col gap-3">
                        <form method="POST" action="{{ route('pharmacy.community.store') }}" enctype="multipart/form-data">
                            @csrf
                            <div class="flex flex-col gap-3">
                                <input class="form-input w-full rounded-xl text-slate-900 dark:text-white focus:outline-0 focus:ring-1 focus:ring-primary border border-slate-200 dark:border-slate-700 bg-slate-50 dark:bg-slate-800 placeholder:text-slate-400 p-4 text-base" name="title" value="{{ old('title') }}" placeholder="Title (optional)" type="text">
                                <textarea class="form-input w-full min-h-[100px] rounded-xl text-slate-900 dark:text-white focus:outline-0 focus:ring-1 focus:ring-primary border border-slate-200 dark:border-slate-700 bg-slate-50 dark:bg-slate-800 placeholder:text-slate-400 p-4 text-base resize-none" name="body" placeholder="Share an update with the community..." required>{{ old('body') }}</textarea>
                                <input id="communityImageDesktop" class="hidden" name="media[]" type="file" accept="image/*,application/pdf" multiple data-upload-status="communityImageDesktopStatus" data-preview-container="communityImageDesktopPreview">
                                <input id="communityLocationDesktop" class="hidden form-input w-full rounded-xl text-slate-900 dark:text-white focus:outline-0 focus:ring-1 focus:ring-primary border border-slate-200 dark:border-slate-700 bg-slate-50 dark:bg-slate-800 placeholder:text-slate-400 p-4 text-base" name="location_url" value="{{ old('location_url') }}" placeholder="Google Maps link (optional)" type="url">
                                <input id="communityVideoDesktop" class="hidden form-input w-full rounded-xl text-slate-900 dark:text-white focus:outline-0 focus:ring-1 focus:ring-primary border border-slate-200 dark:border-slate-700 bg-slate-50 dark:bg-slate-800 placeholder:text-slate-400 p-4 text-base" name="video_url" value="{{ old('video_url') }}" placeholder="Video URL (optional)" type="url">
                                <div class="flex items-center justify-between">
                                    <div class="flex items-center gap-2">
                                        <label class="p-2 text-slate-500 hover:bg-slate-100 dark:hover:bg-slate-800 rounded-lg transition-colors cursor-pointer" for="communityImageDesktop">
                                            <span class="material-symbols-outlined text-xl">image</span>
                                        </label>
                                        <button class="p-2 text-slate-500 hover:bg-slate-100 dark:hover:bg-slate-800 rounded-lg transition-colors" type="button" data-toggle-video="communityVideoDesktop">
                                            <span class="material-symbols-outlined text-xl">videocam</span>
                                        </button>
                                        <span id="communityImageDesktopStatus" class="hidden text-xs font-bold text-green-600">img is uploaded</span>
                                        <button class="p-2 text-slate-500 hover:bg-slate-100 dark:hover:bg-slate-800 rounded-lg transition-colors" type="button" data-toggle-location="communityLocationDesktop">
                                            <span class="material-symbols-outlined text-xl">location_on</span>
                                        </button>
                                    </div>
                                    <button class="bg-primary hover:bg-primary/90 text-white font-bold py-2 px-8 rounded-xl transition-colors shadow-lg shadow-primary/20" type="submit">
                                        Post
                                    </button>
                                </div>
                                <div id="communityImageDesktopPreview" class="hidden rounded-xl border border-slate-200 dark:border-slate-700 bg-slate-50 dark:bg-slate-800 p-4"></div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>

            <div class="flex border-b border-slate-200 dark:border-slate-800 gap-8 mb-2">
                <a class="flex flex-col items-center justify-center pb-3 px-2 transition-all @if($tab === 'all') border-b-2 border-primary text-primary @else border-b-2 border-transparent text-slate-500 hover:text-slate-700 dark:hover:text-slate-300 @endif" href="{{ route('pharmacy.community.index', ['tab' => 'all']) }}">
                    <span class="text-sm font-bold">All Posts</span>
                </a>
                <a class="flex flex-col items-center justify-center pb-3 px-2 transition-all @if($tab === 'following') border-b-2 border-primary text-primary @else border-b-2 border-transparent text-slate-500 hover:text-slate-700 dark:hover:text-slate-300 @endif" href="{{ route('pharmacy.community.index', ['tab' => 'following']) }}">
                    <span class="text-sm font-bold">Following</span>
                </a>
                <a class="flex flex-col items-center justify-center pb-3 px-2 transition-all @if($tab === 'trending') border-b-2 border-primary text-primary @else border-b-2 border-transparent text-slate-500 hover:text-slate-700 dark:hover:text-slate-300 @endif" href="{{ route('pharmacy.community.index', ['tab' => 'trending']) }}">
                    <span class="text-sm font-bold">Trending</span>
                </a>
            </div>

            @if($posts->count() === 0)
                <div class="bg-white dark:bg-slate-900 rounded-xl border border-slate-200 dark:border-slate-800 p-5 shadow-sm text-slate-500 dark:text-slate-400">
                    No posts yet.
                </div>
            @else
                <div class="flex flex-col gap-4">
                    @foreach($posts as $post)
                        <div class="bg-white dark:bg-slate-900 rounded-xl border border-slate-200 dark:border-slate-800 overflow-hidden shadow-sm hover:shadow-md transition-shadow">
                            <div class="p-5 flex flex-col gap-4">
                                <div class="flex justify-between items-start">
                                    <div class="flex gap-3 min-w-0">
                                        <div class="h-10 w-10 rounded-full overflow-hidden bg-white flex items-center justify-center border border-slate-200 dark:border-slate-800 shrink-0">
                                            <img class="h-full w-full object-contain p-1" src="{{ asset('images/pharma-logo.png') }}" alt="Pharmacy logo">
                                        </div>
                                        <div class="flex flex-col min-w-0">
                                            <span class="font-bold text-slate-900 dark:text-white truncate">{{ $post->pharmacy?->name }}</span>
                                            <span class="text-xs text-slate-500 truncate">{{ $post->created_at?->diffForHumans() }}</span>
                                        </div>
                                    </div>
                                    <details class="relative">
                                        <summary class="list-none cursor-pointer text-slate-400 hover:text-slate-600 rounded-lg p-2 hover:bg-slate-100 dark:hover:bg-slate-800">
                                            <span class="material-symbols-outlined">more_horiz</span>
                                        </summary>
                                        <div class="absolute right-0 mt-2 w-40 rounded-xl border border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900 shadow-lg overflow-hidden z-10">
                                            @if($post->pharmacy_id === $myPharmacyId)
                                                <a class="block px-4 py-2 text-sm font-semibold text-slate-700 dark:text-slate-200 hover:bg-slate-50 dark:hover:bg-slate-800" href="{{ route('pharmacy.community.edit', $post) }}">Edit</a>
                                                <form method="POST" action="{{ route('pharmacy.community.destroy', $post) }}">
                                                    @csrf
                                                    @method('DELETE')
                                                    <button class="w-full text-left px-4 py-2 text-sm font-semibold text-red-700 hover:bg-red-50 dark:hover:bg-red-900/10" type="submit">Delete</button>
                                                </form>
                                            @endif
                                        </div>
                                    </details>
                                </div>

                                <div class="flex flex-col gap-3">
                                    <h3 class="text-lg font-bold text-slate-900 dark:text-white leading-tight break-words">{{ $post->title ?: 'Post' }}</h3>
                                    <p class="text-slate-600 dark:text-slate-400 text-sm leading-relaxed break-words">{{ \Illuminate\Support\Str::limit($post->body, 260) }}</p>
                                    @php
                                        $mediaPaths = is_array($post->media_paths) && count($post->media_paths) > 0
                                            ? $post->media_paths
                                            : ($post->image_path ? [$post->image_path] : []);
                                        $pdfPaths = array_values(array_filter($mediaPaths, fn ($p) => is_string($p) && \Illuminate\Support\Str::endsWith(strtolower($p), '.pdf')));
                                        $imagePaths = array_values(array_filter($mediaPaths, fn ($p) => is_string($p) && ! \Illuminate\Support\Str::endsWith(strtolower($p), '.pdf')));
                                        $imageUrls = array_map(fn ($p) => asset($p), $imagePaths);
                                    @endphp
                                    @if(count($imageUrls) > 0)
                                        @if(count($imageUrls) === 1)
                                            <button class="w-full overflow-hidden rounded-xl border border-slate-100 dark:border-slate-800" type="button" data-lightbox='@json($imageUrls)' data-lightbox-index="0">
                                                <img class="w-full aspect-video object-cover" src="{{ $imageUrls[0] }}" alt="Post image">
                                            </button>
                                        @else
                                            <div class="grid grid-cols-2 gap-2">
                                                @foreach($imageUrls as $i => $url)
                                                    <button class="w-full overflow-hidden rounded-xl border border-slate-100 dark:border-slate-800" type="button" data-lightbox='@json($imageUrls)' data-lightbox-index="{{ $i }}">
                                                        <img class="w-full aspect-square object-cover" src="{{ $url }}" alt="Post image">
                                                    </button>
                                                @endforeach
                                            </div>
                                        @endif
                                    @endif
                                    @if(count($pdfPaths) > 0)
                                        <div class="flex flex-col gap-2">
                                            @foreach($pdfPaths as $path)
                                                <a class="group inline-flex items-center gap-1.5 text-sm font-bold text-primary no-underline" href="{{ asset($path) }}" target="_blank" rel="noopener noreferrer">
                                                    <span class="material-symbols-outlined text-lg">picture_as_pdf</span>
                                                    <span class="group-hover:underline underline-offset-4">Open PDF</span>
                                                </a>
                                            @endforeach
                                        </div>
                                    @endif
                                    @if($post->video_url)
                                        <a class="group inline-flex items-center gap-1.5 text-sm font-bold text-primary no-underline" href="{{ $post->video_url }}" target="_blank" rel="noopener noreferrer">
                                            <span class="material-symbols-outlined text-lg">play_circle</span>
                                            <span class="group-hover:underline underline-offset-4">Open Video</span>
                                        </a>
                                    @endif
                                    @if($post->location_url)
                                        <a class="group inline-flex items-center gap-1.5 text-sm font-bold text-primary no-underline" href="{{ $post->location_url }}" target="_blank" rel="noopener noreferrer">
                                            <span class="material-symbols-outlined text-lg">location_on</span>
                                            <span class="group-hover:underline underline-offset-4">Location</span>
                                        </a>
                                    @endif
                                </div>

                                <div class="flex items-center justify-between pt-2 border-t border-slate-100 dark:border-slate-800">
                                    <div class="flex gap-4">
                                        <form method="POST" action="{{ route('pharmacy.community.like', $post) }}">
                                            @csrf
                                            <button class="flex items-center gap-1.5 text-slate-500 hover:text-primary transition-colors @if($post->liked_by_me) text-primary @endif" type="submit">
                                                <span class="material-symbols-outlined text-xl">favorite</span>
                                                <span class="text-xs font-bold">{{ $post->likes_count }}</span>
                                            </button>
                                        </form>
                                        <a class="flex items-center gap-1.5 text-slate-500 hover:text-primary transition-colors" href="{{ route('pharmacy.community.show', $post) }}">
                                            <span class="material-symbols-outlined text-xl">chat_bubble</span>
                                            <span class="text-xs font-bold">{{ $post->replies_count }}</span>
                                        </a>
                                        <button class="flex items-center gap-1.5 text-slate-500 hover:text-primary transition-colors" type="button">
                                            <span class="material-symbols-outlined text-xl">share</span>
                                        </button>
                                    </div>
                                    <a class="bg-primary/10 text-primary hover:bg-primary hover:text-white font-bold py-1.5 px-4 rounded-lg text-sm transition-all" href="{{ route('pharmacy.community.show', $post) }}">
                                        Open
                                    </a>
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>

                <div>
                    {{ $posts->links() }}
                </div>
            @endif
        </div>
    </main>
@endsection