@extends('layouts.app')

@section('content')
    @include('partials.navbar')
    <style>
        body {
            background-color: #efefed;

        }

        .container-custom {
            max-width: 1400px;
            margin: auto;
        }

        .card-clean {

            border-radius: 10px;
            padding: 20px;
            border: 1px solid #e5e5e5;
        }

        .tag {
            font-size: 12px;
            padding: 4px 8px;
            border-radius: 5px;
            background: #eee;
            margin-right: 5px;
        }

        .sidebar-card {
            background: #fff;
            border-radius: 10px;
            padding: 20px;
            border: 1px solid #e5e5e5;
            text-align: center;
        }

        .logo-box {
            width: 120px;
            height: 120px;

            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
            margin: auto;
            border-radius: 10px;
        }

        .meta-label {
            font-weight: 600;
            color: #555;
        }

        .bgo {
            border: 1px solid #e5e5e5;
        }
    </style>
    <div class="container mt-4">
        <!-- rest of your page -->
        <div class="container-custom mt-4 mb-4">
            <div class="row"
                style="border-right:2px dotted rgb(195, 193, 193); border-bottom:2px dotted rgb(195, 193, 193);border-left:2px dotted rgb(195, 193, 193)">
                <div class="col-md-9" style="border-right:2px dotted rgb(195, 193, 193)">

                    <div class="d-flex align-items-start gap-3 mb-3">
                        <div class="flex-grow-1">
                            <h2 class="mb-1 fw-bold" style="font-size:40px;">
                                {{ $fund->startup_name }}
                            </h2>
                            <div class="d-flex justify-content-between align-items-center mb-3">
                                <span style="font-size: 20px">
                                    {{ $fund->title }}
                                </span>

                                @if ($fund->flag)
                                    <img src="{{ asset($fund->flag) }}" width="60" height="50">
                                @endif
                            </div>
                            <p class="text-muted mb-2" style="font-size:17px;color: #0B2D72 !important"><i
                                    class="fa-solid fa-street-view"></i>

                                {{ $fund->city }},
                                {{ $fund->country }}
                            </p>

                            <!-- FLEX ROW -->
                            <div class="d-flex justify-content-between align-items-center">

                                <!-- LEFT -->
                                <div class="d-flex gap-1 flex-wrap">
                                    <span class="tag"
                                        style="color:coral;font-size:16px;background-color:white">{{ $fund->stage }}</span>
                                    <span class="tag"
                                        style="color:rgb(17, 104, 17);font-size:16px;background-color:white">{{ $fund->sector }}</span>
                                    <span class="tag"
                                        style="color:rgb(32, 155, 221);font-size:16px;background-color:white">{{ $fund->country }}</span>
                                    <span class="tag"
                                        style="color:rgb(221, 32, 205);font-size:16px;background-color:white">Growth trend:
                                        {{ $fund->growth_trend }}</span>
                                </div>
                                <!-- RIGHT -->
                                <div class="text-end">
                                    <i class="fas fa-globe"></i>
                                    <a href="{{ $fund->source_url }}" target="_blank" style="text-decoration:none;">
                                        {{ $fund->source_url }}
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <hr>
                    <!-- DESCRIPTION -->
                    <div class="car-clean">

                        {{-- 📝 EDITOR STORY --}}
                        <div class="card-clean mb-3">
                            <h5> Editor’s Take </h5>
                            <p class="lead" style="font-weight: 100">{{ $fund->description }}</p>
                        </div>
                        <hr>
                        {{-- 🔥 AI DEEP INSIGHT --}}
                        @if ($fund->ai_insight)
                            <div class="card-clean">
                                <h5> AI's Take</h5>
                                <p class="lead" style="font-weight: 100">{{ $fund->ai_insight }}</p>
                            </div>
                        @endif
                        {{-- 🧠 AI SUMMARY --}}
                        @if ($fund->ai_summary)
                            <div class="card-clean mb-3">
                                <h5>AI Quick Insight on this news</h5>
                                <p class="lead" style="font-weight: 100">{!! $fund->ai_summary !!}</p>
                            </div>
                        @endif

                        <h5 style="margin-left: 12px">🔥 Key Takeaways</h5>
                        <ul>
                            @foreach (explode('-', $fund->ai_takeaways) as $item)
                                @if (trim($item))
                                    <li class="lead">{{ trim($item) }}</li>
                                @endif
                            @endforeach
                        </ul>
                        <h5 style="margin-left: 12px">🎯 AI Confidence</h5>
                        {{-- <div class="progress" style="height:20px;">
                        <div class="progress-bar bg-success" style="width: {{ $fund->ai_confidence }}">
                            {{ $fund->ai_confidence }}
                        </div>


                    </div> --}}
                        <div class="progress" style="height: 26px;width:40%; border-radius:0px">
                            <div class="progress-bar" style="width: {{ $fund->ai_confidence }}; background-color: #000;">
                                {{ $fund->ai_confidence }}
                            </div>
                        </div>
                    </div>
                    
                    <hr>
                    @include('admin.partials.analytics')
                    <hr class="bgo">
                    @if ($related->count())
                        <div class="mt-5">
                            <h4 class="mb-4 fw-bold">🔥 Related Startups</h4>
                            <div class="row g-2">
                                @foreach ($related as $item)
                                    <div class="col-md-3 mb-4">
                                        <div class="card h-100 shadow-sm p-3 g-1" style="border-radius:1px;">
                                            <div class="d-flex align-items-center gap-2 mb-2">
                                                <img src="{{ $item->logo ? asset($item->logo) : asset('images/default-logo.png') }}"
                                                    style="width:30px;height:30px;object-fit:contain;border-radius:8px;">
                                                <!-- NAME -->
                                                <div>
                                                    <h6 class="mb-0 fw-bold" style="text-align: center;">
                                                        {{ $item->startup_name }}<br>
                                                        <span style="font-weight: 100; ">{{ $item->sector }}</span>
                                                    </h6>
                                                </div>
                                            </div>
                                            <!-- FUNDING -->
                                            <p class="mb-2 fw-semibold" style="text-align: center;">
                                                💰 ${{ number_format($item->funding_amount) }}
                                            </p>
                                            <!-- DESCRIPTION -->
                                            <span style="font-size:14px; color:#555;">
                                                {{ \Illuminate\Support\Str::limit($item->description, 90) }}
                                            </span>
                                            <small class="text-muted mb-3" style="text-align: center;">

                                                • {{ $item->city }} {{ $item->country }}
                                            </small>
                                            <!-- BUTTON -->
                                            <a href="{{ route('fund.show', $item->id) }}"
                                                class="btn btn-dark btn-sm mt-auto">
                                                View Details →
                                            </a>
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                        </div>
                    @endif
                    <h5 class="mt-5">Other Sectors</h5>
                    <div class="row g-1">
                        @foreach ($otherSectors as $item)
                            <div class="col-md-3 mb-4">

                                <div class="card h-100 shadow-sm p-3 g-1" style="border-radius:1px;">

                                    <!-- HEADER -->
                                    <div class="d-flex align-items-center gap-2 mb-2">

                                        <!-- LOGO -->

                                        <img src="{{ $item->logo ? asset($item->logo) : asset('images/default-logo.png') }}"
                                            style="width:30px;height:30px;object-fit:contain;border-radius:8px;">


                                        <!-- NAME -->
                                        <div>
                                            <h6 class="mb-0 fw-bold text-center">
                                                {{ $item->startup_name }}

                                            </h6>

                                            <small class="text-muted">
                                                {{ $item->sector }} • {{ $item->country }}
                                            </small>
                                        </div>

                                    </div>

                                    <!-- FUNDING -->
                                    <p class="mb-2 fw-semibold">
                                        💰 ${{ number_format($item->funding_amount) }}
                                    </p>

                                    <!-- DESCRIPTION -->
                                    <p style="font-size:14px; color:#555;">
                                        {{ \Illuminate\Support\Str::limit($item->description, 90) }}
                                    </p>

                                    <!-- BUTTON -->
                                    <a href="{{ route('fund.show', $item->id) }}" class="btn btn-dark btn-sm mt-auto">
                                        View Details →
                                    </a>

                                </div>

                            </div>
                        @endforeach
                    </div>
                </div>
                <!-- RIGHT SIDEBAR -->
                <div class="col-md-3">
                    <div class="sidebar-card">
                        <div class="logo-box mb-3">
                            <img src="{{ $fund->logo ? asset($fund->logo) : asset('images/default-logo.png') }}"
                                style="width:170px; height:100px !important; object-fit:contain; border-radius:0px;">
                        </div>
                        <h5>{{ $fund->startup_name }}</h5>
                        <hr>
                        <div class="mt-3">
                            <div class="d-flex justify-content-between mb-1">
                                <span class="meta-label">Founded</span>
                                <span>{{ date('Y', strtotime($fund->founded_date)) }}</span>
                            </div>
                            <div class="d-flex justify-content-between mb-1">
                                <span class="meta-label">Funding</span>
                                <span>${{ number_format($fund->funding_amount) }}</span>
                            </div>
                            <div class="d-flex justify-content-between mb-1">
                                <span class="meta-label">Stage</span>
                                <span>{{ $fund->stage }}</span>
                            </div>
                            {{-- <div class="d-flex justify-content-between mb-1">
                                <span class="meta-label">Date</span>
                                <span>{{ $fund->date }}</span>
                            </div> --}}

                            <div class="d-flex justify-content-between mb-1">

                                <span class="meta-label">Growth</span>
                                @if ($fund->growth_trend == 'up')
                                    <span><i class="fa fa-arrow-up text-success"></i> Expanding</span>
                                @elseif($fund->growth_trend == 'down')
                                    <span><i class="fa fa-arrow-down text-danger"></i>Declining</span>
                                @else
                                    <span><i class="fa fa-arrows-left-right text-secondary"></i> Stable</span>
                                @endif
                            </div>

                            <div class="d-flex justify-content-between mb-1">
                                <span class="meta-label">Business Model</span>
                                <span>{{ $fund->sector }}</span>
                            </div>
                            <div class="d-flex justify-content-between mb-1">
                                <span class="meta-label">Lead Investor</span>
                                <span>{{ $fund->investors }}</span>
                            </div>
                            <div class="d-flex justify-content-between mb-1">
                                <span class="meta-label">Sector</span>
                                <span>{{ $fund->business_model }}</span>
                            </div>
                            <div class="d-flex justify-content-between mb-1">
                                <span class="meta-label">City</span>
                                <span>{{ $fund->city }}</span>
                            </div>
                            <div class="d-flex justify-content-between mb-1">
                                <span class="meta-label">Country</span>
                                <span>{{ $fund->country }}</span>
                            </div>
                        </div>
                        <a href="{{ $fund->source_url }}" target="_blank" class="btn btn-dark w-100 mt-3">
                            Visit Website
                        </a>
                    </div>
                    <br>
                    <hr>
                    <div class="row mt-3">
                        @foreach ($fund->founders as $founder)
                            <div class="col-md-12 mb-3">
                                <div class="d-flex align-items-center bg-white p-2">
                                    <div class="me-3 pe-1 border-end">
                                        <img src="{{ asset($founder->image) }}"
                                            style="width:60px;height:60px;object-fit:cover;">
                                    </div>
                                    <div>
                                        <h5 class="mb-1" style="font-size: 12px;text-transform:uppercase">
                                            {{ $founder->name }}</h5>
                                        {{ $founder->role }}<br>
                                        @if ($founder->status)
                                            <span class="badg ">🟢Active</span>
                                        @else
                                            <span class="badg ">🔴Inactive</span>
                                        @endif <br>
                                        @if ($founder->linkedin)
                                            <a href="{{ $founder->linkedin }}" target="_blank">
                                                <i class="fab fa-linkedin" style="font-size: 24px"></i>
                                            </a>
                                        @endif
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    </div>
                    <hr>
                    @if ($fund->news->isNotEmpty())
                        <h5 class="mt-4">{{ $fund->startup_name }} in the Spotlight</h5>
                    @endif
                    @foreach ($fund->news as $news)
                        <div class="mb-3">
                            <a href="{{ $news->url }}" target="_blank" style="text-decoration: none">
                                {{ $news->title }}
                            </a>
                            <br>
                            <small>
                                {{ $news->source ?? 'Unknown Source' }} •
                                <span style="float: righ">
                                    {{ \Carbon\Carbon::parse($news->published_date)->format('M d, Y') }}</span>
                            </small>
                        </div>
                    @endforeach
                </div>
            </div>
        </div>
        <br>
        <br>
    @endsection