<!DOCTYPE html>
<html lang="en">

<!-- including head -->
<%- include('./partials/head.ejs') %>

    <body class="bg-[#effaff] font-quickSand">

        <!-- including header -->
        <%- include('./partials/header.ejs') %>

            <div id="blurContentProfile" class="pt-[88px]">
                <div class="justify-center my-4 items-center flex-col">
                    <!-- illustration -->
                    <div class="signInIllustration mx-8 md:mx-0 w-10/12 md:w-1/3 ">
                        <!-- profile illustration  -->
                    </div>
                    <!-- profile contents -->
                    <div>
                        <!-- profile details -->
                        <div class="flex items-center justify-center px-4">

                            <div class="max-w-4xl  bg-white w-full rounded-lg shadow-xl">
                                <div class="p-4 border-b">
                                    <h2 class="text-[#3bbeff] text-2xl font-semibold">
                                        Profile
                                    </h2>
                                    <p class="text-sm text-gray-500">
                                        Your account details
                                    </p>
                                </div>
                                <div>
                                    <div
                                        class="md:grid md:grid-cols-2 hover:bg-gray-50 md:space-y-0 space-y-1 p-4 border-b">
                                        <p class="text-gray-600">
                                            Name
                                        </p>
                                        <p>
                                            <%= user.user_name %>
                                        </p>
                                    </div>
                                    <div
                                        class="md:grid md:grid-cols-2 hover:bg-gray-50 md:space-y-0 space-y-1 p-4 border-b">
                                        <p class="text-gray-600">
                                            Email Address
                                        </p>
                                        <p>
                                            <%= user.user_email %>
                                        </p>
                                    </div>
                                    <div class="md:grid md:grid-cols-2 hover:bg-gray-50 md:space-y-0 space-y-1 p-4">
                                        <p class="text-gray-600">
                                            Recently checked pdfs . . . 
                                        </p>
                                        <div class="space-y-2">
                                            <% if (recentlyReadPDFs && recentlyReadPDFs.length > 0) { %>
                                                <% recentlyReadPDFs.forEach(pdfPath => { %>
                                                    <% const pdfName = path.basename(pdfPath); %> <!-- Extract the name from the path -->
                                                    <% const pdfRoute = pdfRoutes[pdfPath]; %> <!-- Get the corresponding route for the PDF -->
                                                    <div class="border-2 flex text-xs md:text-base items-center p-2 rounded justify-between space-x-2">
                                                        <div class="space-x-2 truncate">
                                                            <svg xmlns="http://www.w3.org/2000/svg" class="fill-current inline text-[#3bbeff]" width="24"
                                                                height="24" viewBox="0 0 24 24">
                                                                <path
                                                                    d="M17 5v12c0 2.757-2.243 5-5 5s-5-2.243-5-5v-12c0-1.654 1.346-3 3-3s3 1.346 3 3v9c0 .551-.449 1-1 1s-1-.449-1-1v-8h-2v8c0 1.657 1.343 3 3 3s3-1.343 3-3v-9c0-2.761-2.239-5-5-5s-5 2.239-5 5v12c0 3.866 3.134 7 7 7s7-3.134 7-7v-12h-2z" />
                                                            </svg>
                                                            <span>
                                                                <%= pdfName %> <!-- Display the PDF name instead of the full path -->
                                                            </span>
                                                        </div>
                                                        <a href="<%= pdfRoute %>" class="text-[#3bbeff] hover:underline">
                                                            <button class="px-3 py-1 mb-1 border-[#3bbeff] border text-[#3bbeff] rounded transition duration-300 hover:bg-[#3bbeff] hover:text-white focus:outline-none">Read</button>
                                                        </a>
                                                    </div>
                                                <% }); %>
                                            <% } else { %>
                                                <div class="border-2 flex items-center p-2 rounded justify-between space-x-2">
                                                    <div class="space-x-2 truncate">
                                                        <span>
                                                            No recently read PDFs! Start Reading!
                                                        </span>
                                                    </div>
                                                </div>
                                            <% } %>
                                        </div>
                                        

                                    </div>
                                    <form id="signOutForm" action="/sign-out" method="post">
                                        <button type="submit"
                                            class="w-full py-3 font-medium text-[#f1fffa] bg-[#3bbeff] hover:bg-[#6ecfff] rounded-lg border-indigo-500 hover:shadow inline-flex space-x-2 items-center justify-center">
                                            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none"
                                                viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                                                <path stroke-linecap="round" stroke-linejoin="round"
                                                    d="M11 16l-4-4m0 0l4-4m-4 4h14m-5 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h7a3 3 0 013 3v1" />
                                            </svg>
                                            <span>Sign out</span>
                                        </button>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- including footer -->
                <%- include('./partials/footer.ejs') %>
            </div>

            <!-- script for toggle menu -->
            <script>
                const dropdownMenu = document.querySelector(".dropdown-menu");
                function onToggleMenu(e) {
                    e.name = e.name === "menu" ? "close" : "menu";
                    dropdownMenu.classList.toggle("left-[0%]");
                }
                document.addEventListener('DOMContentLoaded', function () {
                    const menuIcon = document.getElementById('toggle-button-profile');
                    const blurContent = document.getElementById('blurContentProfile');

                    menuIcon.addEventListener('click', function () {
                        blurContent.classList.toggle('blur-sm');
                        setTimeout(function () {
                            blurContent.classList.toggle('in-trans');
                        }, 300);
                    });
                }); 
            </script>
            <!-- script for signout click -->
            <script>
                document.addEventListener('DOMContentLoaded', function () {
                    document.getElementById('signOutForm').addEventListener('submit', async function (event) {
                        event.preventDefault();
                        console.log("hey");
                        try {
                            // Submit the form asynchronously
                            await fetch('/sign-out', {
                                method: 'GET'
                            });
                            // Redirect the user to the sign-in page after signing out
                            window.location.href = '/sign-out';
                        } catch (error) {
                            console.error('Error signing out:', error);
                            // Handle error
                        }
                    });
                });
            </script>

    </body>

</html>