@extends('layouts.app')

@section('content')

    @include('partials.navbar')
    @include('articles.partials.home-css')
    @include('partials.crypto_ticker')
    <div class="container my-3">

        @php
            $latest = $articles->first();
            $sideArticles = $articles->skip(1)->take(2)->values(); // FIXED
            $bottomArticles = $articles->skip(3);
        @endphp

        {{-- =========================
            TOP SECTION (3 ARTICLES)
        ========================== --}}
        <div class="row">
            {{-- LEFT SIDE (first of sideArticles) --}}
            @if ($sideArticles->get(0))
                @php $left = $sideArticles->get(0); @endphp
                <div class="col-lg-3 col-md-6 mb-4" style="background: rgb(244, 244, 230); padding: 20px;">
                    @if ($left->article_image)
                        @php
                            $path = $left->article_image;
                            if (str_starts_with($path, 'uploads/')) {
                                $imageUrl = asset($path);
                            } else {
                                $imageUrl = asset('storage/' . $path);
                            }
                        @endphp
                        <img src="{{ $imageUrl }}" class="img-fluid mb-0"
                            style="height:250px; object-fit:cover; width:100%;">
                    @endif
                    <span style="font-size:8px;color:brown">
                        {{ $latest->credit ? 'Image Credit: ' . $latest->credit : '' }}
                    </span>
                    <h4 class="fw-semi-bold">
                        <a href="{{ route('articles.show', $left->id) }}" class="text-dark text-decoration-none">
                            {{ $left->title }}
                        </a>
                    </h4>

                    <p class="text-muted small">
                        By {{ $left->user->name ?? 'Admin' }} |
                        {{ $left->created_at->format('F j, Y') }} <br> &nbsp; &nbsp; Estimated Reading Time:
                        {{ $latest->reading_time }} min
                    </p>

                    <p class="lead">
                        {{ Str::limit(strip_tags($left->content), 200) }}
                    </p>

                    <a href="{{ route('articles.show', $left->id) }}" class="btn btn-dark mt-1 shadow-none px-4">
                        Read Full Article
                    </a>
                    <br>
                    <hr>
                    <br>
                    <div class="card border-0 mb-4 mt-2" style="background:#000; border:1px solid #333; border-radius:6px;">
                        <div class="card-body p-4 text-light" style="font-family: 'Courier New', monospace;">
                            <!-- Header -->
                            <div class="d-flex justify-content-between align-items-center mb-4">
                                <span style="color:#ff9900; font-weight:700; letter-spacing:1px; font-size: 13px;">
                                    CYBERSECURITY FUNDING SNAPSHOT
                                </span>
                            </div>
                            <div style="border-top:1px solid #9b9898; margin:20px 0; margin-top: -15px;"></div>
                            @if ($cyberDeal)
                                <!-- STARTUP -->
                                <div class="d-flex justify-content-between align-items-center mb-0">
                                    <span style="color:#888; font-size:13px;">
                                        <i class="bi bi-building"></i> STARTUP
                                    </span>
                                    <span style="font-weight:700;">
                                        {{ strtoupper($cyberDeal->startup_name) }}
                                    </span>
                                </div>
                                <!-- ROUND -->
                                <div class="d-flex justify-content-between align-items-center mb-0">
                                    <span style="color:#888; font-size:13px;">
                                        <i class="bi bi-layers"></i> ROUND
                                    </span>
                                    <span>
                                        {{ $cyberDeal->round_type ?? 'N/A' }}
                                    </span>
                                </div>
                                <!-- LEAD INVESTOR -->
                                <div class="d-flex justify-content-between align-items-center mb-0">
                                    <span style="color:#888; font-size:13px;">
                                        <i class="bi bi-person-badge"></i> LEAD INVESTOR
                                    </span>
                                    <span>
                                        {{ $cyberDeal->lead_investor ?? 'N/A' }}
                                    </span>
                                </div>

                                <!-- FUNDING -->
                                <div class="d-flex justify-content-between align-items-center mb-0">
                                    <span style="color:#888; font-size:13px;">
                                        <i class="bi bi-currency-dollar"></i> FUNDING
                                    </span>
                                    <span style="font-size:20px; font-weight:800; color:#00ff88;">
                                        ${{ number_format($cyberDeal->amount / 1000000, 0) }}
                                    </span>
                                </div>
                                <!-- Divider -->
                                <div style="border-top:1px solid #222; margin:15px 0;"></div>
                                <!-- SECTOR -->
                                <div class="d-flex justify-content-between align-items-center mb-">
                                    <span style="color:#888; font-size:13px;">
                                        <i class="bi bi-diagram-3"></i> SECTOR
                                    </span>
                                    <span>
                                        {{ strtoupper($cyberDeal->sector) }}
                                    </span>
                                </div>
                                <!-- COUNTRY -->
                                <div class="d-flex justify-content-between align-items-center">
                                    <span style="color:#888; font-size:13px;">
                                        <i class="bi bi-geo-alt"></i> COUNTRY
                                    </span>
                                    <span>
                                        {{ strtoupper($cyberDeal->country) }}
                                    </span>
                                </div>
                                <div style="border-top:1px solid #222; margin:15px 0;"></div>
                                <div class="d-flex justify-content-between align-items-center">
                                    <span style="color:#888; font-size:13px;">
                                        <i class="bi bi-link-45deg"></i> SOURCE
                                    </span>
                                    <span style="text-transform: ">
                                        @if ($cyberDeal->url)
                                            <a href="{{ $cyberDeal->url }}" target="_blank" style="text-decoration: none">
                                                {{ $cyberDeal->source ?? 'View Source' }}
                                            </a>
                                        @else
                                            {{ $cyberDeal->source }}
                                        @endif
                                    </span>
                                </div>
                            @else
                                <p style="color:#ff5555;">No cybersecurity deals available yet.</p>
                            @endif
                        </div>
                    </div>
                </div>
            @endif

            @if ($latest)
                <div class="col-lg-6 col-md-12 mb-4" style="background: rgb(234, 234, 241) !important; padding: 20px;">
                    @if ($latest->article_image)
                        @php
                            $path = $latest->article_image;

                            if (str_starts_with($path, 'uploads/')) {
                                $imageUrl = asset($path);
                            } else {
                                $imageUrl = asset('storage/' . $path);
                            }
                        @endphp
                        <img src="{{ $imageUrl }}" alt="Article Image" class="article-image mt-0"
                            style="width:100%; height:525px; object-fit:cover;">
                    @endif
                    <span style="font-size:8px; color:brown">
                        {{ $latest->credit ? 'Image Credit: ' . $latest->credit : '' }}
                    </span>
                    <h1 class="display-5 fw-bold" style="font-family: Times">
                        <a href="{{ route('articles.show', $latest->id) }}" class="text-dark text-decoration-none">
                            {{ $latest->title }}
                        </a>
                    </h1>
                    <p class="text-muted">
                        By {{ $latest->user->name ?? 'Admin' }} |
                        {{ $latest->created_at->format('F j, Y') }} | Estimated Reading Time: {{ $latest->reading_time }}
                        min
                    </p>
                    <p class="lead">
                        {{ Str::limit(strip_tags($latest->content), 300) }}
                    </p>
                    <a href="{{ route('articles.show', $latest->id) }}" class="btn btn-dark mt-1 shadow-none px-4">
                        Read Full Article
                    </a>
                    @foreach ($articles as $article)
                    @endforeach
                    <div style="border-top:1px solid #9b9898; margin:40px 60px;"></div>
                    <div class="card mt-2" style="background:#000000; color:white; ">
                        <div class="card-body p-0 text-light" style="font-family: 'Courier New', monospace;">
                            <h5 class="mb-4"
                                style="color:#FFF1D3;background:#333232; font-weight:100; letter-spacing:1px; text-transform: uppercase; font-size: 24px;margin-top:0px; text-align: center;border-bottom: 1px solid #b4b2b2;">
                                Investment Surge: 2025 in Numbers
                            </h5>
                            <div class="table-responsive">
                                <table class="table ai-table mb-0">
                                    <thead>
                                        <tr>
                                            <th style="color:#FF0000 !important; font-weight:100">Region</th>
                                            <th style="color:#FF0000 !important;font-weight:100">Total Investment</th>
                                            <th style="color:#FF0000 !important;font-weight:100">Growth</th>
                                            <th style="color:#FF0000 !important;font-weight:100">Lead Investor</th>
                                            <th style="color:#FF0000 !important;font-weight:100">AI Investment</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td>AFRICA <sup>[1]</sup></td>
                                            <td class="val">~${{ number_format($africa->amount ?? 0, 0) }}B</td>
                                            <td>{{ $africa->growth_rate ?? 0 }}%</td>
                                            <td>{{ $africa->largest_company_name ?? 'N/A' }}</td>
                                            <td class="val">
                                                ~${{ number_format($africa->largest_company_investment ?? 0, 0) }}B</td>
                                        </tr>

                                        <tr>
                                            <td>USA <sup>[2]</sup></td>
                                            <td class="val">~${{ number_format($america->amount ?? 0, 0) }}B</td>
                                            <td>{{ $america->growth_rate ?? 0 }}%</td>
                                            <td>{{ $america->largest_company_name ?? 'N/A' }}</td>
                                            <td class="val">
                                                ~${{ number_format($america->largest_company_investment ?? 0, 0) }}B</td>
                                        </tr>

                                        <tr>
                                            <td>GLOBAL <sup>[3]</sup></td>
                                            <td class="val">~${{ number_format($global->amount ?? 0, 0) }}B</td>
                                            <td>{{ $global->growth_rate ?? 0 }}%</td>
                                            <td>{{ $global->largest_company_name ?? 'N/A' }}</td>
                                            <td class="val">
                                                ~${{ number_format($global->largest_company_investment ?? 0, 0) }}B</td>
                                        </tr>
                                    </tbody>
                                </table>

                                <div class="mt-3" style="font-size:12px; color:#888;">
                                    <strong>Sources:</strong><br>

                                    @if (!empty($africa->sources_note))
                                        <div>
                                            [1] {{ str_replace(["\r\n", "\n", "\r"], ', ', $africa->sources_note) }}
                                        </div>
                                    @endif

                                    @if (!empty($america->sources_note))
                                        <div>
                                            [2] {{ str_replace(["\r\n", "\n", "\r"], ', ', $america->sources_note) }}
                                        </div>
                                    @endif

                                    @if (!empty($global->sources_note))
                                        <div>
                                            [3] {{ str_replace(["\r\n", "\n", "\r"], ', ', $global->sources_note) }}
                                        </div>
                                    @endif

                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            @endif


            {{-- RIGHT SIDE (second of sideArticles) --}}
            @if ($sideArticles->get(1))
                @php $right = $sideArticles->get(1); @endphp

                <div class="col-lg-3 col-md-6 mb-4" style="background: rgb(238, 240, 238); padding: 20px;">

                    @if ($right->article_image)
                        @php
                            $path = $right->article_image;

                            if (str_starts_with($path, 'uploads/')) {
                                $imageUrl = asset($path);
                            } else {
                                $imageUrl = asset('storage/' . $path);
                            }
                        @endphp

                        <img src="{{ $imageUrl }}" class="img-fluid mb-0"
                            style="height:250px; object-fit:cover; width:100%;">
                    @endif
                    <span style="font-size:8px; color:brown">
                        {{ $latest->credit ? 'Image Credit: ' . $latest->credit : '' }}
                    </span>
                    <h4 class="fw-semi-bold">
                        <a href="{{ route('articles.show', $right->id) }}" class="text-dark text-decoration-none">
                            {{ $right->title }}
                        </a>
                    </h4>

                    <p class="text-muted small">
                        By {{ $right->user->name ?? 'Admin' }} |
                        {{ $right->created_at->format('F j, Y') }}<br>&nbsp; &nbsp; Estimated Reading Time:
                        {{ $latest->reading_time }} min
                    </p>

                    <p class="lead">
                        {{ Str::limit(strip_tags($right->content), 200) }}
                    </p>

                    <a href="{{ route('articles.show', $right->id) }}" class="btn btn-dark mt-3 shadow-none px-4">
                        Read Full Article
                    </a>
            @endif

            <style>
                .ai-table {
                    width: 100%;
                    border-collapse: collapse;
                    color: #e5e5e5;
                    font-family: 'Inter', sans-serif;
                }

                .ai-table thead th {
                    font-size: 13px;
                    text-transform: uppercase;
                    letter-spacing: 1px;
                    color: #e3e6ea;
                    padding: 12px;
                    border-bottom: 1px solid #222;
                    border-top: 1px solid #222;
                    text-align: center;
                }

                .ai-table tbody td {
                    padding: 12px;
                    text-align: center;
                    border-bottom: 1px solid #111;
                    font-size: 14px;
                }

                .ai-table tbody tr:hover {
                    background: #0a0a0a;
                }

                .ai-table .val {
                    color: #00ff88;
                    font-weight: 600;
                }

                .ai-table tbody tr td:first-child {
                    font-weight: 600;
                    color: #ffffff;
                }
            </style>
            <br>
            <hr>
            <br>
            <div class="card border-0 mb-4 mt-4" style="background:#000; border:1px solid #333; border-radius:6px;">

                <div class="card-body p-4 text-light" style="font-family: 'Courier New', monospace;">

                    <!-- Header -->
                    <div class="d-flex justify-content-between align-items-center mb-4">
                        <span style="color:#ff9900; font-weight:700; letter-spacing:1px; font-size: 13px;">
                            FUNDING SNAPSHOT
                        </span>

                        <span style="color:#00ff88; font-size:12px;">
                            ● History
                        </span>
                    </div>
                    <div style="border-top:1px solid #9b9898; margin:20px 0; margin-top: -15px;"></div>
                    @if ($biggestDeal)
                        <!-- STARTUP -->
                        <div class="d-flex justify-content-between align-items-center mb-0">
                            <span style="color:#888; font-size:13px;">
                                <i class="bi bi-building"></i> STARTUP
                            </span>
                            <span style="font-weight:700;">
                                {{ strtoupper($biggestDeal->startup_name) }}
                            </span>
                        </div>
                        <div class="d-flex justify-content-between align-items-center mb-0">
                            <span style="color:#888; font-size:13px;">
                                <i class="bi bi-person-badge"></i> TYPE
                            </span>
                            <span>
                                {{ $biggestDeal->company->company_type ?? 'N/A' }}
                            </span>
                        </div>
                        <!-- ROUND -->
                        <div class="d-flex justify-content-between align-items-center mb-0">
                            <span style="color:#888; font-size:13px;">
                                <i class="bi bi-layers"></i> ROUND
                            </span>
                            <span>
                                {{ $biggestDeal->round_type ?? 'N/A' }}
                            </span>
                        </div>

                        <!-- LEAD INVESTOR -->
                        <div class="d-flex justify-content-between align-items-center mb-0">
                            <span style="color:#888; font-size:13px;">
                                <i class="bi bi-person-badge"></i> LEAD INVESTOR
                            </span>
                            <span>
                                {{ $biggestDeal->lead_investor ?? 'N/A' }}
                            </span>
                        </div>

                        <!-- FUNDING -->
                        <div class="d-flex justify-content-between align-items-center mb-0">
                            <span style="color:#888; font-size:13px;">
                                <i class="bi bi-currency-dollar"></i> FUNDING
                            </span>
                            <span style="font-size:20px; font-weight:800; color:#00ff88;">
                                ${{ number_format($biggestDeal->amount, 0) }}
                            </span>
                        </div>
                        <!-- SOURCE -->

                        <!-- Divider -->
                        <div style="border-top:1px solid #222; margin:15px 0;"></div>

                        <!-- SECTOR -->
                        <div class="d-flex justify-content-between align-items-center mb-0">
                            <span style="color:#888; font-size:13px;">
                                <i class="bi bi-diagram-3"></i> SECTOR
                            </span>
                            <span>
                                {{ strtoupper($biggestDeal->sector) }}
                            </span>
                        </div>

                        <!-- COUNTRY -->
                        <div class="d-flex justify-content-between align-items-center">
                            <span style="color:#888; font-size:13px;">
                                <i class="bi bi-geo-alt"></i> COUNTRY
                            </span>
                            <span>
                                {{ strtoupper($biggestDeal->country) }}
                            </span>
                        </div>
                        <div style="border-top:1px solid #222; margin:15px 0;"></div>
                        <div class="d-flex justify-content-between align-items-center mb-0">
                            <span style="color:#888; font-size:13px;">
                                <i class="bi bi-link-45deg"></i> SOURCE
                            </span>
                            <span>


                                @if ($biggestDeal->url)
                                    <a href="{{ $biggestDeal->url }}" target="_blank" class="text-decoration-none">
                                        {{ $biggestDeal->source ?? 'View Source' }}
                                    </a>
                                @else
                                    <span>{{ $biggestDeal->source }}</span>
                                @endif
                            </span>
                        </div>
                    @endif
                </div>
            </div>
        </div>

        <div class="text-center mb-2 mt-4">
            <span style="color:#161E54; font-weight:700; letter-spacing:1px; font-size:24px;">
                TOP 10 AFRICAN TECH COMPANIES
            </span>
        </div>
        <div style="border-top:1px solid #e5e5e5; margin-bottom: 34px; border:1px solid #6e6d6d;"> <!-- Header -->
            <div
                style=" display:grid; grid-template-columns: 1.2fr 1fr 1fr 1fr 1fr 1fr; padding:8px 0; font-weight:600; font-size:13px; border-bottom:1px solid #e5e5e5; text-align:center; ">
                <div style="text-transform:uppercase; color:#A82323;text-align:left">Company</div>

                <div style="text-transform:uppercase; color:#A82323;text-align:left">Country</div>
                <div style="text-transform:uppercase; color:#A82323;text-align:left">Sector</div>
                <div style="text-transform:uppercase; color:#A82323;text-align:left">Last Funding</div>
                <div style="text-transform:uppercase; color:#A82323;text-align:left">Status</div>
                <div style="text-transform:uppercase; color:#A82323;text-align:left">Valuation </div>
            </div>
            <!-- Rows -->
            @foreach ($topTechCompanies as $company)
                <div
                    style="
                        display:grid;
                        grid-template-columns: 1.2fr 1fr 1fr 1fr 1fr 1fr;
                        padding:6px 0;
                        font-size:13px;
                        border-bottom:1px solid #eeeeee;
                        align-items:center;
                        text-align:left;   /* ✅ changed from center to left */
                        line-height:1.1;
                    ">

                    <div style="color:#111; text-transform:uppercase; font-weight:600;">
                        {{ $company->name }}
                    </div>



                    <div style="color:#444; text-transform:uppercase;">
                        <span class="fi fi-{{ strtolower($company->country_code) }} me-2"></span>
                        {{ $company->country }}
                    </div>

                    <div style="color:#555; text-transform:uppercase;">
                        {{ $company->sector }}
                    </div>

                    <div style="color:#111; font-weight:500;">
                        @if ($company->annual_revenue)
                            {{ number_format($company->annual_revenue) }}
                        @else
                            —
                        @endif
                    </div>

                    

                    <div style="color:#333; text-transform:uppercase; font-weight:600;">
                        @if ($company->company_type == 'public')
                            <span style="color:#0d6efd;">PRIVATE COMPANY</span>
                        @else
                            <span style="color:#6c757d;">PRIVATE STARTUP</span>
                        @endif
                    </div>
                    <div style="color:#111;">
                        @if ($company->impact_text)
                            {{ $company->impact_text }}
                        @elseif ($company->valuation >= 1)
                            ~${{ number_format($company->valuation) }}B unicorn
                        @elseif ($company->valuation > 0)
                            ~${{ number_format($company->valuation) }}B
                        @else
                            High growth
                        @endif
                    </div>
                </div>
            @endforeach
        </div>


        <br>

        <style>
            td,
            th {
                background: #000000 !important;
                color: #9b9898 !important;
                line-height: 0%;
            }

            th {
                color: blue !important;
            }

            table-like-section div {
                font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
            }
        </style>
        @if ($bottomArticles->count() > 0)
            <h3 class="mb-2 fw-bold" style="font-family: Times;">More Articles</h3>
            <div class="row g-0">
                @foreach ($bottomArticles as $article)
                    <div class="col-md-3 mb-4">
                        <div class="card h-100 shadow-sm">

                            @if ($article->article_image)
                                @php
                                    $path = $article->article_image;

                                    if (str_starts_with($path, 'uploads/')) {
                                        $imageUrl = asset($path);
                                    } else {
                                        $imageUrl = asset('storage/' . $path);
                                    }
                                @endphp

                                <img src="{{ $imageUrl }}" class="card-img-top"
                                    style="height:300px !important; object-fit:cover;">
                            @endif
                            <span>
                                &nbsp;{{ $article->credit ? 'Image Credit: ' . $article->credit : '' }}
                            </span>
                            <div class="card-body d-flex flex-column">
                                <h5 class="fw-bold">
                                    <a href="{{ route('articles.show', $article->id) }}"
                                        class="text-dark text-decoration-none">
                                        {{ $article->title }}
                                    </a>
                                </h5>
                                <span class="text-muted small">
                                    By {{ $article->user->name ?? 'Admin' }} |
                                    {{ $article->created_at->format('F j, Y') }} <br> Reading Time:
                                    {{ $article->reading_time }} min
                                </span>
                                <span class="mb-1 lead">
                                    {{ Str::limit(strip_tags($article->content), 100) }}
                                </span>
                                <a href="{{ route('articles.show', $article->id) }}"
                                    class="btn btn-outline-light bg-success mt-auto">
                                    READ FULL ARTICLE
                                </a>
                            </div>

                        </div>
                    </div>
                @endforeach
            </div>
        @endif
        <div class="d-flex justify-content-center mt-4">
            {{ $articles->links('pagination::bootstrap-5') }}
        </div>

    </div>

@endsection