@extends('core::layouts.master')

@section('title', $title . ' - ASETQU V.2')
@section('meta_description', $meta_description)

@push('styles')
<link rel="stylesheet" href="{{ asset('assets/css/pages/news-events.css') }}">
@endpush

@section('content')
{{-- Hero Section --}}
<section class="newsletter-hero">
    <div class="hero-bg-overlay"></div>
    <div class="hero-particles"></div>
    <div class="container">
        <div class="row align-items-center">
            <div class="col-lg-6">
                <div class="hero-content" data-aos="fade-right">
                    <h1 class="hero-title">
                        <span class="text-gradient-cyan">ASETQU V.2</span> <span class="text-gradient-gold">NEWSLETTER</span>
                    </h1>
                    <p class="hero-subtitle">
                        Berlangganan newsletter AsetQu V.2 untuk update terbaru,<br>insight ekosistem, dan peluang eksklusif
                    </p>
                </div>
            </div>
            <div class="col-lg-6">
                <div class="hero-image" data-aos="fade-left" data-aos-delay="200">
                    {{-- <div class="cube-wrapper">
                        <div class="cube-glow"></div>
                        <img src="{{ asset('assets/images/newsletter-cube.png') }}" alt="Newsletter" class="cube-img" onerror="this.style.display='none'">
                        <div class="cube-placeholder">
                            <div class="cube-3d">
                                <div class="cube-face front"></div>
                                <div class="cube-face back"></div>
                                <div class="cube-face left"></div>
                                <div class="cube-face right"></div>
                                <div class="cube-face top"></div>
                                <div class="cube-face bottom"></div>
                            </div>
                        </div>
                    </div> --}}
                </div>
            </div>
        </div>
    </div>
</section>

{{-- News Update Section --}}
<section class="news-update-section section">
    <div class="container">
        <h2 class="section-title-gradient" data-aos="fade-up">Berita Terbaru</h2>

        <div class="news-list" data-aos="fade-up" data-aos-delay="100">
            @forelse($news as $item)
            <a href="{{ route('page.news.news-detail', $item->slug) }}" class="news-list-item">
                <div class="news-list-image">
                    @if($item->thumbnail)
                        <img src="{{ asset('storage/' . $item->thumbnail) }}" alt="{{ $item->title }}">
                    @else
                        <div class="news-placeholder-img">
                            <i class="fas fa-newspaper"></i>
                        </div>
                    @endif
                </div>
                <div class="news-list-content">
                    <span class="news-list-date">
                        <span class="text-purple">{{ $item->published_at ? $item->published_at->locale('id')->translatedFormat('l') : '-' }},</span>
                        <span class="text-gold">{{ $item->published_at ? $item->published_at->format('d F Y') : '-' }}</span>
                    </span>
                    <h3 class="news-list-title">{{ $item->title }}</h3>
                    <p class="news-list-excerpt">
                        {{ $item->excerpt ?? Str::limit(strip_tags($item->content), 200) }}
                    </p>
                    <span class="news-list-link">
                        Baca selengkapnya <i class="fas fa-arrow-right"></i>
                    </span>
                </div>
            </a>
            @empty
            <div class="empty-news-state">
                <i class="fas fa-newspaper"></i>
                <p>Belum ada berita tersedia</p>
            </div>
            @endforelse
        </div>

        {{-- Pagination --}}
        @if($news->hasPages())
        <div class="news-pagination" data-aos="fade-up">
            <span class="pagination-info">Showing {{ $news->firstItem() }}-{{ $news->lastItem() }} from {{ $news->total() }}</span>
            <div class="pagination-controls">
                @if($news->onFirstPage())
                    <span class="page-btn disabled"><i class="fas fa-chevron-left"></i></span>
                @else
                    <a href="{{ $news->previousPageUrl() }}" class="page-btn"><i class="fas fa-chevron-left"></i></a>
                @endif

                @foreach($news->getUrlRange(1, $news->lastPage()) as $page => $url)
                    @if($page == $news->currentPage())
                        <span class="page-btn active">{{ $page }}</span>
                    @else
                        <a href="{{ $url }}" class="page-btn">{{ $page }}</a>
                    @endif
                @endforeach

                @if($news->hasMorePages())
                    <a href="{{ $news->nextPageUrl() }}" class="page-btn"><i class="fas fa-chevron-right"></i></a>
                @else
                    <span class="page-btn disabled"><i class="fas fa-chevron-right"></i></span>
                @endif
            </div>
        </div>
        @endif
    </div>
</section>

{{-- Newsletter Subscription Section --}}
<section class="newsletter-section section">
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-lg-10">
                <div class="newsletter-card" data-aos="fade-up">
                    <h2 class="newsletter-title text-center">
                        <span class="text-gradient-pink">Berlangganan Newsletter Kami</span>
                    </h2>
                    <p class="newsletter-desc text-center">
                        Ikuti newsletter kami untuk mempelajari lebih lanjut tentang perdamaian dan membangun koneksi komunitas.<br>
                        Dapatkan informasi terbaru seputar berbagai workshop dan acara PLC. Program tersedia untuk semua kalangan.<br>
                        Bergabunglah bersama kami hari ini. Berlokasi di Eagle Creek. Kami siap membantu.<br>
                        Kursus: Peace Learning Center, Creating Change
                    </p>

                    <form id="newsletterForm" class="newsletter-form">
                        @csrf
                        <div class="input-wrapper">
                            <input type="email" name="email" class="form-control email-input" placeholder="Masukkan email" required>
                            <button type="submit" class="btn btn-subscribe">Subscribe</button>
                        </div>
                    </form>

                    <p class="privacy-note text-center">
                        Privasi Anda adalah prioritas kami. Kami melindungi informasi Anda untuk<br>
                        memastikan pengalaman yang aman dan bersifat rahasia
                    </p>
                </div>
            </div>
        </div>
    </div>
</section>
@endsection

@push('scripts')
<script>
$(document).ready(function() {
    $('#newsletterForm').on('submit', function(e) {
        e.preventDefault();

        const form = $(this);
        const submitBtn = form.find('.btn-subscribe');
        const originalText = submitBtn.text();

        submitBtn.prop('disabled', true).text('Loading...');

        $.ajax({
            url: '{{ route("page.newsletter.subscribe") }}',
            method: 'POST',
            data: form.serialize(),
            success: function(response) {
                if (response.success) {
                    Swal.fire({
                        icon: 'success',
                        title: 'Berhasil!',
                        text: response.message,
                        confirmButtonColor: '#8b5cf6'
                    });
                    form[0].reset();
                }
            },
            error: function(xhr) {
                let message = 'Terjadi kesalahan. Silakan coba lagi.';
                if (xhr.responseJSON && xhr.responseJSON.message) {
                    message = xhr.responseJSON.message;
                }
                Swal.fire({
                    icon: 'error',
                    title: 'Oops!',
                    text: message,
                    confirmButtonColor: '#8b5cf6'
                });
            },
            complete: function() {
                submitBtn.prop('disabled', false).text(originalText);
            }
        });
    });
});
</script>
@endpush