@extends('layouts.marketplace')

@section('title', 'Edit Post')

@section('mobile_header')
    <div class="flex items-center justify-between p-4">
        <div class="flex items-center gap-3">
            <a class="flex items-center justify-center p-2 rounded-lg hover:bg-primary/10 text-slate-700 dark:text-slate-200" href="{{ route('pharmacy.community.show', $post) }}">
                <span class="material-symbols-outlined">arrow_back</span>
            </a>
            <h1 class="text-xl font-bold tracking-tight text-slate-900 dark:text-slate-100">Edit Post</h1>
        </div>
        @include('pharmacy.partials.notifications_icon')
    </div>
@endsection

@section('mobile_content')
    <div class="p-4 space-y-4 pb-24">
        @if($errors->any())
            <div class="rounded-2xl bg-red-50 border border-red-200 p-4 text-red-800">
                <div class="font-bold mb-2">Please fix the following:</div>
                <ul class="list-disc pl-5 space-y-1">
                    @foreach($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        @endif

        <div class="bg-white dark:bg-slate-900 rounded-xl border border-slate-200 dark:border-slate-800 p-5 shadow-sm">
            <form method="POST" action="{{ route('pharmacy.community.update', $post) }}" enctype="multipart/form-data">
                @csrf
                @method('PUT')
                <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-3 text-sm" name="title" value="{{ old('title', $post->title) }}" placeholder="Title (optional)" type="text">
                    <textarea class="form-input w-full min-h-[120px] 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-3 text-sm resize-none" name="body" placeholder="Write your post..." required>{{ old('body', $post->body) }}</textarea>
                    <input id="communityEditImageMobile" class="hidden" name="media[]" type="file" accept="image/*,application/pdf" multiple data-upload-status="communityEditImageMobileStatus" data-preview-container="communityEditImageMobilePreview">
                    <input id="communityEditLocationMobile" 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-3 text-sm" name="location_url" value="{{ old('location_url', $post->location_url) }}" placeholder="Google Maps link (optional)" type="url">
                    <input id="communityEditVideoMobile" 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-3 text-sm" name="video_url" value="{{ old('video_url', $post->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="communityEditImageMobile">
                                <span class="material-symbols-outlined text-xl">image</span>
                            </label>
                            <span id="communityEditImageMobileStatus" 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-video="communityEditVideoMobile">
                                <span class="material-symbols-outlined text-xl">videocam</span>
                            </button>
                            <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="communityEditLocationMobile">
                                <span class="material-symbols-outlined text-xl">location_on</span>
                            </button>
                        </div>
                        <div class="flex items-center justify-end gap-2">
                            <a class="rounded-xl bg-slate-100 px-5 py-2.5 text-sm font-bold text-slate-700 hover:bg-slate-200 dark:bg-slate-800 dark:text-slate-200 dark:hover:bg-slate-700" href="{{ route('pharmacy.community.show', $post) }}">
                                Cancel
                            </a>
                            <button class="bg-primary hover:bg-primary/90 text-white font-bold py-2.5 px-6 rounded-xl transition-colors shadow-lg shadow-primary/20" type="submit">
                                Save
                            </button>
                        </div>
                    </div>
                    <div id="communityEditImageMobilePreview" class="hidden rounded-xl border border-slate-200 dark:border-slate-700 bg-slate-50 dark:bg-slate-800 p-3"></div>
                    @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
                    @php
                        $existingMediaPaths = is_array($post->media_paths) && count($post->media_paths) > 0
                            ? $post->media_paths
                            : ($post->image_path ? [$post->image_path] : []);
                    @endphp
                    @if(count($existingMediaPaths) > 0)
                        <div class="flex flex-col gap-2">
                            @foreach($existingMediaPaths as $path)
                                @php
                                    $isPdf = \Illuminate\Support\Str::endsWith(strtolower($path), '.pdf');
                                @endphp
                                @if($isPdf)
                                    <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>
                                @else
                                    <div class="rounded-xl border border-slate-200 dark:border-slate-800 overflow-hidden">
                                        <img class="w-full max-h-64 object-cover" src="{{ asset($path) }}" alt="Post image">
                                    </div>
                                @endif
                            @endforeach
                        </div>
                        <label class="flex items-center gap-2 text-sm font-bold text-red-700">
                            <input class="rounded border-slate-300 text-red-600 focus:ring-red-500" name="remove_media" type="checkbox" value="1">
                            Remove files
                        </label>
                    @endif
                </div>
            </form>

            <form class="mt-4" method="POST" action="{{ route('pharmacy.community.destroy', $post) }}">
                @csrf
                @method('DELETE')
                <button class="w-full rounded-xl bg-red-50 border border-red-200 px-6 py-3 text-sm font-bold text-red-700 hover:bg-red-100" type="submit">
                    Delete Post
                </button>
            </form>
        </div>
    </div>
    <script>
        (function () {
            function initEditPage() {
                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 file = fileInput.files && fileInput.files[0] ? fileInput.files[0] : null;
                    if (!file) 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>';
                    });
                });
            }

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

@section('desktop_content')
    <main class="flex flex-1 justify-center py-8 px-4 md:px-0 pb-24">
        <div class="layout-content-container flex flex-col max-w-[800px] flex-1 gap-6">
            @if($errors->any())
                <div class="rounded-2xl bg-red-50 border border-red-200 p-4 text-red-800">
                    <div class="font-bold mb-2">Please fix the following:</div>
                    <ul class="list-disc pl-5 space-y-1">
                        @foreach($errors->all() as $error)
                            <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                </div>
            @endif

            <div class="bg-white dark:bg-slate-900 rounded-xl border border-slate-200 dark:border-slate-800 p-5 shadow-sm">
                <form method="POST" action="{{ route('pharmacy.community.update', $post) }}" enctype="multipart/form-data">
                    @csrf
                    @method('PUT')
                    <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', $post->title) }}" placeholder="Title (optional)" type="text">
                        <textarea class="form-input w-full min-h-[140px] 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="Write your post..." required>{{ old('body', $post->body) }}</textarea>
                        <input id="communityEditImageDesktop" class="hidden" name="media[]" type="file" accept="image/*,application/pdf" multiple data-upload-status="communityEditImageDesktopStatus" data-preview-container="communityEditImageDesktopPreview">
                        <input id="communityEditLocationDesktop" 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', $post->location_url) }}" placeholder="Google Maps link (optional)" type="url">
                        <input id="communityEditVideoDesktop" 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', $post->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="communityEditImageDesktop">
                                    <span class="material-symbols-outlined text-xl">image</span>
                                </label>
                                <span id="communityEditImageDesktopStatus" 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-video="communityEditVideoDesktop">
                                    <span class="material-symbols-outlined text-xl">videocam</span>
                                </button>
                                <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="communityEditLocationDesktop">
                                    <span class="material-symbols-outlined text-xl">location_on</span>
                                </button>
                            </div>
                            <div class="flex items-center justify-end gap-2">
                                <a class="rounded-xl bg-slate-100 px-6 py-3 text-sm font-bold text-slate-700 hover:bg-slate-200 dark:bg-slate-800 dark:text-slate-200 dark:hover:bg-slate-700" href="{{ route('pharmacy.community.show', $post) }}">
                                    Cancel
                                </a>
                                <button class="bg-primary hover:bg-primary/90 text-white font-bold py-3 px-8 rounded-xl transition-colors shadow-lg shadow-primary/20" type="submit">
                                    Save
                                </button>
                            </div>
                        </div>
                        <div id="communityEditImageDesktopPreview" class="hidden rounded-xl border border-slate-200 dark:border-slate-700 bg-slate-50 dark:bg-slate-800 p-4"></div>
                        @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
                        @php
                            $existingMediaPaths = is_array($post->media_paths) && count($post->media_paths) > 0
                                ? $post->media_paths
                                : ($post->image_path ? [$post->image_path] : []);
                        @endphp
                        @if(count($existingMediaPaths) > 0)
                            <div class="flex flex-col gap-2">
                                @foreach($existingMediaPaths as $path)
                                    @php
                                        $isPdf = \Illuminate\Support\Str::endsWith(strtolower($path), '.pdf');
                                    @endphp
                                    @if($isPdf)
                                        <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>
                                    @else
                                        <div class="rounded-xl border border-slate-200 dark:border-slate-800 overflow-hidden">
                                            <img class="w-full max-h-80 object-cover" src="{{ asset($path) }}" alt="Post image">
                                        </div>
                                    @endif
                                @endforeach
                            </div>
                            <label class="flex items-center gap-2 text-sm font-bold text-red-700">
                                <input class="rounded border-slate-300 text-red-600 focus:ring-red-500" name="remove_media" type="checkbox" value="1">
                                Remove files
                            </label>
                        @endif
                    </div>
                </form>

                <form class="mt-4" method="POST" action="{{ route('pharmacy.community.destroy', $post) }}">
                    @csrf
                    @method('DELETE')
                    <button class="w-full rounded-xl bg-red-50 border border-red-200 px-6 py-3 text-sm font-bold text-red-700 hover:bg-red-100" type="submit">
                        Delete Post
                    </button>
                </form>
            </div>
        </div>
    </main>
@endsection