@extends('layouts.app')

@section('content')
<!-- Banner -->
<section class="page-banner" style="background-image: url('images/hero_flooring.png');">
  <div class="container page-banner-content">
    <h1>Articles & Building Advice</h1>
    <p>Read about interior design tips, installation step-guides, and material sciences authored by our technical engineers.</p>
  </div>
</section>

<!-- Blog -->
<section class="section-padding container">
  <div class="blog-filter-tabs">
    <button class="blog-filter-btn active" data-filter="all">All Articles</button>
    <button class="blog-filter-btn" data-filter="guide">Buying Guides</button>
    <button class="blog-filter-btn" data-filter="tech">Material Science</button>
    <button class="blog-filter-btn" data-filter="design">Interior Design</button>
  </div>

  <div class="grid-3">
    @foreach($posts as $post)
    <div class="card card-hover blog-card" data-category="{{ $post->category }}" data-slug="{{ $post->slug }}" style="cursor:pointer;">
      <div class="blog-img-wrapper">
        <img src="{{ $post->image ? (Str::startsWith($post->image, 'blog/') ? asset('storage/' . $post->image) : asset($post->image)) : asset('images/hero_ceiling.png') }}" alt="{{ $post->title }}" class="blog-card-img" />
        <span class="blog-cat-badge">@php
          $catLabels = ['guide' => 'Buying Guides', 'tech' => 'Material Science', 'design' => 'Interior Design'];
        @endphp
        {{ $catLabels[$post->category] ?? $post->category }}</span>
      </div>
      <div class="blog-card-content">
        <div class="blog-meta-row">
          <span class="blog-meta-item"><svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="18" height="18" rx="2" y="4" x="3"/><line x1="16" x2="16" y1="2" y2="6"/><line x1="8" x2="8" y1="2" y2="6"/><line x1="3" x2="21" y1="10" y2="10"/></svg> {{ $post->published_at?->format('M d, Y') ?? 'Draft' }}</span>
          <span class="blog-meta-item"><svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg> {{ $post->read_time ?? '5 min read' }}</span>
        </div>
        <h3>{{ $post->title }}</h3>
        <p>{{ $post->excerpt }}</p>
        <span class="btn-read-more">Read Article <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2Z"/><path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7Z"/></svg></span>
      </div>
    </div>
    @endforeach
  </div>
</section>

<!-- Blog Modal -->
<div class="blog-modal-backdrop" id="blogModalBackdrop">
  <div class="blog-modal">
    <button class="blog-modal-close" id="blogModalClose">
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" x2="6" y1="6" y2="18"/><line x1="6" x2="18" y1="6" y2="18"/></svg>
    </button>
    <div class="blog-modal-loading" id="blogModalLoading">
      <div class="blog-modal-spinner"></div>
      <p>Loading article...</p>
    </div>
    <div class="blog-modal-content" id="blogModalContent" style="display:none;">
      <div class="blog-modal-hero" id="blogModalHero"></div>
      <div class="blog-modal-body">
        <div class="blog-modal-meta" id="blogModalMeta"></div>
        <h1 class="blog-modal-title" id="blogModalTitle"></h1>
        <div class="blog-modal-article" id="blogModalArticle"></div>
        <div class="blog-modal-footer">
          <div class="blog-modal-share">
            <span>Share:</span>
            <a href="#" id="blogShareFacebook" target="_blank" class="blog-share-btn" title="Facebook">
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"/></svg>
            </a>
            <a href="#" id="blogShareTwitter" target="_blank" class="blog-share-btn" title="Twitter">
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 4s-.7 2.1-2 3.4c1.6 10-9.4 17.3-18 11.6 2.2.1 4.4-.6 6-2C3 15.5.5 9.6 3 5c2.2 2.6 5.6 4.1 9 4-.9-4.2 4-6.6 7-3.8 1.1 0 3-1.2 3-1.2z"/></svg>
            </a>
            <button class="blog-share-btn" id="blogShareCopy" title="Copy Link">
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/></svg>
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<style>
.blog-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.7);
  backdrop-filter: blur(8px);
  z-index: 9998;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  animation: fadeIn .3s ease;
}
.blog-modal-backdrop.active {
  display: flex;
}
.blog-modal {
  background: var(--bg-card);
  border-radius: 20px;
  max-width: 900px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  position: relative;
  animation: slideUp .4s ease;
  box-shadow: 0 20px 60px rgba(0,0,0,.3);
}
.blog-modal-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255,255,255,.9);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  transition: .2s;
  box-shadow: 0 2px 8px rgba(0,0,0,.15);
}
.blog-modal-close:hover {
  background: #fff;
  transform: scale(1.1);
}
.blog-modal-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 4rem 2rem;
  color: var(--text-muted);
}
.blog-modal-spinner {
  width: 40px;
  height: 40px;
  border: 3px solid var(--border-color);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-bottom: 1rem;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}
.blog-modal-hero {
  width: 100%;
  height: 300px;
  background-size: cover;
  background-position: center;
  border-radius: 20px 20px 0 0;
}
.blog-modal-body {
  padding: 2rem 2.5rem 2.5rem;
}
.blog-modal-meta {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
  font-size: .85rem;
  color: var(--text-muted);
}
.blog-modal-meta .blog-meta-item {
  display: flex;
  align-items: center;
  gap: .3rem;
}
.blog-modal-title {
  font-size: 1.8rem;
  font-weight: 800;
  line-height: 1.3;
  color: var(--text-dark);
  margin-bottom: 1.5rem;
  letter-spacing: -.02em;
}
.blog-modal-article {
  font-size: 1.05rem;
  line-height: 1.8;
  color: var(--text-body);
}
.blog-modal-article h2 {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text-dark);
  margin: 2rem 0 1rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border-color);
}
.blog-modal-article h3 {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--text-dark);
  margin: 1.5rem 0 .8rem;
}
.blog-modal-article p {
  margin-bottom: 1.2rem;
}
.blog-modal-article strong {
  color: var(--primary);
  font-weight: 600;
}
.blog-modal-article ul, .blog-modal-article ol {
  margin: 1rem 0 1.5rem 1.5rem;
}
.blog-modal-article li {
  margin-bottom: .5rem;
}
.blog-modal-article blockquote {
  border-left: 4px solid var(--primary);
  background: var(--bg-main);
  padding: 1rem 1.5rem;
  margin: 1.5rem 0;
  border-radius: 0 12px 12px 0;
  font-style: italic;
  color: var(--text-muted);
}
.blog-modal-article img {
  max-width: 100%;
  border-radius: 12px;
  margin: 1.5rem 0;
}
.blog-modal-article a {
  color: var(--primary);
  text-decoration: underline;
}
.blog-modal-article pre {
  background: #1e293b;
  color: #e2e8f0;
  padding: 1rem 1.5rem;
  border-radius: 12px;
  overflow-x: auto;
  font-size: .9rem;
  margin: 1.5rem 0;
}
.blog-modal-footer {
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border-color);
}
.blog-modal-share {
  display: flex;
  align-items: center;
  gap: .6rem;
}
.blog-modal-share span {
  font-weight: 600;
  color: var(--text-dark);
  font-size: .9rem;
  margin-right: .3rem;
}
.blog-share-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--border-color);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  transition: .2s;
  background: var(--bg-card);
  cursor: pointer;
  text-decoration: none;
}
.blog-share-btn:hover {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
  transform: translateY(-2px);
}
.blog-share-btn.copied {
  background: #22c55e;
  color: #fff;
  border-color: #22c55e;
}

@media (max-width: 768px) {
  .blog-modal {
    max-height: 95vh;
    border-radius: 16px;
  }
  .blog-modal-hero {
    height: 200px;
    border-radius: 16px 16px 0 0;
  }
  .blog-modal-body {
    padding: 1.5rem;
  }
  .blog-modal-title {
    font-size: 1.4rem;
  }
}
</style>
@endsection

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
  const filters = document.querySelectorAll('.blog-filter-btn');
  const cards = document.querySelectorAll('.blog-card');
  const modalBackdrop = document.getElementById('blogModalBackdrop');
  const modalClose = document.getElementById('blogModalClose');
  const modalLoading = document.getElementById('blogModalLoading');
  const modalContent = document.getElementById('blogModalContent');
  const modalHero = document.getElementById('blogModalHero');
  const modalMeta = document.getElementById('blogModalMeta');
  const modalTitle = document.getElementById('blogModalTitle');
  const modalArticle = document.getElementById('blogModalArticle');
  const shareFacebook = document.getElementById('blogShareFacebook');
  const shareTwitter = document.getElementById('blogShareTwitter');
  const shareCopy = document.getElementById('blogShareCopy');

  // Filter functionality
  filters.forEach((btn) => {
    btn.addEventListener('click', () => {
      filters.forEach(f => f.classList.remove('active'));
      btn.classList.add('active');
      const category = btn.getAttribute('data-filter');
      cards.forEach((card) => {
        card.style.display = (category === 'all' || card.getAttribute('data-category') === category) ? '' : 'none';
      });
    });
  });

  // Open modal on card click
  cards.forEach(card => {
    card.addEventListener('click', function() {
      const slug = this.dataset.slug;
      openBlogModal(slug);
    });
  });

  // Close modal
  modalClose.addEventListener('click', closeBlogModal);
  modalBackdrop.addEventListener('click', function(e) {
    if (e.target === modalBackdrop) closeBlogModal();
  });
  document.addEventListener('keydown', function(e) {
    if (e.key === 'Escape' && modalBackdrop.classList.contains('active')) {
      closeBlogModal();
    }
  });

  function openBlogModal(slug) {
    modalBackdrop.classList.add('active');
    document.body.style.overflow = 'hidden';
    modalLoading.style.display = 'flex';
    modalContent.style.display = 'none';

    fetch('/blog/' + slug + '/content')
      .then(response => response.json())
      .then(data => {
        if (data.success) {
          const post = data.post;
          const baseUrl = '{{ url("/") }}';
          let imgUrl;
          if (post.image) {
            if (post.image.startsWith('blog/')) {
              imgUrl = baseUrl + '/storage/' + post.image;
            } else if (post.image.startsWith('http')) {
              imgUrl = post.image;
            } else {
              imgUrl = baseUrl + '/' + post.image;
            }
          } else {
            imgUrl = baseUrl + '/images/hero_ceiling.png';
          }
          
          modalHero.style.backgroundImage = 'url(' + imgUrl + ')';
          modalMeta.innerHTML = '<span class="blog-meta-item"><svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect width="18" height="18" rx="2" y="4" x="3"/><line x1="16" x2="16" y1="2" y2="6"/><line x1="8" x2="8" y1="2" y2="6"/><line x1="3" x2="21" y1="10" y2="10"/></svg> ' + (post.published_at || 'Draft') + '</span><span class="blog-meta-item"><svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg> ' + (post.read_time || '5 min read') + '</span>';
          modalTitle.textContent = post.title;
          modalArticle.innerHTML = post.content;

          const postUrl = window.location.origin + '/blog/' + slug;
          shareFacebook.href = 'https://www.facebook.com/sharer/sharer.php?u=' + encodeURIComponent(postUrl);
          shareTwitter.href = 'https://twitter.com/intent/tweet?url=' + encodeURIComponent(postUrl) + '&text=' + encodeURIComponent(post.title);
          shareCopy.onclick = function() {
            navigator.clipboard.writeText(postUrl).then(function() {
              shareCopy.classList.add('copied');
              setTimeout(function() { shareCopy.classList.remove('copied'); }, 2000);
            });
          };

          modalLoading.style.display = 'none';
          modalContent.style.display = 'block';
          modalContent.scrollTop = 0;
        } else {
          alert('Failed to load article');
          closeBlogModal();
        }
      })
      .catch(error => {
        console.error('Error:', error);
        alert('Failed to load article');
        closeBlogModal();
      });
  }

  function closeBlogModal() {
    modalBackdrop.classList.remove('active');
    document.body.style.overflow = '';
  }
});
</script>
@endpush