{{-- resources/views/category_articles.blade.php --}}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">

@extends('layouts.app') <!-- Assuming you have a layout file -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
@section('content')
    <style>
        .card {
            border: none !important;
        }

        .card-title {
            /* font-family: Georgia, 'Times New Roman', Times, serif; */
            font-family: Oswald Bold !important;
            font-size: 40px !important;
            font-weight: 600;
        }

        #p::first-letter {
            initial-letter: 2;
            margin-right: 1px;
            font-size: 12px !important;
            color: #6d6d6f;
            font-family: italic;

        }

        .social-media-icons {
            display: flex;
            justify-content: left;
            align-items: left;
            gap: 10px;
            padding: 10px;
            margin-top: -1rem;
        }

        .social-icon {
            display: flex;
            justify-content: center;
            align-items: left;
            width: 30px;
            height: 30px;
            border-radius: 50%;
            font-size: 16px;
            color: white;
            padding-top: 8px;
            background-color: #555;
            transition: background-color 0.3s ease;
            text-decoration: none;
        }

        .social-icon:hover {
            opacity: 0.8;
        }

        .social-icon.facebook {
            background-color: #3b5998;
        }

        .social-icon.twitter {
            background-color: #00acee;
        }

        .social-icon.instagram {
            background-color: #C13584;
        }

        .social-icon.linkedin {
            background-color: #0e76a8;
        }

        .writer-photo {
            width: 50px !important;
            height: 50px !important;

            border-radius: 50%;
        }

        .image-credit {
            font-family: monospace;
            font-size: 13px !important;
            font-weight: 300 !important;
            color: #00acee;
        }

        .divider-1 {
            border-bottom: 1px solid grey;
            border-top: 1px solid grey;
            background-color: #161616;
            height: 0.2px !important;
            margin: 0.5em 0px 1.5em;
            width: 820px !important;
            margin: 1px auto;
        }

        .divider-1 span {
            display: block;
            width: 50px;
            height: 10px;
            background-color: grey;
            margin-top: -4px !important;
        }

        .container-80 {
            width: 80%;
            max-width: 960px;
            margin: 0 auto;
            /* padding-top: 50px; */
            height: 100%;
        }

        .style-gris {
            font: bold 400% "Open Sans", Arial, sans-serif;
            color: #777;
            text-align: center;
        }

        .line-divider {
            margin-top: 10px;
            font: 150% "Open Sans", Arial, sans-serif;
            color: #999;
            text-align: center;
            position: relative;
            margin-bottom: 60px;
        }

        .line-divider:before {
            content: "";
            display: block;
            border-top: solid 2px #999;
            width: 100%;
            height: 2px;
            position: absolute;
            top: 17px;
            z-index: 1;
        }

        .line-divider .span-line-divider {
            background: #fff;
            padding: 0 20px;
            position: relative;
            z-index: 5;
        }

        #p {
            text-align: justify;
            font-family: Times;
            font-size: 20px;
        }

        .dark-mode .badge {
            color: #9ea0a1 !important;
        }

        .article-content {
            font-family: Arial, sans-serif;
            font-size: 16px;
            color: #333;
            line-height: 1.9;
            text-align: justify;
        }

        .poa {
            font-size: 25px;
            font-family: Montserrat;
        }

        .image-credit {
            font-family: monospace;
            font-size: 13px !important;
            font-weight: 300 !important;
            color: #9ea0a1;
        }

        .poas::first-letter {
            initial-letter: 2 !important;
            margin-right: 1px !important;
            font-size: 12px !important;
            color: #6d6d6f !important;
            font-family: italic !important;

        }

        #butt {
            position: -webkit-sticky;
            /* For Safari */
            position: sticky;
            top: 0;
            width: 100%;
            z-index: 1000;
            /* Ensures the header stays above other content */
            background-color: #fff;
            /* Set your desired background color */
            /* box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); */
            /* Optional: Adds a subtle shadow for better visibility */
        }
    </style>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-icons/1.9.1/font/bootstrap-icons.min.css">
    </head>

    @include('partials.navbar')
    @include('articles.partials.home-css')
    {{-- <div class="text-center mt-2" id="butt">
        <a href="{{ route('home') }}" class="btn btn-outline-primary">← Back to Homepage</a>
    </div> --}}
    <br />
    {{-- <a href="{{ url('/') }}" class="btn btn-dark mb-4">
            <i class="bi bi-arrow-left"></i> Back to Home
        </a> --}}

    <div class="container" style="max-width: 1300px !important">
        <div class="">
            <h1 class="style-gris">{{ $category->name }}</h1>
            <h2 class="line-divider "><span class="span-line-divider "> Analysis</span></h2>
            <br />
            {{-- <h1 style="text-align: center"> {{ $category->name }} Analysis</h1> --}}
            <div class="row">
                @foreach ($articles as $article)
                    <div class="col-md-8" style="margin:1px auto !important">
                        <div class="card mb-4">
                            <div class="card-body">
                                <p class="badge mb-2">{{ $article->category ? $article->category->name : ' ' }}</p>
                                <h5 class="card-title">{{ $article->title }}</h5>
                                <p class="poa">
                                    {!! Str::words(strip_tags($article->description), 150, '...') !!}

                                </p>
                                @if ($article->writer_photo)
                                    @php
                                        $path = $article->writer_photo;

                                        // Old photos (public/uploads/...)
                                        if (str_starts_with($path, 'uploads/')) {
                                            $photoUrl = asset($path);
                                        }
                                        // New photos (storage/app/public/...)
                                        else {
                                            $photoUrl = asset('storage/' . $path);
                                        }
                                    @endphp

                                    <img src="{{ $photoUrl }}" alt="Writer Photo" class="writer-photo"
                                        style="max-width:100px; height:auto; object-fit:cover;">

                                    By {{ $article->user->name }}&nbsp; |
                                    <span style="color:rgb(38,181,38); font-weight:100;">
                                        {{ $article->created_at->format('d F , Y') }} | {{ $article->word_count }}
                                    </span>
                                @endif

                                {{-- @if ($article->writer_photo)
                                    <img src="{{ asset("storage/{$article->writer_photo}") }}" alt="Writer Photo"
                                        style="max-width: 100px; height: auto;" class="writer-photo"> By
                                    {{ $article->user->name }}&nbsp; | <span
                                        style="color: rgb(38, 181, 38); font-weight: 100;">
                                        {{ $article->created_at->format('d F , Y') }} | {{ $article->word_count }}</span>
                                @endif --}}
                                <div class="social-media-icons mt-3">
                                    <a href="https://www.facebook.com" target="_blank" class="social-icon facebook">
                                        <i class="fab fa-facebook-f"></i>
                                    </a>
                                    <a href="https://twitter.com" target="_blank" class="social-icon twitter">
                                        <i class="fab fa-twitter"></i>
                                    </a>
                                    <a href="https://www.instagram.com" target="_blank" class="social-icon instagram">
                                        <i class="fab fa-instagram"></i>
                                    </a>
                                    <a href="https://www.linkedin.com" target="_blank" class="social-icon linkedin">
                                        <i class="fab fa-linkedin-in"></i>
                                    </a>
                                </div>
                                @if ($article->article_image)
                                    @php
                                        $path = $article->article_image;

                                        // Old images (last year): public/uploads/...
                                        if (str_starts_with($path, 'uploads/')) {
                                            $imageUrl = asset($path);
                                        }
                                        // New images: storage/app/public/...
                                        else {
                                            $imageUrl = asset('storage/' . $path);
                                        }
                                    @endphp

                                    <img src="{{ $imageUrl }}" alt="Article Image" class="article-image mt-3"
                                        style="width:800px; height:525px; object-fit:cover;">
                                @endif


                                {{-- @if ($article->article_image)
                                    <img src="{{ asset("storage/{$article->article_image}") }}" alt="Article Image"
                                        style="width: 800px !important; height: 525px !important;"
                                        class="article-image mt-3">
                                @endif --}}
                                <br />
                                @if ($article->credit)
                                    <p class="image-credit">Image Credit: {{ $article->credit }}</p>
                                @endif
                                <div id="news-font">
                                    {{-- <button id="inc">Increase Font</button>
                                        <button id="dec">Decrease Font</button> --}}
                                    <p class="article-content poas">
                                        {!! $article->content !!}

                                    </p>
                                </div>
                            </div>
                            @if ($article->user->bio)
                                <div class="author-section mt-3">
                                    {{-- <h6>About the Author:</h6> --}}
                                    <p style="margin-top:-10px"><strong>{{ $article->user->name }}</strong></p>
                                    <p style="margin-top:-16px !important">
                                        {{ $article->user->bio ?? 'Africa Tech Insights' }}
                                    </p>
                                </div>
                                {{-- <p><img src="https://static.semafor.com/_next/static/media/icon-flagship.fce86feb.svg" style="width:19px;color:darkmagenta"> This is an opinion piece. The views expressed in this article are those of just the author.</p> --}}
                            @else
                                <div class="author-section">
                                    <h6>About the Author:</h6>
                                    <p><strong>{{ $article->user->name }}</strong></p>
                                    <p>No bio available for this user.</p>
                                </div>
                            @endif
                        </div>

                        <br />
                        <br />
                    </div>
                @endforeach
            </div>

            <!-- Pagination -->
            {{-- <div class="d-flex justify-content-center">
            {{ $articles->links() }}
        </div> --}}
        </div>
    @endsection
    <script type="text/javascript">
        var size = 16; // initial font size

        function setFontSize(s) {
            size = s;
            $('#news-font').css('font-size', size + 'px'); // correct selector with #
        }

        function increaseFontSize() {
            setFontSize(size + 5);
        }

        function decreaseFontSize() {
            if (size > 5) // prevent size from going too small
                setFontSize(size - 5);
        }

        $(document).ready(function() {
            $('#inc').click(increaseFontSize); // assign click event to increase button
            $('#dec').click(decreaseFontSize); // assign click event to decrease button
            setFontSize(size); // set the initial font size
        });
    </script>

    {{-- <script>

        async function fetchRSS(category) {
            const rssUrls = {
                fintech: 'https://news.google.com/rss/search?q=Technology+Africa',
                startups: 'https://news.google.com/rss/search?q=Startups+Africa',
                cryptocurrency: 'https://news.google.com/rss/search?q=Africa+Mining+Energy',
                health: 'https://news.google.com/rss/search?q=AI+Africa',
                cyber: 'https://news.google.com/rss/search?q=Cybersecurity+Africa',
                clouds: 'https://news.google.com/rss/search?q=Cloud+Computing+Africa',
                construction: 'https://news.google.com/rss/search?q=Construction+Africa',
                crypto: 'https://news.google.com/rss/search?q=Cryptocurrency+Africa'
            };

            const rssUrl = rssUrls[category];

            if (!rssUrl) {
                console.error(`Unknown category: ${category}`);
                document.getElementById('news-cards').innerHTML = `<p>Error: Invalid category.</p>`;
                return;
            }

            try {
                const response = await fetch(
                    `https://api.rss2json.com/v1/api.json?rss_url=${encodeURIComponent(rssUrl)}`);
                const data = await response.json();

                if (data.items && data.items.length > 0) {
                    displayRSS(data.items.slice(0, 12)); // Display only the first 12 articles
                } else {
                    document.getElementById('news-cards').innerHTML = '<p>No articles found for this category.</p>';
                }
            } catch (error) {
                console.error("Error fetching RSS feed:", error);
                document.getElementById('news-cards').innerHTML = '<p>Error loading news.</p>';
            }
        }


        function displayRSS(articles) {
            let newsHtml = '';
            articles.forEach(article => {

                const titleParts = article.title.split(" - ");
                const articleTitle = titleParts[0];
                const articleSource = titleParts[1] ||
                "Unknown Source"; /

                newsHtml += `
                  <div class="news-item">
                      <h3 style="margin-bottom:-0.5rem">
                          <a href="${article.link}" target="_blank">
                            ${articleTitle} - <span style="color:darkgray; font-size:14px; font-weight:100"> ${articleSource}</span>
                          </a>
                      </h3>
                  </div>`;
            });
            document.getElementById('news-cards').innerHTML = newsHtml;
        }
        fetchRSS('fintech');
    </script> --}}