
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>TechVerse - Discussion Details</title>
    <link rel="apple-touch-icon" sizes="180x180" href="http://localhost:8000/favicon/apple-touch-icon.png">
    <link rel="icon" type="image/png" sizes="32x32" href="http://localhost:8000/favicon/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="16x16" href="http://localhost:8000/favicon/favicon-16x16.png">
    <link rel="manifest" href="http://localhost:8000/favicon/site.webmanifest">
    <!-- <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet"> -->
    <!-- FontAwesome CDN -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" rel="stylesheet">
    <script type="module" src="http://[::1]:5173/@vite/client"></script><link rel="stylesheet" href="http://[::1]:5173/resources/css/app.css" />    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap" rel="stylesheet">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <meta name="csrf-token" content="QVS1GlARPJpbocXVd5RTstEY4DkV8hOQVeGzuhvq">
<style>
        /* Prevent horizontal overflow */
        /* .body {
            margin: 0;
            padding: 0;
            overflow-x: hidden;
        } */

        /* Allow horizontal overflow on larger screens (desktop) */
    @media (max-width: 640px) {
        .body {
            overflow-x: hidden; /* Allow horizontal scroll on large screens */
        }
    }
    </style>
</head>
<body class="font-sans bg-gray-100 text-gray-900 dark:bg-gray-900 dark:text-gray-100 overflow-x-hidden">
<div class="body">
<!-- Header -->
<header class="bg-white sm:sticky fixed w-full top-0 border-b-[1px] dark:border-gray-700 flex items-center justify-between px-4 py-3 z-50 dark:bg-gray-800 h-16">
   <!-- Sticky Header -->
   <!-- <header class="bg-white dark:bg-gray-800 shadow-md fixed top-0 left-0 right-0 z-50"> -->
<!-- Left Section -->
    <div class="flex items-center space-x-4">
        <button id="openSidebar" class="text-gray-500 hover:text-gray-700 focus:outline-none dark:text-gray-300 dark:hover:text-white">
            <i class="fas fa-bars"></i> <!-- FontAwesome bars icon -->
        </button>
        <!-- 00004B -->
        <img src="http://localhost:8000/images/logo.png" alt="Logo" class="w-40 h-8 dark:hidden">
        <img src="http://localhost:8000/images/logo-dark.png" alt="Logo" class="w-40 h-8 hidden dark:flex">
    </div>

    <!-- Center Section (Navigation Links) -->
    <nav class="hidden md:flex items-center justify-center space-x-4">
        <a href="http://localhost:8000" class="hover:text-blue-500 font-bold dark:hover:text-white 
            text-gray-700 dark:text-gray-300">
            Home
        </a>
        <a href="#" class="text-gray-700 hover:text-blue-500 font-bold dark:text-gray-300 dark:hover:text-white">
            About
        </a>
        <a href="#" class="text-gray-700 hover:text-blue-500 font-bold dark:text-gray-300 dark:hover:text-white">
            Contact
        </a>
    </nav>

    <!-- Right Section -->
    <div class="flex items-center space-x-4">
        <!-- Login/Sign Up Buttons (Visible only on desktop) -->
                
        <!-- Dark Mode Toggle -->
        <button id="toggleDarkMode" class="text-gray-500 hover:text-gray-700 dark:text-gray-300 dark:hover:text-white focus:outline-none">
            <i class="fas fa-moon"></i> <!-- FontAwesome moon icon -->
        </button>

                <!-- Avatar with Dropdown -->
        <div class="relative">
            <!-- Avatar -->
            <button id="avatarButton" class="w-10 h-10 rounded-full bg-gray-300 flex items-center justify-center text-gray-600 dark:bg-gray-600 dark:text-gray-300 overflow-hidden focus:outline-none">
                                <img src="https://lh3.googleusercontent.com/a/ACg8ocIOSHv8RIZCxIjSpFDLoDb_hJrfE9NG3Rh2EZcZQQ904nNLITI=s96-c" alt="Oluwaseun Ibrahim" class="w-full h-full object-cover">
                            </button>

            <!-- Dropdown Menu -->
            <div id="dropdownMenu" class="absolute right-0 mt-2 w-48 bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 border border-gray-300 dark:border-gray-700 rounded-lg shadow-lg hidden">
                <div class="px-4 py-2">
                    <p class="font-semibold">Oluwaseun</p>
                </div>
                <hr class="border-gray-200 dark:border-gray-600">
                                <a href="http://localhost:8000/admin/admin/dashboard" class="block px-4 py-2 text-sm text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700">
                    Dashboard
                </a>
                                <a href="http://localhost:8000/logout" class="block px-4 py-2 text-sm text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-b-lg">
                    Logout
                </a>
            </div>
        </div>
        <script>
            document.addEventListener('DOMContentLoaded', function () {
                const avatarButton = document.getElementById('avatarButton');
                const dropdownMenu = document.getElementById('dropdownMenu');

                avatarButton.addEventListener('click', function () {
                    dropdownMenu.classList.toggle('hidden');
                });

                // Hide dropdown if clicked outside
                document.addEventListener('click', function (event) {
                    if (!avatarButton.contains(event.target) && !dropdownMenu.contains(event.target)) {
                        dropdownMenu.classList.add('hidden');
                    }
                });
            });
        </script>
            </div>
</header>

<!-- Sidebar -->
<!-- Sidebar -->
<!-- <aside id="sidebar" class="w-64 h-full flex-shrink-0 fixed inset-y-0 left-0 transform -translate-x-full transition-transform duration-300 z-50 md:relative md:translate-x-0 hidden dark:bg-gray-800 bg-white"> -->
<aside id="sidebar" class="fixed top-0 left-0 h-full bg-white dark:bg-gray-800 shadow-lg transform -translate-x-full transition-transform duration-300 z-50 w-64"> 
<div class="h-full flex flex-col">
        <div class="p-4 border-b border-gray-700 flex items-center justify-between">
          <h1 class="text-2xl font-bold">My App</h1>
          <button id="closeSidebar" class="text-gray-400 hover:text-white focus:outline-none">
            <i class="fas fa-times"></i> <!-- FontAwesome close icon -->
          </button>
        </div>
        <nav class="flex-grow p-4">
          <ul>
            <li class="mb-2">
              <a href="#" class="block p-2 rounded hover:bg-gray-200 dark:hover:bg-gray-700">
                <i class="text-blue-500 fas fa-home mr-2"></i> Home <!-- FontAwesome home icon -->
              </a>
            </li>
            <li class="mb-2">
              <a href="#" class="block p-2 rounded hover:bg-gray-200 dark:hover:bg-gray-700">
                <i class="text-blue-500 fas fa-info-circle mr-2"></i> About <!-- FontAwesome info-circle icon -->
              </a>
            </li>
            <li class="mb-2">
              <a href="#" class="block p-2 rounded hover:bg-gray-200 dark:hover:bg-gray-700">
                <i class="text-blue-500 fas fa-address-book mr-2"></i> Contact <!-- FontAwesome address-book icon -->
              </a>
            </li>
                      </ul>
        </nav>
      </div>
</aside>
<!-- Overlay for Sidebar -->
<div id="overlay" class="fixed inset-0 bg-black bg-opacity-50 z-40 hidden"></div>

    <!-- Page Content -->
    <div class="container mx-auto px-4 py-12 flex flex-col md:flex-row md:space-x-6">
        <!-- Left Column (Main Content) -->
        <main class="flex-grow">
            
               <div class="container mx-auto p-6">
    <h1 class="text-3xl font-bold text-gray-800 dark:text-gray-100 mb-8">Discussion Details</h1>

  <!-- Question Section -->
<div class="bg-white dark:bg-gray-800 shadow-lg rounded-lg mb-6 p-6 hover:shadow-xl transition-shadow">
    <div class="flex justify-between items-start">
        <div class="flex items-start space-x-4">
                            <!-- Show Profile Picture -->
                <img src="https://lh3.googleusercontent.com/a/ACg8ocIOSHv8RIZCxIjSpFDLoDb_hJrfE9NG3Rh2EZcZQQ904nNLITI=s96-c" alt="User Avatar" class="w-12 h-12 rounded-full border-2 border-gray-300 dark:border-gray-700">
            
            <!-- Post Header -->
            <div>
                <!-- Name, Username, and Green Dot -->
                <div class="flex items-center space-x-2">
                    <a href="#" class="text-base font-medium text-white hover:underline">Oluwaseun Ibrahim</a>
                    <div class="w-2 h-2 bg-green-500 rounded-full"></div> <!-- Green Dot -->
                    <button class="text-sm text-blue-400 hover:underline">Follow</button>
                </div>
                <!-- Username -->
                <div class="text-sm text-gray-400">
                    @<span>seun</span>
                </div>
            </div>
        </div>

        <!-- More Button Dropdown -->
        <div class="relative">
            <button
                class="text-gray-500 dark:text-gray-400 hover:text-blue-500 dark:hover:text-blue-300 transition"
                onclick="toggleDropdown(this)"
            >
                <i class="fas fa-ellipsis-v"></i>
            </button>
            <!-- Dropdown Menu -->
            <div
                class="absolute right-0 mt-2 w-40 bg-white dark:bg-gray-800 shadow-md rounded-lg overflow-hidden hidden"
                style="z-index: 10;"
            >
                <button class="w-full text-left px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700">
                    <i class="far fa-bookmark mr-2"></i>Bookmark
                </button>
                <button class="w-full text-left px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700">
                    <i class="fas fa-flag mr-2"></i>Report
                </button>
                <button class="w-full text-left px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700">
                    <i class="fas fa-share mr-2"></i>Share
                </button>
                <button class="w-full text-left px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700">
                    <i class="fas fa-copy mr-2"></i>Copy Link
                </button>
            </div>
        </div>
    </div>

    <!-- Post Content -->
    <div class="mt-4">
        <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-100 mb-2">Sample Post 5 in Programming</h2>
        <p class="text-gray-600 dark:text-gray-400 mb-4">This is a sample body for post 5 in Programming topic.</p>
    </div>

    <!-- Footer Section -->
    <div class="flex justify-between items-center mt-4 border-t pt-4 text-sm text-gray-500 dark:text-gray-400">
        <!-- Metadata -->
        <div>
            <span>2 days ago</span>
        </div>

        <!-- Voting and Comments -->
        <div class="flex items-center space-x-6">
            <!-- Upvotes -->
            <button id="questionUpvote" class="flex items-center space-x-1 text-gray-500 dark:text-gray-400 hover:text-blue-500 dark:hover:text-blue-300 transition">
                <i class="far fa-thumbs-up text-lg"></i>
                <span id="questionUpvoteCount">5</span>
            </button>
            
            <!-- Downvotes -->
            <button id="questionDownvote" class="flex items-center space-x-1 text-gray-500 dark:text-gray-400 hover:text-blue-500 dark:hover:text-blue-300 transition">
                <i class="far fa-thumbs-down text-lg"></i>
                <span id="questionDownvoteCount">0</span>
            </button>

            <!-- Comments -->
            <span class="flex items-center space-x-1">
                <i class="fas fa-comments text-lg"></i>
                <span> Comments</span>
            </span>
        </div>
    </div>
</div>


    <!-- Answers Section -->
    <div>
        <h3 class="text-2xl font-semibold text-gray-800 dark:text-gray-100 mb-4">Replies:</h3>
                <!-- Answer Card -->
<div class="bg-gray-100 dark:bg-gray-800 shadow-md rounded-lg mb-4 p-6 hover:shadow-lg transition-shadow">
    <div class="flex justify-between items-start">
        <div class="flex items-start space-x-4">
                            <!-- Show Custom Avatar with Initials -->
                                <div class="flex-none w-12 h-12 bg-green-500 text-white flex justify-center items-center rounded-full border-2 border-gray-300 dark:border-gray-700">
                    D
                </div>
                        <div>
                <p class="text-gray-800 dark:text-gray-100 mb-4">This is comment 1 on post 5 in Programming.</p>
                <div class="flex items-center space-x-4 text-gray-500 dark:text-gray-400 text-sm">
                    <span>Answered by <a href="#" class="text-blue-500 dark:text-blue-300 font-bold">@dave_design</a></span>
                    <span>2 days ago</span>
                </div>
            </div>
        </div>
        <div class="flex items-center space-x-2">
            <button class="answerUpvote flex items-center space-x-1 mr-2 text-gray-500 dark:text-gray-400 hover:text-blue-500 dark:hover:text-blue-300 transition">
                <i class="fas fa-arrow-up"></i>
                <span class="answerUpvoteCount"></span>
            </button>
            <button class="answerDownvote flex items-center space-x-1 text-gray-500 dark:text-gray-400 hover:text-blue-500 dark:hover:text-blue-300 transition">
                <i class="fas fa-arrow-down"></i>
                <span class="answerDownvoteCount"></span>
            </button>
        </div>
    </div>

    <div class="mt-4 pl-6 border-l-2 border-gray-300 dark:border-gray-700">
        
    <!-- Reply Button -->
<button
    class="flex items-center space-x-2 text-sm px-4 py-2 rounded-md bg-gray-200 hover:bg-gray-300 dark:bg-gray-700 dark:hover:bg-gray-600 text-gray-700 dark:text-gray-200 transition"
    onclick="toggleReplyForm(this)"
>
    <i class="fas fa-reply"></i>
    <span>Reply</span>
</button>

<!-- Add Reply Form (Hidden by Default) -->
<div id="replyForm" class="replyForm hidden mt-4 bg-white dark:bg-gray-700 p-4 rounded-lg shadow-md">
    <textarea
        class="w-full p-3 rounded-lg border border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:text-white focus:outline-none focus:ring focus:ring-blue-400 transition"
        rows="3"
        placeholder="Write your reply here..."
    ></textarea>
    <div class="flex items-center justify-between mt-4">
        <button class="px-4 py-2 rounded-md bg-blue-500 text-white hover:bg-blue-600 transition">Post Reply</button>
        <button
            type="button"
            class="px-4 py-2 rounded-md bg-gray-500 text-white hover:bg-gray-600 transition"
            onclick="hideReplyForm(this)"
        >
            Cancel
        </button>
    </div>
</div>

</div>

</div>

                <!-- Answer Card -->
<div class="bg-gray-100 dark:bg-gray-800 shadow-md rounded-lg mb-4 p-6 hover:shadow-lg transition-shadow">
    <div class="flex justify-between items-start">
        <div class="flex items-start space-x-4">
                            <!-- Show Custom Avatar with Initials -->
                                <div class="flex-none w-12 h-12 bg-purple-500 text-white flex justify-center items-center rounded-full border-2 border-gray-300 dark:border-gray-700">
                    B
                </div>
                        <div>
                <p class="text-gray-800 dark:text-gray-100 mb-4">This is comment 2 on post 5 in Programming.</p>
                <div class="flex items-center space-x-4 text-gray-500 dark:text-gray-400 text-sm">
                    <span>Answered by <a href="#" class="text-blue-500 dark:text-blue-300 font-bold">@bob_cloud</a></span>
                    <span>2 days ago</span>
                </div>
            </div>
        </div>
        <div class="flex items-center space-x-2">
            <button class="answerUpvote flex items-center space-x-1 mr-2 text-gray-500 dark:text-gray-400 hover:text-blue-500 dark:hover:text-blue-300 transition">
                <i class="fas fa-arrow-up"></i>
                <span class="answerUpvoteCount"></span>
            </button>
            <button class="answerDownvote flex items-center space-x-1 text-gray-500 dark:text-gray-400 hover:text-blue-500 dark:hover:text-blue-300 transition">
                <i class="fas fa-arrow-down"></i>
                <span class="answerDownvoteCount"></span>
            </button>
        </div>
    </div>

    <div class="mt-4 pl-6 border-l-2 border-gray-300 dark:border-gray-700">
        
    <!-- Reply Button -->
<button
    class="flex items-center space-x-2 text-sm px-4 py-2 rounded-md bg-gray-200 hover:bg-gray-300 dark:bg-gray-700 dark:hover:bg-gray-600 text-gray-700 dark:text-gray-200 transition"
    onclick="toggleReplyForm(this)"
>
    <i class="fas fa-reply"></i>
    <span>Reply</span>
</button>

<!-- Add Reply Form (Hidden by Default) -->
<div id="replyForm" class="replyForm hidden mt-4 bg-white dark:bg-gray-700 p-4 rounded-lg shadow-md">
    <textarea
        class="w-full p-3 rounded-lg border border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:text-white focus:outline-none focus:ring focus:ring-blue-400 transition"
        rows="3"
        placeholder="Write your reply here..."
    ></textarea>
    <div class="flex items-center justify-between mt-4">
        <button class="px-4 py-2 rounded-md bg-blue-500 text-white hover:bg-blue-600 transition">Post Reply</button>
        <button
            type="button"
            class="px-4 py-2 rounded-md bg-gray-500 text-white hover:bg-gray-600 transition"
            onclick="hideReplyForm(this)"
        >
            Cancel
        </button>
    </div>
</div>

</div>

</div>

                <!-- Answer Card -->
<div class="bg-gray-100 dark:bg-gray-800 shadow-md rounded-lg mb-4 p-6 hover:shadow-lg transition-shadow">
    <div class="flex justify-between items-start">
        <div class="flex items-start space-x-4">
                            <!-- Show Profile Picture -->
                <img src="https://lh3.googleusercontent.com/a/ACg8ocIeGs2I8OpWHf6EObNuhNF3wMi_tvDs8kdyponlcOSaI5HrbO61=s96-c" alt="User Avatar" class="w-12 h-12 rounded-full border-2 border-gray-300 dark:border-gray-700">
                        <div>
                <p class="text-gray-800 dark:text-gray-100 mb-4">This is comment 3 on post 5 in Programming.</p>
                <div class="flex items-center space-x-4 text-gray-500 dark:text-gray-400 text-sm">
                    <span>Answered by <a href="#" class="text-blue-500 dark:text-blue-300 font-bold">@user_2</a></span>
                    <span>2 days ago</span>
                </div>
            </div>
        </div>
        <div class="flex items-center space-x-2">
            <button class="answerUpvote flex items-center space-x-1 mr-2 text-gray-500 dark:text-gray-400 hover:text-blue-500 dark:hover:text-blue-300 transition">
                <i class="fas fa-arrow-up"></i>
                <span class="answerUpvoteCount"></span>
            </button>
            <button class="answerDownvote flex items-center space-x-1 text-gray-500 dark:text-gray-400 hover:text-blue-500 dark:hover:text-blue-300 transition">
                <i class="fas fa-arrow-down"></i>
                <span class="answerDownvoteCount"></span>
            </button>
        </div>
    </div>

    <div class="mt-4 pl-6 border-l-2 border-gray-300 dark:border-gray-700">
        
    <!-- Reply Button -->
<button
    class="flex items-center space-x-2 text-sm px-4 py-2 rounded-md bg-gray-200 hover:bg-gray-300 dark:bg-gray-700 dark:hover:bg-gray-600 text-gray-700 dark:text-gray-200 transition"
    onclick="toggleReplyForm(this)"
>
    <i class="fas fa-reply"></i>
    <span>Reply</span>
</button>

<!-- Add Reply Form (Hidden by Default) -->
<div id="replyForm" class="replyForm hidden mt-4 bg-white dark:bg-gray-700 p-4 rounded-lg shadow-md">
    <textarea
        class="w-full p-3 rounded-lg border border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:text-white focus:outline-none focus:ring focus:ring-blue-400 transition"
        rows="3"
        placeholder="Write your reply here..."
    ></textarea>
    <div class="flex items-center justify-between mt-4">
        <button class="px-4 py-2 rounded-md bg-blue-500 text-white hover:bg-blue-600 transition">Post Reply</button>
        <button
            type="button"
            class="px-4 py-2 rounded-md bg-gray-500 text-white hover:bg-gray-600 transition"
            onclick="hideReplyForm(this)"
        >
            Cancel
        </button>
    </div>
</div>

</div>

</div>

               <!-- Reply -->
<form id="replyForm" aria-label="Add Answer Form">
  <h3 class="text-2xl font-semibold text-gray-800 dark:text-gray-100 mb-4">Reply</h3>
  <textarea
    id="replyContent"
    name="reply"
    class="w-full p-3 border border-gray-300 rounded-md dark:bg-gray-700 dark:border-gray-600 dark:text-white focus:outline-none focus:ring focus:ring-blue-300"
    rows="4"
    placeholder="Write your reply..."
    maxlength="500"
    required
  ></textarea>
  <div class="flex items-center space-x-2 mt-4">
    <button
      type="submit"
      class="px-6 py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600 dark:bg-blue-700 dark:hover:bg-blue-600"
    >
      Post Answer
    </button>
    <button
      type="reset"
      class="px-6 py-2 bg-gray-500 text-white rounded-md hover:bg-gray-600 dark:bg-gray-600 dark:hover:bg-gray-500"
    >
      Cancel
    </button>
  </div>
</form>

    </div>
</div>

<script>
    document.addEventListener('DOMContentLoaded', () => {
        const questionUpvoteButton = document.getElementById('questionUpvote');
        const questionUpvoteCount = document.getElementById('questionUpvoteCount');

        questionUpvoteButton.addEventListener('click', () => {
            const isUpvoted = questionUpvoteButton.classList.toggle('text-blue-500');
            questionUpvoteButton.querySelector('i').classList.toggle('fas');
            questionUpvoteButton.querySelector('i').classList.toggle('far');
            questionUpvoteCount.textContent = parseInt(questionUpvoteCount.textContent) + (isUpvoted ? 1 : -1);
        });

        document.querySelectorAll('.answerUpvote').forEach(button => {
            button.addEventListener('click', () => {
                const countSpan = button.querySelector('.answerUpvoteCount');
                const isUpvoted = button.classList.toggle('text-blue-500');
                button.querySelector('i').classList.toggle('fas');
                button.querySelector('i').classList.toggle('far');
                countSpan.textContent = parseInt(countSpan.textContent) + (isUpvoted ? 1 : -1);
            });
        });
    });

    $(document).ready(function () {
  $('#replyForm').on('submit', function (e) {
    e.preventDefault(); // Prevent default form submission

    const replyContent = $('#replyContent').val().trim();
    //const discussionId = $('#discussionId').val(); // Assuming you have a hidden input for discussion ID

    if (!replyContent) {
      Swal.fire({
        icon: 'warning',
        title: 'Empty Reply',
        text: 'Please write something before submitting.',
      });
      return;
    }

    $.ajax({
      url: '/community/discussion/reply',
      method: 'POST',
      headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content'), // Laravel CSRF token
      },
      data: {
        body: replyContent,
        post_id: 5,
      },
      beforeSend: function () {
        console.log('Submitting reply...');
      },
      success: function (response) {
        Swal.fire({
          icon: 'success',
          title: 'Reply Posted!',
          text: 'Your reply has been successfully added.',
          confirmButtonColor: '#3085d6',
        //   background: document.documentElement.classList.contains('dark') ? '#1f2937' : '#fff',
        //   color: document.documentElement.classList.contains('dark') ? '#fff' : '#000'
        }).then(() => {
          // Optional: Reload the page or append the new reply dynamically
          location.reload();
        });
      },
      error: function (xhr, status, error) {
        console.error('Error:', xhr, status, error);
        Swal.fire({
          icon: 'error',
          title: 'Error',
          text: xhr.responseJSON?.message || 'An error occurred. Please try again.',
        //   background: document.documentElement.classList.contains('dark') ? '#1f2937' : '#fff',
        //   color: document.documentElement.classList.contains('dark') ? '#fff' : '#000'
        });
      },
    });
  });
});

</script>



    <!-- Add Discussion -->
    <a href="http://localhost:8000/community/discussion/add"
        class="fixed bottom-12 right-8 bg-blue-500 text-white p-3 rounded-full shadow hover:bg-blue-600 z-50">
        <i class="fas fa-comments"></i> <i class="fas fa-plus text-xs"></i>
    </a>
<style>

</style>
<script>
    function toggleDropdown(button) {
        const dropdownMenu = button.nextElementSibling;
        dropdownMenu.classList.toggle('hidden');
    }

    // Close dropdown when clicking outside
    document.addEventListener('click', (event) => {
        const dropdowns = document.querySelectorAll('.relative .absolute');
        dropdowns.forEach((dropdown) => {
            if (!dropdown.contains(event.target) && !dropdown.previousElementSibling.contains(event.target)) {
                dropdown.classList.add('hidden');
            }
        });
    });

//     function toggleReplyForm(button) {
//     const replyForm = button.nextElementSibling;
//     replyForm.classList.toggle('hidden');
//     if (!replyForm.classList.contains('hidden')) {
//         replyForm.classList.add('fade-in');
//         setTimeout(() => replyForm.classList.remove('fade-in'), 300); // Removes animation class after it plays
//     }
// }

// const replyForm = document.getElementById('replyForm');

//     // Hide dropdown if clicked outside
//     function hideReplyForm() {
//         replyForm.classList.toggle('hidden');
//     if (!replyForm.classList.contains('hidden')) {
//         replyForm.classList.add('fade-in');
//         setTimeout(() => replyForm.classList.remove('fade-in'), 300); // Removes animation class after it plays
//     }
//         };
</script>

<script>
function toggleReplyForm(button) {
    const replyForm = button.nextElementSibling;
    replyForm.classList.toggle('hidden');
    if (!replyForm.classList.contains('hidden')) {
        replyForm.classList.add('fade-in');
        setTimeout(() => replyForm.classList.remove('fade-in'), 300); // Removes animation class after it plays
    }
}

function hideReplyForm(button) {
    const replyForm = button.closest('.replyForm');
    replyForm.classList.add('hidden');
}
</script>
        </main>

        <!-- Right Column (Sticky Sidebar) -->
        <aside class="w-full md:w-80 flex-shrink-0">
            <div class="sticky top-20">
            <div class="bg-white dark:bg-gray-800 shadow-md rounded-lg p-6">
    <h2 class="text-xl font-semibold mb-4">Contact Information</h2>
    <p>
        Email: <a href="mailto:info@yourapp.com" class="text-blue-500 dark:text-blue-300">info@yourapp.com</a>
    </p>
    <p>Phone: +1234567890</p>
</div>
            </div>
        </aside>
    </div>

        
    <!-- Footer -->
      <!-- <footer class="bg-white text-gray-900 dark:bg-gray-800 dark:text-gray-100 py-6">
      <div class="max-w-7xl mx-auto px-6 sm:px-8">
        <div class="flex justify-between items-center">
          <p class="text-sm">&copy; 2025 My App. All rights reserved.</p>
          <div class="flex space-x-6">
            <a href="#" class="text-gray-600 hover:text-blue-500 dark:text-gray-400 dark:hover:text-white">
              <i class="fab fa-facebook-f"></i> 
            </a>
            <a href="#" class="text-gray-600 hover:text-blue-500 dark:text-gray-400 dark:hover:text-white">
              <i class="fab fa-twitter"></i> 
            </a>
            <a href="#" class="text-gray-600 hover:text-blue-500 dark:text-gray-400 dark:hover:text-white">
              <i class="fab fa-linkedin-in"></i> 
            </a>
            <a href="#" class="text-gray-600 hover:text-blue-500 dark:text-gray-400 dark:hover:text-white">
              <i class="fab fa-instagram"></i> 
            </a>
          </div>
        </div>
      </div>
    </footer> -->
    <section class="bg-gradient-to-r from-blue-500 to-blue-700 text-white py-16 relative">
    <div class="container mx-auto px-4 sm:px-6 lg:px-8 text-center">
        <h2 class="text-4xl font-bold mb-4 flex justify-center items-center">
            <span class="mr-2">Stay Updated</span>
            <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                <path stroke-linecap="round" stroke-linejoin="round" d="M3 10l9-9m0 0l9 9m-9-9v18" />
            </svg>
        </h2>
        <p class="text-lg mb-8">Subscribe to our newsletter for the latest updates, insights, and more!</p>
        <form action="#" method="POST" class="max-w-2xl mx-auto flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4">
            <input 
                type="email" 
                class="px-5 py-3 w-full text-gray-900 rounded-lg shadow focus:ring-2 focus:ring-blue-300 focus:outline-none" 
                placeholder="Enter your email address" 
                required
            />
            <button 
                type="submit" 
                class="bg-white text-blue-600 px-6 py-3 rounded-lg font-semibold shadow hover:bg-gray-100 focus:ring-2 focus:ring-white focus:outline-none flex items-center justify-center transition-transform transform hover:scale-105"
            >
                Subscribe
            </button>
        </form>
        <div class="flex justify-center mt-6 space-x-4">
            <a href="#" class="text-white hover:text-gray-300 transition">
                <i class="fab fa-facebook-f text-xl"></i>
            </a>
            <a href="#" class="text-white hover:text-gray-300 transition">
                <i class="fab fa-twitter text-xl"></i>
            </a>
            <a href="#" class="text-white hover:text-gray-300 transition">
                <i class="fab fa-linkedin-in text-xl"></i>
            </a>
        </div>
    </div>
</section>
<footer class="w-full bg-gray-100 dark:bg-gray-900">
    <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
        <!-- Grid Section -->
        <div class="grid grid-cols-2 lg:grid-cols-4 lg:gap-8 gap-12 pt-14 pb-20 max-w-md mx-auto md:max-w-xl lg:max-w-full">
            <!-- Pagedone Links -->
            <div class="block">
                <h4 class="text-xl text-gray-900 dark:text-white font-bold mb-7">Tecxera</h4>
                <ul class="text-lg transition-all duration-500">
                    <li class="mb-6"><a href="#" class="text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white">Home</a></li>
                    <li class="mb-6"><a href="#" class="text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white">About</a></li>
                    <li class="mb-6"><a href="#" class="text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white">Privacy Policy</a></li>
                    <li class="mb-6"><a href="#" class="text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white">Cookie Policy</a></li>
                    <li><a href="#" class="text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white">Term of Use</a></li>
                </ul>
            </div>
            <!-- Products Links -->
            <div class="block">
                <h4 class="text-xl text-gray-900 dark:text-white font-bold mb-7">Assessments</h4>
                <ul class="text-lg transition-all duration-500">
                    <li class="mb-6"><a href="#" class="text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white">AI & Machine Learning</a></li>
                    <li class="mb-6"><a href="#" class="text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white">DevOps</a></li>
                    <li class="mb-6"><a href="#" class="text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white">Cloud Computing</a></li>
                    <li class="mb-6"><a href="#" class="text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white">Cybersecutity</a></li>
                    <li><a href="#" class="text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white">Machine Learning</a></li>
                </ul>
            </div>
            <!-- Resources Links -->
            <div class="block">
                <h4 class="text-xl text-gray-900 dark:text-white font-bold mb-7">Tecpulse</h4>
                <ul class="text-lg transition-all duration-500">
                    <li class="mb-6"><a href="#" class="text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white">Articles</a></li>
                    <li class="mb-6"><a href="#" class="text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white">Categories</a></li>
                    <li class="mb-6"><a href="#" class="text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white">Latest Posts</a></li>
                    <li class="mb-6"><a href="#" class="text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white">Trending</a></li>
                    <li><a href="#" class="text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white">Feautured</a></li>
                </ul>
            </div>
            <!-- Support Links -->
            <div class="block">
                <h4 class="text-xl text-gray-900 dark:text-white font-bold mb-7">Community</h4>
                <ul class="text-lg transition-all duration-500">
                    <li class="mb-6"><a href="#" class="text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white">Join</a></li>
                    <li class="mb-6"><a href="#" class="text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white">Topics</a></li>
                    <li class="mb-6"><a href="#" class="text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white">Posts</a></li>
                    <li class="mb-6"><a href="#" class="text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white">Trends</a></li>
                    <li><a href="#" class="text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white">FAQs</a></li>
                </ul>
            </div>
        </div>
        <!-- Footer Bottom Section -->
        <div class="py-7 border-t border-gray-300 dark:border-gray-700">
            <div class="flex items-center justify-center flex-col lg:flex-row lg:justify-between space-y-8 lg:space-y-0">
                <!-- Branding or Logo -->
                <a href="https://pagedone.io/" class="flex justify-center">
                    <!-- <img src="/images/logo.png" alt="Pagedone Logo" class="w-40"> -->
                    <img src="http://localhost:8000/images/logo.png" alt="Tecxera Logo" class="w-40 h-8 dark:hidden">
                    <img src="http://localhost:8000/images/logo-dark.png" alt="Tecxera Logo Dark" class="w-40 h-8 hidden dark:flex">
                </a>
                <!-- Footer Text -->
                <p class="text-gray-600 dark:text-gray-400 text-sm text-center">
                    © 2025 Pagedone. All rights reserved.
                </p>
            </div>
        </div>
    </div>
</footer>
    </div>
<script>
    // Sidebar Toggle Logic
    const openSidebar = document.getElementById('openSidebar');
    const closeSidebar = document.getElementById('closeSidebar');
    const sidebar = document.getElementById('sidebar');
    const overlay = document.getElementById('overlay');

    openSidebar.addEventListener('click', () => {
        sidebar.classList.remove('-translate-x-full', 'hidden'); // Show sidebar
        overlay.classList.remove('hidden'); // Show overlay
    });

    closeSidebar.addEventListener('click', () => {
        sidebar.classList.add('-translate-x-full', 'hidden'); // Hide sidebar
        overlay.classList.add('hidden'); // Hide overlay
    });

    overlay.addEventListener('click', () => {
        sidebar.classList.add('-translate-x-full', 'hidden'); // Hide sidebar
        overlay.classList.add('hidden'); // Hide overlay
    });

           // Function to set the theme based on user preference
           const setTheme = (theme) => {
        document.documentElement.classList.remove('dark', 'light');
        document.documentElement.classList.add(theme);
        localStorage.setItem('theme', theme);  // Store theme preference in localStorage
    };

    // Load the user's theme preference from localStorage
    let currentTheme = localStorage.getItem('theme') || (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light');
    setTheme(currentTheme);

    // Dark Mode Toggle Logic
    const darkModeToggle = document.getElementById('toggleDarkMode');
    if (darkModeToggle) {
        darkModeToggle.addEventListener('click', () => {
            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
            setTheme(newTheme);
            currentTheme = newTheme;  // Update the current theme after toggle
            document.dispatchEvent(new CustomEvent('themeChanged', { detail: { theme: newTheme } }));
        });
    }
</script>
</body>
</html>
