@extends('layouts.app')
@push('styles')
    <link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
@endpush
@section('content')
    @include('partials.navbar')
    <div class="container mt-5">
        <div class="card border-0 mb-4">
            <div class="card-body d-flex flex-column flex-md-row justify-content-between align-items-md-center">
                <div>
                    <h2 class="fw-bold mb-2">{{ $investor->name }}</h2>
                    <span>{{ $investor->city ?? '' }} {{ $investor->country ? ', ' . $investor->country : '' }}</span>
                </div>
                <div class="mt-3 mt-md-0 text-md-end">
                    @if ($investor->is_active)
                        <span class="badge bg-success px-3 py-2">Active Investor</span>
                    @else
                        <span class="badge bg-danger px-3 py-2">Inactive</span>
                    @endif
                </div>
            </div>
        </div>
        <div class="row g-4 p-3" style="background: rgb(250, 250, 248);">
            <div class="col-lg-4">
                <div class="card border-0  text-center p-4">
                    <div class="mx-auto mb-3 d-flex align-items-center justify-content-center rounded-circle bg-dark text-white"
                        style="width:130px;height:130px;font-size:28px;">
                        <img src="{{ asset($investor->logo) }}">
                    </div>
                    <div class="d-flex flex-wrap align-items-center gap-2 mb-2">
                        <span class="badge bg-dark">
                            {{ $investor->type ?? 'Investor' }}
                        </span>
                        @if ($investor->industry)
                            <span class="badge bg-danger text-dark">
                                {{ $investor->industry }}
                            </span>
                        @endif
                        @if ($investor->stage_focus)
                            @foreach (explode(',', $investor->stage_focus) as $stage)
                                <span class="badge bg-primary">
                                    {{ trim($stage) }}
                                </span>
                            @endforeach
                        @endif
                    </div>
                </div>
                <div class="card border-0 mt-4">
                    <div class="card-body">
                        <h6 class="fw-bold mb-3">Quick Info</h6>
                        <div class="d-flex justify-content-between mb-2">
                            <small class="text-muted">Location</small>
                            <span class="fw-semibold">{{ $investor->city ?? '' }}
                                {{ $investor->country ? ', ' . $investor->country : '' }}</span>
                        </div>
                        <div class="d-flex justify-content-between mb-2">
                            <small class="text-muted">Investor Type</small>
                            <span class="fw-semibold">{{ $investor->type ?? 'N/A' }}</span>
                        </div>
                        <div class="d-flex justify-content-between mb-2">
                            <small class="text-muted">Fund Size</small>
                            <span class="fw-semibold">{{ $investor->fund_size ?? 'N/A' }}</span>
                        </div>
                        <div class="d-flex justify-content-between mb-2">
                            <small class="text-muted">Portfolio Size</small>
                            <span class="fw-semibold">{{ $investor->portfolio_size ?? 'N/A' }}</span>
                        </div>
                    </div>

                    <div class="card border-0 mb-4 mt-1">
                        <div class="social-icons d-flex justify-content-center gap-2 mt-3">
                            @if ($investor->twitter)
                                <a href="{{ $investor->twitter }}" target="_blank" class="social-icon">
                                    <i class="bi bi-twitter"></i>
                                </a>
                            @endif
                            @if ($investor->facebook)
                                <a href="{{ $investor->facebook }}" target="_blank" class="social-icon">
                                    <i class="bi bi-facebook"></i>
                                </a>
                            @endif
                            @if ($investor->linkedin)
                                <a href="{{ $investor->linkedin }}" target="_blank" class="social-icon">
                                    <i class="bi bi-linkedin"></i>
                                </a>
                            @endif
                            @if ($investor->website)
                                <a href="{{ $investor->website }}" target="_blank" class="social-icon">
                                    <i class="bi bi-globe"></i>
                                </a>
                            @endif
                        </div>
                        {{-- <div class="d-flex justify-content-between mb-2 mt-4 m-2">
                        <small class="text-muted">Website</small>
                        <span>
                            @if ($investor->website)
                                <a href="{{ $investor->website }}" target="_blank" class="p-2">Open Link</a>
                            @else
                                N/A
                            @endif
                        </span>
                    </div> --}}
                    </div>
                </div>
            </div>
            <div class="col-lg-8 p-4" style="background: rgb(250, 249, 249)">
                <div class="card border-0  mb-4">
                    <div class="card-body">
                        <h5 class="fw-bold mb-3">About Investor</h5>
                        <p class="text-muted mb-0">
                            {{ $investor->description ?? 'No description available for this investor.' }}
                        </p>
                    </div>
                </div>
                <div class="card border-0  mb-4">
                    <div class="card-body">
                        <h5 class="fw-bold mb-3">Investment Overview</h5>
                        <div class="row text-center">
                            <div class="col-md-4 mb-3">
                                <div class="p-3 bg-light ">
                                    <h4 class="fw-bold mb-1">
                                        {{ $investor->funds->count() }}
                                    </h4>
                                    <small class="text-muted">Total Investments</small>
                                </div>
                            </div>
                            <div class="col-md-4 mb-3">
                                <div class="p-3 bg-light ">
                                    <h4 class="fw-bold mb-1">
                                        ${{ number_format($investor->funds->sum('funding_amount')) }}
                                    </h4>
                                    <small class="text-muted">Total Funding</small>
                                </div>
                            </div>
                            <div class="col-md-4 mb-3">
                                <div class="p-3 bg-light ">
                                    <h4 class="fw-bold mb-1">
                                        {{ $investor->portfolio_size ?? 'N/A' }}
                                    </h4>
                                    <small class="text-muted">Active Startups</small>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Recent Activity (DYNAMIC) -->
                <div class="card border-0  mb-3">
                    <div class="card-body">
                        <h5 class="fw-bold mb-3">Recent Activity</h5>

                        @if ($investor->funds->count())
                            <ul class="list-group list-group-flush">

                                @foreach ($investor->funds->take(5) as $fund)
                                    <li class="list-group-item d-flex justify-content-between align-items-center">
                                        <div>
                                            <strong>{{ $fund->startup->name ?? $fund->startup_name }}</strong><br>
                                            <small class="text-muted">{{ $fund->funding_stage }}</small>
                                        </div>
                                        <span class="badge bg-success">
                                            ${{ number_format($fund->funding_amount) }}
                                        </span>
                                    </li>
                                @endforeach

                            </ul>
                        @else
                            {{ $investor->recent_activity }}
                        @endif

                    </div>
                </div>



            </div>
            <div class="container mt-5">
                {{-- <div class="d-flex justify-content-between align-items-center mb-4">
                    <div>
                        <h3 class="fw-bold mb-1">🌍 Investor Funding</h3>
                        <small class="text-muted">Track startup investments across countries</small>
                    </div>
                </div> --}}
                {{-- <div class="row g-3 mb-4">

                    <div class="col-md-3">
                        <div class="stat-minimal">
                            <div class="stat-label">Total Funding</div>
                            <div class="stat-value">${{ number_format($totalFunding) }}</div>
                        </div>
                    </div>

                    <div class="col-md-3">
                        <div class="stat-minimal">
                            <div class="stat-label">Total Deals</div>
                            <div class="stat-value">{{ $totalDeals }}</div>
                        </div>
                    </div>

                    <div class="col-md-3">
                        <div class="stat-minimal">
                            <div class="stat-label">Countries</div>
                            <div class="stat-value">{{ $countriesCount }}</div>
                        </div>
                    </div>

                    <div class="col-md-3">
                        <div class="stat-minimal">
                            <div class="stat-label">Avg Deal</div>
                            <div class="stat-value">${{ number_format($avgDeal, 2) }}</div>
                        </div>
                    </div>

                </div> --}}


                <div class="card border-0 rounded-4">
                    <h2 style="text-align: center">Africa Tech Investment Landscape</h2>
                    <div class="card-body p-4">

                        <div class="table-responsive">

                            <table class="table align-middle table-hover custom-table">
                                <thead>
                                    <tr>
                                        <th>#</th>
                                        <th>Lead Investor</th>
                                        <th>Recipient</th>
                                        <th>Industry</th>
                                        <th>Country</th>
                                        <th>Company Type</th>
                                        <th>Year</th>
                                        <th>Round</th>
                                        <th>Amount</th>
                                        <th>Investor Website</th>

                                    </tr>
                                </thead>

                                <tbody>
                                    @forelse ($fundings as $key => $item)
                                        <tr>
                                            <td class="text-muted">{{ $key + 1 }}</td>
                                            <td>
                                                <div class="fw-semibold">{{ $item->investor_name }}</div>
                                            </td>
                                            <td>
                                                <span class="text-primary fw-semibold">
                                                    {{ $item->company_name }}
                                                </span>
                                            </td>
                                            <td>
                                                <span class="p-1">
                                                    {{ $item->industry }}
                                                </span>
                                            </td>
                                            <td>
                                                <span class="p-1">
                                                    {{ $item->country }}
                                                </span>
                                            </td>

                                            <td>
                                                <span class="p-1">
                                                    {{ $item->company_type }}
                                                </span>
                                            </td>
                                            <td>
                                                <span class="year-badge">
                                                    {{ $item->funding_year }}
                                                </span>
                                            </td>
                                            <td>
                                                <span class="badge round-badge">
                                                    {{ $item->funding_round }}
                                                </span>
                                            </td>
                                            <td>
                                                <span class="fw-bold text-success">
                                                    ${{ number_format($item->funding_amount) }}
                                                </span>
                                            </td>
                                            <td>
                                                @if ($item->company_website)
                                                    <a href="{{ $item->company_website }}" target="_blank"
                                                        style="text-decoration: none">
                                                        Visit Website
                                                    </a>
                                                @else
                                                    N/A
                                                @endif
                                            </td>
                                            {{-- <td>
                                                @if ($investor->website)
                                                    <a href="{{ $investor->website }}" target="_blank"
                                                        style="text-decoration: none">
                                                        VIEW
                                                    </a>
                                                @endif
                                            </td> --}}
                                        </tr>
                                    @empty
                                        <tr>
                                            <td colspan="7" class="text-center text-muted py-4">
                                                No funding records found
                                            </td>
                                        </tr>
                                    @endforelse
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
            <br>
            <div class="mb-3 p-3">
                <br>
                <h2 style="text-align:center">Tracking Africa’s Startup Ecosystem Growth</h2>
                <button onclick="setChartType('bar')" class="btn btn-primary btn-sm shadow-none">Bar</button>
                <button onclick="setChartType('line')" class="btn btn-secondary btn-sm shadow-none">Line</button>
            </div>

            <canvas id="fundingChart"></canvas>
            <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

            <script>
                const years = @json($years);
                const funds = @json($funds);

                let chartType = 'bar'; // default

                const ctx = document.getElementById('fundingChart').getContext('2d');

                const chartConfig = {
                    type: chartType,
                    data: {
                        labels: years,
                        datasets: [{
                            label: 'Total Funding',
                            data: funds,
                            borderWidth: 2,
                            borderColor: 'rgb(111, 207, 151)', // ✅ add this
                            backgroundColor: 'rgb(47, 160, 132)' // optional (light red fill)
                        }]
                    },
                    options: {
                        responsive: true,
                        plugins: {
                            legend: {
                                display: true
                            },
                            tooltip: {
                                callbacks: {
                                    label: function(context) {
                                        return formatCurrency(context.raw);
                                    }
                                }
                            }
                        },
                        scales: {
                            y: {
                                ticks: {
                                    callback: function(value) {
                                        return formatCurrency(value);
                                    }
                                },
                                beginAtZero: true
                            }
                        }
                    }
                };

                let fundingChart = new Chart(ctx, chartConfig);

                // Toggle chart type
                function setChartType(type) {
                    fundingChart.destroy();

                    fundingChart = new Chart(ctx, {
                        ...chartConfig,
                        type: type
                    });
                }

                // Currency formatter ($M / $B)
                function formatCurrency(value) {
                    if (value >= 1e9) {
                        return '$' + (value / 1e9).toFixed(1) + 'B';
                    } else if (value >= 1e6) {
                        return '$' + (value / 1e6).toFixed(1) + 'M';
                    } else if (value >= 1e3) {
                        return '$' + (value / 1e3).toFixed(1) + 'K';
                    }
                    return '$' + value;
                }
            </script>
            <style>
                #map {
                    height: 500px;
                    border-radius: 16px;
                    overflow: hidden;

                }

                .map-side-card {
                    background: #fff;
                    padding: 15px;
                    border-radius: 12px;
                    border: 1px solid #eee;
                }

                .map-side-card ul {
                    list-style: none;
                    padding: 0;
                    margin: 0;
                }

                .map-side-card li {
                    padding: 6px 0;
                    font-size: 14px;
                    border-bottom: 1px solid #f1f1f1;
                }

                .map-legend {
                    background: #fff;
                    padding: 12px;
                    border-radius: 12px;
                    border: 1px solid #eee;
                }

                .map-legend div {
                    display: flex;
                    align-items: center;
                    font-size: 13px;
                    margin-bottom: 6px;
                }

                .map-legend span {
                    width: 18px;
                    height: 10px;
                    display: inline-block;
                    margin-right: 8px;
                    border-radius: 3px;
                }
            </style>
            <div class="mt-5">


                {{-- <div class="row">
                    <div class="col-md-9">
                        <div id="map" style="height:500px;"></div>
                    </div>

                    <div class="col-md-3">
                        <div class="map-side-card">
                            <h6>Top Countries</h6>
                            <ul id="topCountries"></ul>
                        </div>

                        <div class="map-legend mt-3">
                            <h6>Legend</h6>
                            <div><span style="background:#08306b"></span> 10M+</div>
                            <div><span style="background:#2171b5"></span> 1M+</div>
                            <div><span style="background:#6baed6"></span> 100K+</div>
                            <div><span style="background:#c6dbef"></span> Low</div>
                        </div>
                    </div>
                </div> --}}
                <script>
                    const countryData = @json($countryFunds);

                    const map = L.map('map', {
                        zoomControl: false,
                        attributionControl: false
                    }).setView([1.5, 20], 3);

                    L.tileLayer('https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png')
                        .addTo(map);

                    function getColor(value) {
                        return value > 10000000 ? '#08306b' :
                            value > 1000000 ? '#2171b5' :
                            value > 100000 ? '#6baed6' :
                            '#c6dbef';
                    }

                    function style(feature) {
                        // let iso = feature.properties.ISO_A2; 
                        let iso = feature.properties.ISO_A3;
                        let value = countryData[iso] || 0;

                        return {
                            fillColor: getColor(value),
                            weight: 1,
                            color: '#fff',
                            fillOpacity: 0.75
                        };
                    }

                    function onEachFeature(feature, layer) {
                        let iso = feature.properties.ISO_A2;
                        let name = feature.properties.ADMIN;
                        let value = countryData[iso] || 0;

                        layer.bindTooltip(
                            `<strong>${name}</strong><br>$${value.toLocaleString()}`, {
                                sticky: true
                            }
                        );

                        layer.on({
                            mouseover: function() {
                                layer.setStyle({
                                    weight: 2,
                                    fillOpacity: 0.9
                                });
                            },
                            mouseout: function() {
                                geojson.resetStyle(layer);
                            }
                        });
                    }

                    let geojson;

                    fetch('https://raw.githubusercontent.com/datasets/geo-countries/master/data/countries.geojson')
                        .then(res => res.json())
                        .then(data => {
                            console.log(data.features[0].properties);
                        });

                    // Top countries list
                    let sorted = Object.entries(countryData)
                        .sort((a, b) => b[1] - a[1])
                        .slice(0, 5);

                    let list = document.getElementById('topCountries');

                    sorted.forEach(item => {
                        let li = document.createElement('li');
                        li.innerHTML = `<strong>${item[0]}</strong><br>$${item[1].toLocaleString()}`;
                        list.appendChild(li);
                    });
                </script>
                {{-- <script>
                    
                    const countryData = @json($countryFunds);

                    const map = L.map('map', {
                        zoomControl: false,
                        attributionControl: false
                    }).setView([1.5, 20], 3);

                   
                    L.tileLayer('https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png').addTo(map);

                
                    function getColor(value) {
                        return value > 10000000 ? '#08306b' :
                            value > 1000000 ? '#2171b5' :
                            value > 100000 ? '#6baed6' :
                            '#c6dbef';
                    }

                  
                    function style(feature) {
                        let name = feature.properties.ADMIN;
                        let value = countryData[name] || 0;

                        return {
                            fillColor: getColor(value),
                            weight: 1,
                            color: '#fff',
                            fillOpacity: 0.75
                        };
                    }

                   
                    function onEachFeature(feature, layer) {
                        let name = feature.properties.ADMIN;
                        let value = countryData[name] || 0;

                        layer.bindTooltip(
                            `<strong>${name}</strong><br>$${value.toLocaleString()}`, {
                                sticky: true
                            }
                        );

                        layer.on({
                            mouseover: function() {
                                layer.setStyle({
                                    weight: 2,
                                    fillOpacity: 0.9
                                });
                            },
                            mouseout: function() {
                                geojson.resetStyle(layer);
                            }
                        });
                    }

                    let geojson;

                    
                    fetch('https://raw.githubusercontent.com/worldmap/africa.geo.json/master/africa.geo.json')
                        .then(res => res.json())
                        .then(data => {
                            geojson = L.geoJson(data, {
                                style: style,
                                onEachFeature: onEachFeature
                            }).addTo(map);
                        });

                  
                    let sorted = Object.entries(countryData)
                        .sort((a, b) => b[1] - a[1])
                        .slice(0, 5);

                    let list = document.getElementById('topCountries');

                    sorted.forEach(item => {
                        let li = document.createElement('li');
                        li.innerHTML = `<strong>${item[0]}</strong><br>$${item[1].toLocaleString()}`;
                        list.appendChild(li);
                    });
                  
                </script> --}}
            </div>

            <style>
                body {
                    background: #f4f6f9;
                    /* font-family: 'Inter', 'Segoe UI', sans-serif; */
                    font-family: 'Times';
                }

                .custom-table {
                    border-collapse: separate;
                    border-spacing: 0 10px;
                }

                .custom-table thead th {
                    border: none;
                    font-size: 13px;
                    text-transform: uppercase;
                    letter-spacing: 0.5px;
                    color: brown;
                }

                .custom-table tbody tr {
                    background: #ffffff;
                    border-radius: 12px;
                    transition: all 0.25s ease;
                    /* box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04); */
                }

                .custom-table tbody tr:hover {
                    transform: translateY(-3px);
                    /* box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08); */
                }

                .custom-table td {
                    border: none;
                    padding: 8px;
                    vertical-align: middle;
                }

                .year-badge {
                    background: #eef2ff;
                    color: #4f46e5;
                    padding: 4px 8px;
                    border-radius: 20px;
                    font-size: 13px;
                    font-weight: 500;
                }

                .round-badge {
                    background: #e0f7fa;
                    color: #00796b;
                    padding: 4px 10px;
                    border-radius: 20px;
                    font-size: 13px;
                    font-weight: 500;
                }
            </style>
        </div>
        <style>
            .social-icon {
                width: 46px;
                height: 46px;
                border: 1px solid #144009 !important;
                /* very thin border */
                border-radius: 50%;
                display: flex;
                align-items: center;
                justify-content: center;
                color: #666;
                text-decoration: none;
                font-size: 15px;
                background: transparent;
                /* no background */
                transition: all 0.25s ease;
                border: 1px solid #d9d7d7;
            }

            .social-icons i {
                font-size: 20px;
                margin-bottom: 8px;
            }

            /* Hover: still no fill, just subtle effect */
            .social-icon:hover {
                border-color: #000;
                color: #000;
                transform: scale(1.05);
            }
        </style>
    </div>
    <br><br>


    @push('scripts')
        <script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
    @endpush
@endsection