@extends('template.layouts.template-base')
@section('title', 'Blog Details')

@section('styles')
<style>
     .page-content{
    background-color:#F0F4F8!important;
    padding: 80px 10px;
  }
</style>
@endsection

@section('content')
 <div class="page-header product-main service-list">
        <div class="container-fluid">
            <div class="row align-items-center">
                <div class="col">
                    <div class="page-title">
                        <a href="{{ route('backend.blog-list.index') }}">Blog / <span class="breadcrumb-link">Blog Detail</span></a>
                    </div>
                </div>
                <div class="col-auto cate-top-btns">
                    <button class="btn-export-category">
                        Export
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"
                            fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                            <path d="M12 16V3"></path>
                            <polyline points="7 8 12 3 17 8"></polyline>
                            <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
                        </svg>
                    </button>
                    <a class="btn-add-category" href="{{ route('backend.blog-list.add') }}">
                        Add Blog<i class="ri-add-fill fs-5"></i>
                    </a>
                </div>
            </div>
        </div>
    </div>

  <div class="container-fluid blog-details-page">
      <div class="row g-4">
        <div class="col-lg-8">
          <div class="blog-content-wrapper">
            <div class="blog-header mb-4">
              <div class="d-flex blog-title justify-content-between align-items-center mb-3">
                <h2 class="blog-overview-title mb-0">Overview</h2>
                <div class="d-flex align-items-center gap-3">
                  <span class="blog-date">
                    {{ $blog->posted_on ? $blog->posted_on->format('M d, Y') : '—' }}
                  </span>
                  <div class="pay-wrap mb-2">
                    <button class="pay-toggle"
                            style="background: {{ $blog->status ? '#009207' : '#dc3545' }}">
                        {{ $blog->status ? 'Active' : 'Inactive' }}
                        <i class="ri-arrow-down-s-fill fs-5"></i>
                    </button>
                    <ul class="pay-menu">
                        <li data-bg="#009207" data-value="1"
                            class="{{ $blog->status ? 'current' : '' }}">Active</li>
                        <li data-bg="#dc3545" data-value="0"
                            class="{{ !$blog->status ? 'current' : '' }}">Inactive</li>
                    </ul>
                  </div>
                </div>
              </div>

              <div class="blog-meta-info mb-4">
                <div class="row g-3">
                  <div class="col-md-4">
                    <label class="blog-meta-label">Blog Title</label>
                    <p class="blog-meta-value">{{ $blog->title_en }}</p>
                  </div>
                  <div class="col-md-4">
                    <label class="blog-meta-label">Category</label>
                    <p class="blog-meta-value">{{ $blog->category->category_name_en ?? '—' }}</p>
                  </div>
                  <div class="col-md-4">
                    <label class="blog-meta-label">Slug</label>
                    <p class="blog-meta-value">{{ $blog->slug }}</p>
                  </div>
                </div>
              </div>
            </div>

            <!-- Description Section -->
            <div class="blog-description-section mb-4">
              <h3 class="blog-section-title">Description</h3>
              <div class="blog-content-block mb-4">
                <div class="blog-content-text">
                  {!! $blog->description_en !!}
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- Right Section - Blog Media & SEO -->
        <div class="col-lg-4">
          <div class="blog-media-wrapper">
            <div class="blog-media-section mb-4">
              <h3 class="sidebar-section-title mb-3">Blog Media</h3>

              <!-- Thumbnail Image -->
              <div class="media-item mb-4">
                <label class="media-label">Thumbnail Image</label>
                <div class="media-thumbnail">
                  @if($blog->thumbnail_image)
                    <img src="{{ asset('storage/' . $blog->thumbnail_image) }}" alt="Thumbnail" class="detail-thumb-img-1" />
                  @else
                    <p class="text-muted small">No thumbnail uploaded.</p>
                  @endif
                </div>
              </div>

              <!-- Blog Video -->
              @if($blog->video_url)
              <div class="media-item mb-4">
                <label class="media-label">Blog Video</label>
                <div class="media-items video-item" onclick="openVideoModal()">
                  <i class="bx bx-play video-play-icon"></i>
                </div>
              </div>
              @endif

              <!-- Gallery Images -->
              @if($blog->galleryImages->count())
              <div class="media-item">
                <label class="media-label">Blog Detail Image</label>
                <div class="media-detail-images">
                  <div class="row g-4">
                    @foreach($blog->galleryImages as $galleryImg)
                    <div class="col-4">
                      <img src="{{ asset('storage/' . $galleryImg->image_path) }}"
                           alt="Gallery Image"
                           class="detail-thumb-img" />
                    </div>
                    @endforeach
                  </div>
                </div>
              </div>
              @endif
            </div>

            <!-- SEO Details Section -->
            <div class="seo-details-section">
              <h3 class="sidebar-section-title mb-3">SEO Details</h3>

              <div class="seo-item mb-4">
                <label class="seo-label">Meta Title</label>
                <p class="seo-value">{{ $blog->meta_title ?? '—' }}</p>
              </div>

              @if($blog->meta_keywords)
              <div class="seo-item mb-4">
                <div class="serv-prod-list">
                  <label class="seo-label">Key Words</label>
                  <ul>
                    @foreach(array_map('trim', explode(',', $blog->meta_keywords)) as $keyword)
                      @if($keyword)
                        <li>{{ $keyword }}</li>
                      @endif
                    @endforeach
                  </ul>
                </div>
              </div>
              @endif

              <div class="seo-item">
                <label class="seo-label">Description</label>
                <p class="seo-description">{{ $blog->meta_description ?? '—' }}</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- Video Modal -->
    @if($blog->video_url)
    <div class="video-modal" id="videoModal">
      <div class="video-modal-content">
        <div class="video-modal-header">
          <div class="video-modal-title">
            <div class="video-icon">{{ substr($blog->title_en, 0, 1) }}</div>
            <span>{{ $blog->title_en }}</span>
          </div>
          <div class="video-modal-actions">
            <button class="modal-action-btn" onclick="toggleFullscreen()">
              <i class="bx bx-expand"></i>
            </button>
            <button class="modal-action-btn" onclick="shareVideo()">
              <i class="bx bx-share-alt"></i>
            </button>
            <button class="modal-action-btn modal-close-btn" onclick="closeVideoModal()">
              <i class="bx bx-x fs-4"></i>
            </button>
          </div>
        </div>
        <div class="video-modal-body">
          <div class="video-container">
            <iframe id="videoPlayer"
              src="{{ $blog->video_url }}"
              frameborder="0"
              allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
              allowfullscreen>
            </iframe>
          </div>
        </div>
      </div>
    </div>
    @endif

    <!-- Status Update Form (hidden, triggered by dropdown) -->
    <form id="statusUpdateForm" method="POST" action="{{ route('backend.blog-list.update', $blog->id) }}" style="display:none;">
        @csrf
        @method('PUT')
        <input type="hidden" name="status" id="statusInput">
        <!-- Carry required fields silently -->
        <input type="hidden" name="blog_category_id" value="{{ $blog->blog_category_id }}">
        <input type="hidden" name="title_en" value="{{ $blog->title_en }}">
        <input type="hidden" name="slug" value="{{ $blog->slug }}">
    </form>
@endsection

@section('scripts')
<script>
    const box     = document.querySelector(".pay-wrap");
    const button  = box.querySelector(".pay-toggle");
    const options = box.querySelectorAll("li");

    button.onclick = () => box.classList.toggle("opened");

    options.forEach(item => {
        item.onclick = () => {
            const color = item.dataset.bg;
            button.childNodes[0].nodeValue = item.textContent + " ";
            button.style.background = color;
            options.forEach(o => o.classList.remove("current"));
            item.classList.add("current");
            box.classList.remove("opened");

            // Submit status change via form
            document.getElementById('statusInput').value = item.dataset.value;
            document.getElementById('statusUpdateForm').submit();
        };
    });

    document.addEventListener("click", e => {
        if (!box.contains(e.target)) box.classList.remove("opened");
    });
</script>
<script>
    function openVideoModal() {
        document.getElementById("videoModal")?.classList.add("active");
        document.body.style.overflow = "hidden";
    }

    function closeVideoModal() {
        const modal = document.getElementById("videoModal");
        if (!modal) return;
        modal.classList.remove("active");
        document.body.style.overflow = "auto";
        const iframe = document.getElementById("videoPlayer");
        if (iframe) iframe.src = iframe.src;
    }

    function toggleFullscreen() {
        const videoContainer = document.querySelector(".video-container");
        if (!document.fullscreenElement) {
            videoContainer?.requestFullscreen().catch(err => console.log("Fullscreen error:", err));
        } else {
            document.exitFullscreen();
        }
    }

    function shareVideo() {
        if (navigator.share) {
            navigator.share({ title: document.title, url: window.location.href })
                .catch(err => console.log("Share error:", err));
        } else {
            alert("Share not supported on this browser");
        }
    }

    document.addEventListener("keydown", e => { if (e.key === "Escape") closeVideoModal(); });
    document.getElementById("videoModal")?.addEventListener("click", function (e) {
        if (e.target === this) closeVideoModal();
    });
</script>
@endsection