@include('header')
<style >.toast-success {
    background-color: #1dbf73!important; /* your desired green */
    color: #fff;
}</style>
 <!-- ======= srart Breadcrumbs ======= -->
  <section class="breadcrumbs py-4" data-aos="fade-up" data-aos-delay="100">
    <div class="container">
      <ol>
        <li><a href="{{ url('/') }}">Home</a></li>
        <li><a href="blog.html">Blog</a></li>
        <li>single blog</li>
      </ol>
      <h2 class="title">single blog page</h2>
      <p class="col-lg-10 col-12">
        As a matter of fact the unification of the coherent software provides a strict control over
        The Accomplishment of Intended Estimation
      </p>
    </div>
  </section>
  <!-- End Breadcrumbs -->


  <!-- ======= Blog Single Section ======= -->
  <section id="blog" class="blog mt-5">
    <div class="container">
      <div class="row">
        <div class="col-lg-8 entries" data-aos="fade-right" data-aos-delay="150">
          <article class="entry entry-single">
            <div class="entry-img">
              <img src="{{ asset('blogs/' . $post->image) }}" alt="post-image" class="img-fluid">
            </div>
            <h2 class="entry-title">
              <a href="blog-single.html"> {{ $post->title }}</a>
            </h2>
            <div class="entry-meta">
              <ul>
                <li class="d-flex align-items-center"><i class="bi bi-person"></i> <a href="blog-single.html">{{ $post->author }}</a></li>
                <li class="d-flex align-items-center"><i class="bi bi-clock"></i> <a href="blog-single.html"><time
                      datetime="2024-01-01">Posted on: {{ $post->created_at->format('M j, Y') }} </time></a></li>
                <li class="d-flex align-items-center"><a href="#comments-section"><i class="bi bi-chat-dots"></i> {{ $totalComments }}</a></li>
              </ul>
            </div>
            <div class="entry-content">
            {!! $post->content !!}
            </div>
            <div class="entry-footer">
              <i class="bi bi-folder"></i>
              <ul class="cats">
                <li>{{ $post->category->name }}</li>
              </ul>
              <i class="bi bi-tags"></i>
              <ul class="tags">
     @foreach(array_filter(explode(',', $post->tags), fn($tag) => trim($tag) !== '') as $tag)
  <li><a href="{{ route('posts', trim($tag)) }}">{{ trim($tag) }}</a></li>
@endforeach

              </ul>
            </div>
          </article><!-- End blog entry -->

     <!--      <div class="blog-author d-flex align-items-center">
            <img src="images/team/team-1.jpg" class="rounded-circle float-left" alt="author-img">
            <div>
              <h4>Jane Smith</h4>
              <div class="social-links">
                <a href="#"><i class="bi bi-twitter-x"></i></a>
                <a href="#"><i class="bi bi-facebook"></i></a>
                <a href="#"><i class="biu bi-instagram"></i></a>
              </div>
              <p>
                Itaque eum sed possimus accusantium. Quas repellat voluptatem officia numquam sint aspernatur voluptas.
                Esse et accusantium ut unde voluptas.
              </p>
            </div>
          </div> --><!-- End blog author bio -->
          <div class="blog-comments" id="comments-section">

            <h4 class="comments-count">{{ $totalComments }} Comments</h4>
    @foreach($post->comments as $comment)
  <div id="comment-{{ $comment->id }}" class="comment mb-4">
    <div class="d-flex">
      <div class="comment-img">
        <i class="bi bi-person-circle" style="font-size: 40px; color: #1dbf73;"></i>
      </div>
      <div>
        <h5>
          <a href="#">{{ $comment->name }}</a> 
          <a href="javascript:void(0);" class="reply-btn" data-id="{{ $comment->id }}">
            <i class="bi bi-reply-fill"></i> Reply
          </a>
        </h5>
        <time datetime="{{ $comment->created_at }}">{{ $comment->created_at->format('M j, Y') }}</time>
        <p>{{ $comment->comment }}</p>

        <!-- Reply Form (Hidden by default) -->
        <div class=" " >
          <form method="POST" action="{{ route('comment', $post->id) }}" id="reply-form-{{ $comment->id }}" class="reply-forms p-3 border rounded"  style="display:none; margin-top:15px; background: #f9f9f9;">

            @csrf

            <input type="hidden" name="parent_id" value="{{ $comment->id }}">
            <div class="mb-2">
              <input type="text" name="name" class="form-control" placeholder="Your Name" required>
            </div>
            <div class="mb-2">
              <input type="email" name="email" class="form-control" placeholder="Your Email" required>
            </div>
            <div class="mb-2">
              <textarea name="comment" class="form-control" rows="3" placeholder="Your Reply" required></textarea>
            </div>
            <button type="submit" class="text-white" style="background: #1dbf73; padding: 5px; border: none; border-radius: 2px; ">Post Reply</button>
          </form>
        </div>

        <!-- Toggle Replies -->
        @if($comment->replies->count() > 0)
          <a href="javascript:void(0);" class="toggle-replies text-primary d-block mt-2" data-id="{{ $comment->id }}">
            View Replies ({{ $comment->replies->count() }})
          </a>
        @endif

        <!-- Replies (Hidden by default) -->
        <div class="replies" id="replies-{{ $comment->id }}" style="display:none; margin-left: 30px; margin-top: 10px;">
   @foreach($comment->replies as $reply)
  <div class="reply mb-3 d-flex">
    <div class="me-2">
      <i class="bi bi-person-circle" style="font-size: 30px; color: #1dbf73;"></i>
    </div>
    <div>
      <h6>{{ $reply->name }}</h6>
        <time datetime="{{ $reply->created_at }}">{{ $reply->created_at->format('M j, Y') }}</time>
      <p class="mb-0">{{ $reply->comment }}</p>
    </div>
  </div>
@endforeach

        </div>



      </div>
    </div>
  </div>
@endforeach

 

  

            <div class="reply-form"  id="comments-container">
              <h4 class="title-2">Leave a Reply</h4>
              <p>Your email address will not be published. Required fields are marked * </p>
              <form id="contact-form" method="POST">
                @csrf
                    <input type="hidden" name="post_id" value="{{ $post->id }}">

                <div class="row g-3">
                  <div class="col-md-6 form-group">
                    <input name="name" type="text" class="form-control box" placeholder="Your Name*">
                  </div>
                  <div class="col-md-6 form-group">
                    <input name="email" type="text" class="form-control box" placeholder="Your Email*">
                  </div>
                </div>
             
                <div class="row">
                  <div class="col form-group">
                    <textarea name="comment" class="form-control box" placeholder="Your Comment*"></textarea>
                  </div>
                </div>
                    <button type="submit" class="btn btn-success " >Post Comment</button>
              </form>
            </div>

          </div><!-- End blog comments -->

        </div><!-- End blog entries list -->

<script>
document.addEventListener("DOMContentLoaded", function () {
    var form = document.getElementById("contact-form");
    var commentUrl = "{{ route('comment', $post->id) }}";

    form?.addEventListener("submit", function (event) {
        event.preventDefault();

        if (validateForm()) {
            var formData = new FormData(form);

            fetch(commentUrl, {
                method: "POST",
                headers: {
                    'X-CSRF-TOKEN': document.querySelector('input[name="_token"]').value,
                    'X-Requested-With': 'XMLHttpRequest'
                },
                body: formData
            })
            .then(response => response.json())
            .then(result => {
                if (result.success) {
                    showNotification(result.message, "success");
                    
                    // Append new comment to top
                    var commentsContainer = document.getElementById("comments-container");

                    var commentWrapper = document.createElement("div");
                    commentWrapper.classList.add("comment", "mb-3", "d-flex", "align-items-start");

                    commentWrapper.innerHTML = `
                        <div class="me-2">
                            <i class="bi bi-person-circle" style="font-size: 30px; color: #1dbf73;"></i>
                        </div>
                        <div>
                            <h6 class="mb-0">${form.querySelector('input[name="name"]').value}</h6>
                            <small class="text-muted">${new Date().toLocaleDateString("en-GB", { day: 'numeric', month: 'short', year: 'numeric' })}</small>
                            <p class="mb-0 mt-1">${form.querySelector('textarea[name="comment"]').value}</p>
                        </div>
                    `;

                    // Insert new comment at the top
                    commentsContainer.insertBefore(commentWrapper, commentsContainer.firstChild);

                    form?.reset();
                } else {
                    showNotification("Message sending failed", "error");
                }
            })
            .catch(error => {
                console.error("Error:", error);
                showNotification("An error occurred. Please try again", "error");
            });
        }
    });

    function validateForm() {
        // Optional: add your validation logic here
        return true;
    }

    function showNotification(message, type) {
        toastr.options = {
            closeButton: false,
            progressBar: true,
            positionClass: "toast-bottom-right",
            showDuration: 300,
            hideDuration: 1000,
            timeOut: 5000,
            extendedTimeOut: 1000,
        };

        toastr.clear();
        if (type === "success") {
            toastr.success(message);
        } else {
            toastr.error(message);
        }
    }
});

</script>


<script>
  // Toggle reply form
  document.querySelectorAll('.reply-btn').forEach(btn => {
    btn.addEventListener('click', function () {
      const id = this.dataset.id;
      const form = document.getElementById(`reply-form-${id}`);
      form.style.display = (form.style.display === 'none' || form.style.display === '') ? 'block' : 'none';
    });
  });

  // Toggle replies
  document.querySelectorAll('.toggle-replies').forEach(link => {
    link.addEventListener('click', function () {
      const id = this.dataset.id;
      const replies = document.getElementById(`replies-${id}`);
      if (replies.style.display === 'none' || replies.style.display === '') {
        replies.style.display = 'block';
        this.innerText = 'Hide Replies';
      } else {
        replies.style.display = 'none';
        this.innerText = `View Replies (${replies.childElementCount})`;
      }
    });
  });
</script>


<script >document.addEventListener("DOMContentLoaded", function () {
  document.querySelectorAll(".reply-forms").forEach(function (form) {
    form.addEventListener("submit", function (event) {
      event.preventDefault();

      var formData = new FormData(form);
      var commentUrl = form.getAttribute("action");

      fetch(commentUrl, {
        method: "POST",
        headers: {
          'X-CSRF-TOKEN': form.querySelector('input[name="_token"]').value,
          'X-Requested-With': 'XMLHttpRequest'
        },
        body: formData
      })
      .then(response => response.json())
      .then(result => {
        if (result.success) {
          showNotification(result.message, "success");

          // Build new reply element
          var replyWrapper = document.createElement("div");
          replyWrapper.className = "reply mb-3 d-flex";

          var iconDiv = document.createElement("div");
          iconDiv.className = "me-2";
          iconDiv.innerHTML = '<i class="bi bi-person-circle" style="font-size: 30px; color: #1dbf73;"></i>';

          var contentDiv = document.createElement("div");
          var now = new Date();
          var dateString = now.toLocaleDateString("en-US", {
            month: "short",
            day: "numeric",
            year: "numeric"
          });

          contentDiv.innerHTML = `
            <h6>${form.querySelector('input[name="name"]').value}</h6>
            <time>${dateString}</time>
            <p class="mb-0">${form.querySelector('textarea[name="comment"]').value}</p>
          `;

          replyWrapper.appendChild(iconDiv);
          replyWrapper.appendChild(contentDiv);

          // Find corresponding replies container and append
          var parentId = form.querySelector('input[name="parent_id"]').value;
          var repliesContainer = document.getElementById(`replies-${parentId}`);
repliesContainer.insertBefore(replyWrapper, repliesContainer.firstChild);

          // Show replies container if it was hidden
          if (repliesContainer.style.display === "none" || repliesContainer.style.display === "") {
            repliesContainer.style.display = "block";
          }

          // Update 'View Replies' link text with new count
          var toggleLink = document.querySelector(`.toggle-replies[data-id="${parentId}"]`);
          if (toggleLink) {
            let currentCount = repliesContainer.childElementCount;
            toggleLink.innerText = `View Replies (${currentCount})`;
          }

          // Reset and hide form
          form.reset();
          form.style.display = "none";
        } else {
          showNotification("Failed to post reply", "error");
        }
      })
      .catch(error => {
        console.error("Error:", error);
        showNotification("An error occurred. Please try again", "error");
      });
    });
  });

  function showNotification(message, type) {
    toastr.options = {
      closeButton: false,
      progressBar: true,
      positionClass: "toast-bottom-right",
      showDuration: 300,
      hideDuration: 1000,
      timeOut: 5000,
      extendedTimeOut: 1000,
    };

    toastr.clear();
    if (type === "success") {
      toastr.success(message);
    } else {
      toastr.error(message);
    }
  }
});
</script>

        <div class="col-lg-4" data-aos="fade-left" data-aos-delay="150">

          <div class="sidebar">
            <h3 class="sidebar-title">Search</h3>
            <div class="sidebar-item search-form">
              <form action="#">
                <input type="text">
                <button type="submit"><i class="bi bi-search"></i></button>
              </form>
            </div><!-- End sidebar search formn-->

            <h3 class="sidebar-title">Categories</h3>
            <div class="sidebar-item categories">
              <ul>
                <li><a href="#">General <span>(25)</span></a></li>
                <li><a href="#">Lifestyle <span>(12)</span></a></li>
                <li><a href="#">Travel <span>(5)</span></a></li>
                <li><a href="#">Design <span>(22)</span></a></li>
                <li><a href="#">Creative <span>(8)</span></a></li>
                <li><a href="#">Educaion <span>(14)</span></a></li>
              </ul>
            </div><!-- End sidebar categories-->

            <h3 class="sidebar-title">Recent Posts</h3>
            <div class="sidebar-item recent-posts">
              <div class="post-item clearfix">
                <img src="images/blog/post-images/1.jpg" alt="recent-post-img">
                <h4><a href="blog-single.html">Nihil blanditiis at in nihil autem</a></h4>
                <time datetime="2024-01-01">Jan 23, 2024</time>
              </div>

              <div class="post-item clearfix">
                <img src="images/blog/post-images/2.jpg" alt="recent-post-img">
                <h4><a href="blog-single.html">Quidem autem et impedit</a></h4>
                <time datetime="2024-01-01">Jan 1, 2024</time>
              </div>

              <div class="post-item clearfix">
                <img src="images/blog/post-images/3.jpg" alt="recent-post-img">
                <h4><a href="blog-single.html">Id quia et et ut maxime similique occaecati ut</a></h4>
                <time datetime="2024-01-01">Jan 17, 2024</time>
              </div>

              <div class="post-item clearfix">
                <img src="images/blog/post-images/1.jpg" alt="recent-post-img">
                <h4><a href="blog-single.html">Laborum corporis quo dara net para</a></h4>
                <time datetime="2024-01-01">Jan 4, 2024</time>
              </div>

              <div class="post-item clearfix">
                <img src="images/blog/post-images/2.jpg" alt="recent-post-img">
                <h4><a href="blog-single.html">Et dolores corrupti quae illo quod dolor</a></h4>
                <time datetime="2024-01-01">Jan 24, 2024</time>
              </div>

            </div><!-- End sidebar recent posts-->

            <h3 class="sidebar-title">Tags</h3>
            <div class="sidebar-item tags">
              <ul>
               @if($post->tags)
      @foreach(explode(',', $post->tags) as $tag)
        <li><a href="{{ route('posts', trim($tag)) }}">{{ trim($tag) }}</a></li>
      @endforeach
    @endif
              </ul>
            </div><!-- End sidebar tags-->
          </div><!-- End sidebar -->
        </div><!-- End blog sidebar -->
      </div>
    </div>
  </section><!-- End Blog Single Section -->

@include('footer')