@extends('layouts.front')
@section('title', '📰 الجرائد')

@push('css')
<style>
  /* 💎 تصميم الزجاج */
  .glass-modal {
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(20px);
    border-radius: 1.5rem;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.25);
  }

  .glass-overlay {
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(8px);
  }

  .pdf-frame {
    width: 100%;
    height: 80vh;
    border: none;
    border-radius: 1rem;
  }

  body.modal-open {
    overflow: hidden;
  }
</style>
@endpush

@section('content')
<div class="container mx-auto py-10">

  <h1 class="text-3xl font-extrabold mb-8 border-r-4 border-primary pr-3">🗞️ الجرائد</h1>

  @if($newspapers->count())
  <div class="grid sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-8">
    @foreach($newspapers as $paper)
    <div class="group bg-white/80 dark:bg-slate-800/40 rounded-2xl overflow-hidden shadow-md hover:shadow-xl transition relative">
      @if($paper->cover_image)
        <img src="{{ Storage::url($paper->cover_image) }}" class="w-full h-60 object-cover" alt="{{ $paper->title }}">
      @endif
      <div class="absolute inset-0 bg-black/50 opacity-0 group-hover:opacity-100 transition flex items-center justify-center">
        <button onclick="openPdfModal('{{ Storage::url($paper->pdf_path) }}', '{{ $paper->title }}')"
                class="bg-white/90 text-primary px-4 py-2 rounded-full font-bold shadow">
          📖 قراءة الجريدة
        </button>
      </div>
      <div class="p-4 text-center">
        <h3 class="font-bold text-lg line-clamp-2">{{ $paper->title }}</h3>
      </div>
    </div>
    @endforeach
  </div>

  <div class="mt-10">
    {{ $newspapers->links() }}
  </div>

  @else
  <p class="text-center text-gray-500 py-20">لا توجد جرائد حالياً.</p>
  @endif
</div>

<!-- 📘 نافذة عرض PDF -->
<div id="pdfModal" class="fixed inset-0 hidden items-center justify-center z-50">
  <div class="glass-overlay absolute inset-0" onclick="closePdfModal()"></div>
  <div class="glass-modal relative z-10 w-11/12 lg:w-3/4 p-4">
    <div class="flex justify-between items-center mb-3 border-b border-gray-300 pb-2">
      <h3 id="pdfTitle" class="font-bold text-xl text-primary"></h3>
      <button onclick="closePdfModal()" class="text-gray-600 hover:text-red-500 text-2xl font-bold">&times;</button>
    </div>
    <iframe id="pdfViewer" class="pdf-frame"></iframe>
  </div>
</div>
@endsection

@push('js')
<script>
  function openPdfModal(url, title) {
    document.getElementById('pdfViewer').src = url;
    document.getElementById('pdfTitle').innerText = title;
    document.getElementById('pdfModal').classList.remove('hidden');
    document.body.classList.add('modal-open');
  }

  function closePdfModal() {
    document.getElementById('pdfViewer').src = '';
    document.getElementById('pdfModal').classList.add('hidden');
    document.body.classList.remove('modal-open');
  }
</script>
@endpush