@extends('app.template.index')

@section('title', $article->title)

@push('css')
    <style>
        .article-header {
            position: relative;
            background-image: url('{{ asset('storage/' . $article->photo) }}');
            background-size: cover;
            background-position: center;
            height: 300px;
            color: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
        }

        .article-header::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: rgba(0, 0, 0, 0.5);
            z-index: 1;
        }

        .article-title {
            position: relative;
            z-index: 2;
        }

        .article-content {
            padding: 30px;
            background-color: #f0f8ff;
        }

        .back-button {
            margin: 20px 0;
        }

        .breadcrumb {
            background-color: transparent;
            margin-bottom: 20px;
        }

        .breadcrumb-item+.breadcrumb-item::before {
            content: ">";
        }

        .article-body {
            font-size: 1.2em;
        }

        .list-group-item {
            font-size: 1em;
            display: flex;
            align-items: center;
            border-radius: 25px;
            padding: 10px;
            transition: background-color 0.3s;
        }

        .list-group-item:hover {
            background-color: #f0f0f0;
        }

        @media (max-width: 768px) {
            .list-group-item {
                font-size: 0.9em;
                padding: 8px;
            }
        }

        @media (max-width: 576px) {
            .list-group-item {
                font-size: 0.8em;
                padding: 6px;
            }
        }

        .col-lg-8 {
            padding-right: 30px;
            border-radius: 25px;
        }

        .col-lg-4 {
            padding-left: 30px;
            border-radius: 25px;
        }

        .article-image {
            width: 100px;
            height: 100px;
            margin-right: 10px;
            border-radius: 15px;
            object-fit: cover;
        }

        .gap-2 {
            margin-bottom: 20px;
        }

        .divider {
            border: none;
            height: 2px;
            background-color: #000;
            margin: 15px 0;
        }

        .content-image {
            width: 100%;
            height: auto;
            max-height: 400px;
            object-fit: cover;
            border-radius: 15px;
            overflow: hidden;
        }

        .video-responsive iframe {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }
    </style>
@endpush

@section('content')
    <header class="article-header">
        
    </header>
    <section class="breadcrumb-section py-3 bg-light">
        <div class="container">
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb mb-0">
                    <li class="breadcrumb-item"><a href="/">Beranda</a></li>
                    <li class="breadcrumb-item"><a href="/berita">Berita</a></li>
                    <li class="breadcrumb-item active" aria-current="page">{{ $article->title }}</li>
                </ol>
            </nav>
        </div>
    </section>
    <section class="article-content bg-light py-5">
        <div class="container">
            <div class="row">
                <div class="col-lg-8 bg-white gap-2">
                    <div class="content mt-3">
                        <h2 class="fw-bolder mb-2" style="font-size:28px">{{ $article->title }}</h2>
                        <div class="badge rounded-pill mb-2"
                            style="background-color: #67bcba; border-color: #67bcba; color: #fff;">
                            {{ $article->category }}
                        </div>
                        <div class="small text-muted mb-2   ">
                            <div>{{ $article->created_at->format('F d, Y') }}</div>
                        </div>
                        <div class="share-buttons mt-4 mb-4">
                            <a href="https://api.whatsapp.com/send?text={{ urlencode($article->title) }}%0A{{ request()->fullUrl() }}"
                                target="_blank" class="btn btn-success me-2">
                                <i class="bi bi-whatsapp text-white"></i>
                            </a>
                            <a href="https://twitter.com/intent/tweet?text={{ urlencode($article->title) }}%0A{{ request()->fullUrl() }}"
                                target="_blank" class="btn btn-info me-2">
                                <i class="bi bi-twitter text-white"></i>
                            </a>
                        </div>
                        <hr class="divider">
                        <div class="article-body">
                            <img src="{{ asset('storage/' . $article->photo) }}" alt="{{ $article->title }}"
                                class="content-image mb-4">
                            {!! $article->desc !!}
                            <div class="share-buttons mt-4 mb-4">
                                <h5>Share this article on:</h5>
                                <a href="https://api.whatsapp.com/send?text={{ urlencode($article->title) }}%0A{{ request()->fullUrl() }}"
                                    target="_blank" class="btn btn-success me-2">
                                    <i class="bi bi-whatsapp text-white"></i>
                                </a>
                                <a href="https://twitter.com/intent/tweet?text={{ urlencode($article->title) }}%0A{{ request()->fullUrl() }}"
                                    target="_blank" class="btn btn-info me-2">
                                    <i class="bi bi-twitter text-white"></i>
                                </a>
                                <button class="btn btn-primary me-2" onclick="copyLink()">
                                    <i class="bi bi-link-45deg"></i> Copy Link
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4 bg-light gap-2">
                    <h2 class="fw-bolder mb-4">Artikel Lainnya</h2>
                    <div class="list-group">
                        @foreach ($other_articles as $other_article)
                            <div class="py-1">
                                <a href="{{ route('artikel.detail', $other_article->slug) }}"
                                    class="list-group-item list-group-item-action d-flex align-items-start mb-2">
                                    <img src="{{ asset('storage/' . $other_article->photo) }}"
                                        alt="{{ $other_article->title }}" class="article-image me-3">
                                    <div class="flex-grow-1">
                                        <h5 class="mb-5">{{ $other_article->title }}</h5>
                                        <div class="small text-muted">
                                            <div>{{ $other_article->created_at->format('F d, Y') }}</div>
                                        </div>
                                    </div>
                                </a>
                            </div>
                        @endforeach
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection

@push('js')
    <script>
        function copyLink() {
            const link = '{{ request()->fullUrl() }}';
            navigator.clipboard.writeText(link)
                .then(() => {
                    Swal.fire({
                        icon: 'success',
                        title: 'Copied!',
                        text: 'Link copied to clipboard!',
                        confirmButtonText: 'OK'
                    });
                })
                .catch(err => {
                    console.error('Error copying the link:', err);
                    Swal.fire({
                        icon: 'error',
                        title: 'Oops!',
                        text: 'Failed to copy the link!',
                        confirmButtonText: 'Try Again'
                    });
                });
        }
    </script>
@endpush