@extends('layouts.app')
@section('content')
    @include('partials.navbar')
    <div class="container mt-4">
        <h2 class="mb-4 fw-bold" style="text-align: center">Africa Startup Funding</h2>
        <div class="row">
            <form method="GET" class="row justify-content-center mb-4">
                <div class="mb-4 text-center">
                    <div class="mb-2">
                        <strong class="me-2">Country:</strong>
                        <a href="{{ route('fund.index') }}" class="filter-pill {{ request('country') ? '' : 'active' }}">
                            All
                        </a>
                        @foreach ($countries as $c)
                            <a href="{{ route('fund.index', array_merge(request()->all(), ['country' => $c])) }}"
                                class="filter-pill {{ request('country') == $c ? 'active' : '' }}">
                                {{ $c }}
                            </a>
                        @endforeach
                    </div>
                    <div class="mb-2">
                        <strong class="me-2">Sector:</strong>
                        <a href="{{ route('fund.index', request()->except('sector')) }}"
                            class="filter-pill {{ request('sector') ? '' : 'active' }}">
                            All
                        </a>
                        @foreach ($sectors as $s)
                            <a href="{{ route('fund.index', array_merge(request()->all(), ['sector' => $s])) }}"
                                class="filter-pill {{ request('sector') == $s ? 'active' : '' }}">
                                {{ $s }}
                            </a>
                        @endforeach
                    </div>
                    <div>
                        <strong class="me-2">Stage:</strong>
                        <a href="{{ route('fund.index', request()->except('stage')) }}"
                            class="filter-pill {{ request('stage') ? '' : 'active' }}">
                            All
                        </a>
                        @foreach ($stages as $st)
                            <a href="{{ route('fund.index', array_merge(request()->all(), ['stage' => $st])) }}"
                                class="filter-pill {{ request('stage') == $st ? 'active' : '' }}">
                                {{ $st }}
                            </a>
                        @endforeach
                    </div>
                </div>
                <div class="col-md-3 d-flex gap-2">
                    <button class="btn btn-dark w-100">Filter</button>

                    <a href="{{ route('fund.index') }}" class="btn btn-secondary w-100">
                        Reset
                    </a>
                </div>
            </form>
            <style>
                .filter-pill {
                    display: inline-block;
                    padding: 6px 14px;
                    margin: 4px;
                    border-radius: 20px;
                    background: #f1f1f1;
                    color: #333;
                    text-decoration: none;
                    font-size: 14px;
                    transition: 0.2s ease;
                }

                .filter-pill:hover {
                    background: #ddd;
                }
                .filter-pill.active {
                    background: #000;
                    color: #fff;
                }
            </style>
            <div class="row">
                <div class="col-md-9 p-2" style="background: whitesmoke">
                    <div class="row g-1">
                        @foreach ($funds as $fund)
                            <div class="col-md-4 mb-4">
                                <div class="card h-100 shadow-sm">
                                    <img src="{{ $fund->logo ? asset($fund->logo) : asset('images/default-logo.png') }}"
                                        style="width:100px; height:80px !important; object-fit:contain; border-radius:0px; margin:1px auto;margin-top:12px">

                                    <div class="card-body d-flex flex-column">
                                        <span class="text-muted small mb-0"
                                            style="text-align:center; text-transform:uppercase; color:brown !important; text-shadow:3px 2px 3px rgba(0,0,0,.5);">
                                            {{ $fund->sector }}
                                        </span>

                                        <h5 class="fw-bold" style="text-align:center">
                                            {{ $fund->startup_name }} raises ${{ $fund->funding_amount }}
                                        </h5>

                                        <span style="text-align:center; text-transform:uppercase">
                                            {{ $fund->city }} {{ $fund->country }}
                                        </span>
                                        <p class="flex-grow-1">
                                            {{ \Illuminate\Support\Str::limit($fund->ai_summary ?? $fund->description, 100) }}
                                        </p>
                                        <a href="{{ route('fund.show', $fund->id) }}" class="btn btn-dark btn-sm mt-auto">
                                            Read More →
                                        </a>
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    </div>
                    @include('components.investors')          
                </div>  
                <div class="col-md-3 p-2" style="background: whitesmoke">
                    <form method="GET" action="{{ route('fund.index') }}">
                        <input type="text" name="search" class="form-control mb-2 " placeholder="Search startups...">
                        <button class="btn btn-sm btn-dark w-100" style="margin-left: 0px">Search →</button>
                    </form>
                    <h5 class="mb-3 mt-4">🔥 Trending Startups</h5>
                    <div class="table-responsive">
                        <table class="table table-sm table-hover align-middle">
                            <thead class="table-light">
                                <tr>
                                    <th>#</th>
                                    <th>Startup</th>
                                    <th>Funding</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse ($trendingFunds as $index => $item)
                                    <tr>
                                        <td>{{ $index + 1 }}</td>
                                        <td>
                                            <a href="{{ route('fund.show', $item->id) }}" class="text-decoration-none">
                                                {{ $item->startup_name }}
                                            </a>
                                        </td>
                                        <td>
                                            ${{ number_format($item->funding_amount) }}
                                        </td>
                                    </tr>
                                @empty
                                    <tr>
                                        <td colspan="3" class="text-center text-muted">
                                            No trending startups available
                                        </td>
                                    </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                    <h5 class="mb-3 mt-5">🌍 Funding by Country</h5>
                    <div class="table-responsive">
                        <table class="table table-sm table-hover align-middle">
                            <thead class="table-light">
                                <tr>
                                    <th>#</th>
                                    <th>Country</th>
                                    <th>Total Startups</th>
                                    <th>Total Funding</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse ($countriesData as $index => $item)
                                    <tr>
                                        <td>{{ $index + 1 }}</td>
                                        <td>{{ $item->country }}</td>
                                        <td>{{ $item->total_startups }}</td>
                                        <td>${{ number_format($item->total_funding) }}</td>
                                    </tr>
                                @empty
                                    <tr>
                                        <td colspan="4" class="text-center text-muted">
                                            No data available
                                        </td>
                                    </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                    <h5 class="mb-3 mt-4" style="text-align: center; font-size:26px">Latest News</h5>
                    @forelse ($news as $newsItem)
                        <div class="mb-3 p-2 border-bottom">
                            <a href="{{ $newsItem->url }}" target="_blank"
                                style="text-decoration: none; font-weight: 500;">
                                {{ $newsItem->title }}
                            </a>
                            <br>
                            <small class="text-muted">
                                {{ $newsItem->source ?? 'Unknown Source' }} •
                                {{ \Carbon\Carbon::parse($newsItem->published_date)->format('M d, Y') }}
                            </small>
                        </div>
                    @empty
                        <p class="text-muted">No news available.</p>
                    @endforelse
                </div>
            </div>
        </div>
        @include('partials.africa-refining-map')
        <div class="d-flex justify-content-center mt-4">
            {{ $funds->links('pagination::bootstrap-5') }}
        </div>
    </div>
    <br>
    <br>
@endsection