@extends('frontend.master.master')

@section('content')
    <!-- Layout5 Header Section with Pattern Background -->
    <section class="layout5-header">
        <div class="container">
            <h1 class="layout5-title">{{ $nama_menu }}</h1>
            <p class="layout5-subtitle">Dapatkan informasi terkini mengenai PT Multi Spunindo Jaya Tbk disini!</p>
        </div>
    </section>

    <!-- Content Section -->
    <section class="layout5-content">
        <div class="container">
            <!-- Filter Tabs -->
            <div class="layout5-tabs mb-4">
                <a href="?filter=all" class="layout5-tab {{ request('filter', 'all') == 'all' ? 'active' : '' }}">Semua</a>
                <a href="?filter=ongoing" class="layout5-tab {{ request('filter') == 'ongoing' ? 'active' : '' }}">Sedang berlangsung</a>
                <a href="?filter=upcoming" class="layout5-tab {{ request('filter') == 'upcoming' ? 'active' : '' }}">Akan datang</a>
            </div>

            <!-- Cards Grid -->
            <div class="row g-4">
                @forelse ($datas as $item)
                    @php
                        $encryptedId = Crypt::encrypt($item->id);
                        // Use web-optimized version if exists, fallback to original
                        $picturePath = $item->picture ?? 'noimage.png';
                        $webOptimizedPath = public_path('storage/' . $picturePath . '_web.jpg');
                        $imageSrc = file_exists($webOptimizedPath) 
                            ? asset('storage/' . $picturePath . '_web.jpg') 
                            : asset('storage/' . $picturePath);
                    @endphp
                    <div class="col-12 col-md-6" data-aos="fade-up" data-aos-delay="100">
                        <div class="layout5-card">
                            <div class="layout5-card-image">
                                <img src="{{ $imageSrc }}" 
                                     alt="{{ $item->title ?? 'Tidak Ada Konten' }}" 
                                     class="img-fluid">
                            </div>
                            <div class="layout5-card-content">
                                <h3 class="layout5-card-title">
                                    {{ $item->title ?? 'Tidak Ada Konten' }}
                                    @if(isset($isPreview) && $isPreview && isset($item->status))
                                        @if($item->status == 'preview')
                                            <span class="badge bg-info text-white ms-2" style="font-size: 0.65rem;">
                                                <i class="fas fa-eye me-1"></i>
                                                Preview Draft
                                            </span>
                                        @elseif($item->status != 'post')
                                            <span class="badge bg-warning text-dark ms-2" style="font-size: 0.65rem;">
                                                <i class="fas fa-edit me-1"></i>
                                                Draft
                                            </span>
                                        @endif
                                    @endif
                                </h3>
                                <p class="layout5-card-desc">
                                    {{ Str::limit(strip_tags($item->description ?? 'Tidak Ada Konten'), 100) }}
                                </p>
                                <div class="layout5-card-meta">
                                    @if($item->subtitle)
                                        <div class="layout5-meta-item">
                                            <i class="bi bi-geo-alt"></i>
                                            <span>{{ $item->subtitle }}</span>
                                        </div>
                                    @endif
                                </div>
                                <div class="layout5-card-action">
                                    <a href="{{ isset($isPreview) && $isPreview ? route('preview.menu.detail', [
                                            'url' => $url,
                                            'slug' => \Illuminate\Support\Str::slug($item->title ?? 'Tidak Ada Konten'),
                                        ]) : route('layout.detail', [
                                            'url' => $url,
                                            'slug' => \Illuminate\Support\Str::slug($item->title ?? 'Tidak Ada Konten'),
                                        ]) }}?id_data={{ urlencode($encryptedId) }}{{ isset($item->status) && $item->status == 'preview' ? '&preview_mode=temp' : '' }}" 
                                       class="btn-layout5-detail">
                                        Lihat detail
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                @empty
                    <div class="col-12">
                        <div class="layout5-empty text-center py-5">
                            <i class="bi bi-calendar-x" style="font-size: 3rem; color: #ccc;"></i>
                            <p class="mt-3 text-muted">Tidak ada agenda yang ditemukan.</p>
                        </div>
                    </div>
                @endforelse
            </div>

            <!-- Pagination -->
            @if($datas->hasPages())
                <div class="layout5-pagination">
                    <nav class="pagination-nav">
                        {{-- Previous Page Link --}}
                        @if ($datas->onFirstPage())
                            <span class="pagination-link prev disabled">Sebelumnya</span>
                        @else
                            <a href="{{ $datas->previousPageUrl() }}" class="pagination-link prev">Sebelumnya</a>
                        @endif

                        {{-- Pagination Numbers --}}
                        <div class="pagination-numbers">
                            @foreach ($datas->getUrlRange(1, $datas->lastPage()) as $page => $url)
                                @if ($page == $datas->currentPage())
                                    <span class="pagination-link active">{{ $page }}</span>
                                @else
                                    <a href="{{ $url }}" class="pagination-link">{{ $page }}</a>
                                @endif
                            @endforeach
                        </div>

                        {{-- Next Page Link --}}
                        @if ($datas->hasMorePages())
                            <a href="{{ $datas->nextPageUrl() }}" class="pagination-link next">Berikutnya</a>
                        @else
                            <span class="pagination-link next disabled">Berikutnya</span>
                        @endif
                    </nav>
                </div>
            @endif
        </div>
    </section>
@endsection