@extends('index')
@section('title', 'Blogs')
@section('title2', $blog->titre)
@section('content')
    <!-- Article Header -->
    @component('components.breadcrumb')
        <div data-aos="fade-right">
            <h1 class="display-5 fw-bold text-white mb-4">{{ $blog->titre }}</h1>
            <hr class="divider">
            <div class="d-flex align-items-center justify-content-center">
                <img src="{{ asset('assets/images/default-user.png') }}" alt="Auteur" class="rounded-circle me-3" width="50"
                    height="50">
                <div class="text-start">
                    <div class="fw-bold">{{ $blog->User->name ?? 'Auteur inconnu' }}</div>
                    <small class="text-white-50">{{ $blog->date }}</small>
                </div>
            </div>
        </div>
    @endcomponent

    <!-- Article Content -->
    <section class="py-5">
        <div class="container">
            <div class="row">
                <!-- Article Content -->
                <div class="col-lg-8" data-aos="fade-right">
                    <article class="article-content">
                        <div class="mb-4 text-center" data-aos="fade-up">
                            <img src="{{ asset('assets/images/blogs/' . $blog->image) }}" alt="{{ $blog->titre }}"
                                class="img-fluid rounded shadow-sm"
                                style="max-height: 400px; object-fit: cover; width: 100%;">
                        </div>
                        @if ($blog->video)
                            <div class="mt-4">
                                <div class="card shadow-sm">
                                    <div class="card-body text-center">
                                        <video controls class="w-100 rounded">
                                            <source src="{{ asset('assets/videos/blogs/' . $blog->video) }}"
                                                type="video/mp4">
                                            Votre navigateur ne supporte pas la vidéo HTML5.
                                        </video>
                                    </div>
                                </div>
                            </div>
                        @endif

                        <div class="article-text">
                            <p class="lead">{!! $blog->description !!}</p>
                        </div>

                        <!-- Tags -->
                        <div class="mt-5">
                            <h6>Tags :</h6>
                            <div class="d-flex flex-wrap gap-2">
                                @foreach (explode(',', $blog->tags) as $tag)
                                    <span class="badge rounded-pill bg-gradient text-dark">{{ $tag }}</span>
                                @endforeach
                            </div>
                        </div>


                        <!-- Share Buttons -->
                        <div class="mt-5 pt-4 border-top">
                            <h6>Partager cet article :</h6>
                            <div class="d-flex gap-2 flex-wrap">
                                <!-- Facebook -->
                                <a href="https://www.facebook.com/sharer/sharer.php?u={{ urlencode(Request::url()) }}"
                                    target="_blank" class="btn btn-outline-primary btn-sm">
                                    <i class="bi bi-facebook me-1"></i>Facebook
                                </a>

                                <!-- Twitter / X -->
                                <a href="https://twitter.com/intent/tweet?url={{ urlencode(Request::url()) }}&text={{ urlencode($blog->titre) }}"
                                    target="_blank" class="btn btn-outline-info btn-sm">
                                    <i class="bi bi-twitter-x me-1"></i>X (Twitter)
                                </a>

                                <!-- WhatsApp -->
                                <a href="https://api.whatsapp.com/send?text={{ urlencode($blog->titre . ' - ' . Request::url()) }}"
                                    target="_blank" class="btn btn-outline-success btn-sm">
                                    <i class="bi bi-whatsapp me-1"></i>WhatsApp
                                </a>

                                <!-- TikTok (partage profil ou article) -->
                                {{-- <a href="https://www.tiktok.com/share?url={{ urlencode(Request::url()) }}" target="_blank"
                                    class="btn btn-outline-dark btn-sm">
                                    <i class="bi bi-tiktok me-1"></i>TikTok
                                </a> --}}

                                <!-- Instagram (profil ou story link) -->
                                <a href="https://www.instagram.com/?url={{ urlencode(Request::url()) }}" target="_blank"
                                    class="btn btn-outline-danger btn-sm">
                                    <i class="bi bi-instagram me-1"></i>Instagram
                                </a>

                                <!-- Copier le lien -->
                                <button id="copyBtn" class="btn btn-outline-secondary btn-sm" onclick="copyLink(this)">
                                    <i class="bi bi-link-45deg me-1"></i><span>Copier le lien</span>
                                </button>
                            </div>
                        </div>
                        <script>
                            function copyLink(btn) {
                                navigator.clipboard.writeText(window.location.href).then(() => {
                                    const originalText = btn.innerHTML;
                                    btn.innerHTML = '<i class="bi bi-check2 me-1"></i>Copié !';
                                    setTimeout(() => {
                                        btn.innerHTML = originalText;
                                    }, 2000); // 2 secondes avant de revenir au texte original
                                });
                            }
                        </script>
                    </article>
                    <!-- Comments Section -->
                    {{-- <section class="mt-5 pt-5 border-top">
                        <h4 class="mb-4">Commentaires</h4>

                        <!-- Comment Form -->
                        <div class="card mb-4">
                            <div class="card-body">
                                <h6>Laisser un commentaire</h6>
                                <form>
                                    <div class="row">
                                        <div class="col-md-6 mb-3">
                                            <input type="text" class="form-control" placeholder="Votre nom">
                                        </div>
                                        <div class="col-md-6 mb-3">
                                            <input type="email" class="form-control" placeholder="Votre email">
                                        </div>
                                    </div>
                                    <div class="mb-3">
                                        <textarea class="form-control" rows="4" placeholder="Votre commentaire"></textarea>
                                    </div>
                                    <button type="submit" class="btn btn-success">Publier le commentaire</button>
                                </form>
                            </div>
                        </div>

                        <!-- Comments List -->
                        <div class="comments-list">
                            <div class="comment mb-4">
                                <div class="d-flex">
                                    <img src="{{ asset('assets/images/default-user.png') }}" alt="Commentateur"
                                        class="rounded-circle me-3" width="50" height="50">
                                    <div class="flex-grow-1">
                                        <div class="d-flex justify-content-between align-items-start">
                                            <div>
                                                <h6 class="mb-1">Aminata Sow</h6>
                                                <small class="text-muted">Il y a 2 heures</small>
                                            </div>
                                            <button class="btn btn-sm btn-outline-secondary">Répondre</button>
                                        </div>
                                        <p class="mt-2">Excellent article ! L'engagement citoyen est effectivement
                                            crucial pour notre développement. Merci pour cette réflexion pertinente.</p>
                                    </div>
                                </div>
                            </div>

                            <div class="comment mb-4">
                                <div class="d-flex">
                                    <img src="{{ asset('assets/images/default-user.png') }}" alt="Commentateur"
                                        class="rounded-circle me-3" width="50" height="50">
                                    <div class="flex-grow-1">
                                        <div class="d-flex justify-content-between align-items-start">
                                            <div>
                                                <h6 class="mb-1">Ousmane Diallo</h6>
                                                <small class="text-muted">Il y a 5 heures</small>
                                            </div>
                                            <button class="btn btn-sm btn-outline-secondary">Répondre</button>
                                        </div>
                                        <p class="mt-2">Comment peut-on concrètement s'engager davantage ? Y a-t-il des
                                            formations prévues ?</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </section> --}}
                </div>

                <!-- Sidebar -->
                <div class="col-lg-4" data-aos="fade-left">
                    <!-- Author Info -->
                    <div class="card shadow-sm mb-4 hover-shadow">
                        <div class="card-body text-center bg-light p-4 rounded">
                            <img src="{{ asset('assets/images/default-user.png') }}" class="rounded-circle mb-3"
                                width="80" height="80">
                            <h5 class="fw-bold">{{ $blog->User->name }}</h5>
                            <p class="small text-muted">Militante engagée...</p>
                            <div class="social-links d-flex justify-content-center gap-2 mt-2">
                                <a href="#" class="btn btn-outline-primary btn-sm"><i class="bi bi-facebook"></i></a>
                                <a href="#" class="btn btn-outline-info btn-sm"><i class="bi bi-twitter"></i></a>
                            </div>
                        </div>
                    </div>


                    <!-- Related Articles -->
                    <div class="card shadow-sm mb-4">
                        <div class="card-header">
                            <h6 class="mb-0">Articles similaires</h6>
                        </div>
                        <div class="card-body">
                            <div class="d-flex mb-3">
                                <img src="https://images.pexels.com/photos/6646918/pexels-photo-6646918.jpeg" alt="Article"
                                    class="rounded me-3" style="width: 60px; height: 60px; object-fit: cover;">
                                <div>
                                    <h6 class="mb-1"><a href="#" class="text-decoration-none">La jeunesse face
                                            aux défis</a></h6>
                                    <small class="text-muted">10 janvier 2025</small>
                                </div>
                            </div>
                            <div class="d-flex mb-3">
                                <img src="https://images.pexels.com/photos/8850742/pexels-photo-8850742.jpeg" alt="Article"
                                    class="rounded me-3" style="width: 60px; height: 60px; object-fit: cover;">
                                <div>
                                    <h6 class="mb-1"><a href="#" class="text-decoration-none">Entrepreneuriat
                                            féminin</a></h6>
                                    <small class="text-muted">8 janvier 2025</small>
                                </div>
                            </div>
                            <div class="d-flex">
                                <img src="https://images.pexels.com/photos/8850731/pexels-photo-8850731.jpeg" alt="Article"
                                    class="rounded me-3" style="width: 60px; height: 60px; object-fit: cover;">
                                <div>
                                    <h6 class="mb-1"><a href="#" class="text-decoration-none">Mobilisation
                                            réussie</a></h6>
                                    <small class="text-muted">5 janvier 2025</small>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Newsletter -->
                    <div class="card shadow-sm">
                        <div class="card-header bg-success text-white">
                            <h6 class="mb-0">Newsletter</h6>
                        </div>
                        <div class="card-body">
                            <p class="small">Recevez nos derniers articles directement dans votre boîte mail.</p>
                            <form>
                                <div class="mb-3">
                                    <input type="email" class="form-control" placeholder="Votre email">
                                </div>
                                <button type="submit" class="btn btn-success w-100">S'abonner</button>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection