<script setup>
import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout.vue';
import {Head, Link, router, useForm} from '@inertiajs/vue3';
import {onBeforeUnmount, onMounted} from "vue";
import NavLink from "@/Components/NavLink.vue";

defineProps({
    posts:{
        type:Object,
        default: {}
    },
    can:{
        type:Object,
        default:{}
    }
    ,
    now:{
        type:String,
        default:null
    },
})

const form = useForm("StorePost",{
    body:'Write Something'
})

const createPost = function(){
    form.post(route('posts.store'),{
        onSuccess: () => {
            form.reset();
            sessionStorage.getItem('StorePost');
            // toast.success('Post created successfully')
        },
    })
}

const refreshPosts = ()=>{
    router.get(route('posts.index'),{},{
        only: ['posts','now'],
        preserveScroll: true,
        preserveState: true,
    })
}

const handleNavigation = () => {
    sessionStorage.setItem('StorePost', JSON.stringify(form)); // Store before leaving
}

onBeforeUnmount(()=>{
    handleNavigation()
})

onMounted(() => {
    // Retrieve data from session on mount if it exists
    const storedFormData = sessionStorage.getItem('StorePost');
    if (storedFormData) {
        Object.assign(form, JSON.parse(storedFormData)); // Merge with current form data
    }
});

</script>

<template>
    <Head title="Posts">
        <meta name="description" content="Posts Index">
    </Head>

    <AuthenticatedLayout>
        <template #header>
            <h2
                class="text-xl font-semibold leading-tight text-gray-800"
            >
                Posts
            </h2>
        </template>

        <div class="py-5">
<!--            <p>{{form}}</p>-->
            <div class="mx-auto max-w-7xl sm:px-6 lg:px-8">
                <form v-if="can.post_create"
                    @submit.prevent="createPost"
                    class="bg-white overflow-hidden shadow-sm sm:rounded-lg p-6 mb-4"
                >
                    <label for="body" class="sr-only">Body</label>
                    <textarea
                        v-model="form.body"
                        v-on:focus="form.clearErrors('body')"
                        name="body"
                        id="body"
                        cols="30"
                        rows="5"
                        placeholder="Write a post here. . . . "
                        class="border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 rounded-md shadow-sm w-full"
                    ></textarea>

                    <p v-if="form.errors.body" class="text-sm text-red-500"> {{ form.errors.body }}</p>

                    <button
                        :disabled="form.processing"
                        type="submit"
                        :class="{'opacity-25':form.processing}"
                        class="mt-2 bg-gray-700 px-4 py-2 rounded-md font-medium text-white"
                    >
                        Post
                    </button>
                </form>

                <div class="py-3 flex justify-center">
<!--                    <Link-->

<!--                        preserve-scroll-->

<!--                        :only="['posts','now']"-->

<!--                        :href="route('posts.index')"-->

<!--                        class="text-sm text-indigo-700"-->
<!--                    >-->
<!--                        Refresh Posts-->
<!--                    </Link>-->

                    <button @click="refreshPosts"
                        class="text-sm text-indigo-700"

                        type="button"
                    >
                        Refresh Posts
                    </button>
                </div>

                <div class="mb-4" v-for="post in posts.data" :key="post.id">
                    <div class="overflow-hidden bg-white shadow-sm sm:rounded-lg">
                        <div class="p-6 text-gray-900" >
                            <span class="text-gray-700 text-sm">Author : {{ post.user.name }}, </span>
                            <span class="text-gray-400 text-sm">Date : {{ post.created_at }}</span>
                            <hr>
                            {{ post.body }}
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="min-h-screen flex justify-center items-center">
            <div class="bg-white rounded-lg shadow-lg p-6 w-11/12 md:w-2/3 lg:w-1/2">
                <!-- Profile Header -->
                <div class="flex items-center">
                    <img
                        class="w-24 h-24 rounded-full border-4 border-indigo-500"
                        src="https://parvezsir.net//admin/assets/avatar/Andy-Profile-600-400x400.png"
                        alt="Profile Picture"
                    />
                    <div class="ml-6">
                        <h1 class="text-2xl font-bold text-gray-800">John Doe</h1>
                        <p class="text-gray-600">Web Developer & Designer</p>
                        <p class="text-gray-500 text-sm">New York, USA</p>
                    </div>
                </div>

                <!-- About Section -->
                <div class="mt-6">
                    <h2 class="text-xl font-semibold text-gray-800">About Me</h2>
                    <p class="mt-2 text-gray-600">
                        I am a passionate web developer with 5 years of experience building modern, user-friendly websites and applications. I specialize in frontend development and love working with Tailwind CSS.
                    </p>
                </div>

                <!-- Social Links -->
                <div class="mt-6">
                    <h2 class="text-xl font-semibold text-gray-800">Connect With Me</h2>
                    <div class="mt-4 flex space-x-4">
                        <a
                            href="#"
                            class="text-indigo-600 hover:text-indigo-800"
                            target="_blank"
                        >LinkedIn</a>
                        <a
                            href="#"
                            class="text-indigo-600 hover:text-indigo-800"
                            target="_blank"
                        >GitHub</a>
                        <a
                            href="#"
                            class="text-indigo-600 hover:text-indigo-800"
                            target="_blank"
                        >Twitter</a>
                    </div>
                </div>

                <!-- Activity Section -->
                <div class="mt-6">
                    <h2 class="text-xl font-semibold text-gray-800">Recent Activity</h2>
                    <ul class="mt-4 space-y-2">
                        <li class="flex items-center">
                            <span class="w-2 h-2 bg-indigo-500 rounded-full mr-2"></span>
                            <p class="text-gray-600">
                                Completed a project on <span class="font-medium">React.js</span>
                            </p>
                        </li>
                        <li class="flex items-center">
                            <span class="w-2 h-2 bg-indigo-500 rounded-full mr-2"></span>
                            <p class="text-gray-600">
                                Published an article on <span class="font-medium">CSS Tips</span>
                            </p>
                        </li>
                    </ul>
                </div>

                <!-- Footer -->
                <div class="mt-6 text-center">
                    <p class="text-gray-500 text-sm">
                        © 2025 John Doe. All rights reserved.
                    </p>
                </div>
            </div>
        </div>
    </AuthenticatedLayout>
</template>
