@extends('layouts.app')
@section('head')
    <x-meta
        title="{{ $company->name }} Traffic Analytics & Market Insights | B2BSaaS.com"
        description="Check {{ $company->name }}’s traffic analytics & top pages & competitors. Insights on how {{ $company->name }} wins in the {{ @$company->category->name??'' }} software market."
        image="{{asset('b2bsaas.png')}}"
        url="{{route('company',$company->slug)}}"
    />
    @if($company->category)
        {{ Breadcrumbs::view('breadcrumbs::json-ld', 'company', $company) }}
    @endif
@endsection
@section('content')
    <div class="max-w-7xl mx-auto pb-24  px-4 sm:px-6 lg:px-8 2xl:px-0">
        @if($company->category)
        <div class="mb-5">
            {{ Breadcrumbs::render('company', $company) }}
        </div>
        @endif

        <div class="relative bg-white">
             <a
                class="cursor-pointer"
                data-fancybox="gallery"
                data-src="{{ @$company->latestMedia->external_url }}"
                href="{{ @$company->latestMedia->external_url }}"
                >
            <img class="h-56 w-full bg-gray-50 object-cover object-top lg:absolute lg:inset-y-0 lg:left-0 lg:h-full lg:w-1/2 rounded-xl border border-slate-200"
                 width="640"
                 height="424"
                src="{{ @$company->latestMedia->external_url }}"
                alt="{{$company->name}}"
                title="{{$company->name}}"
            >
            </a>
            <div class="mx-auto grid max-w-7xl lg:grid-cols-2">
                <div class="px-6 pb-24 pt-16 sm:pb-32 sm:pt-20 lg:col-start-2 lg:px-8 lg:pt-32">
                    <div class="mx-auto max-w-2xl lg:mr-0 lg:max-w-lg">
                        @if($company->category)
                            @if($company->category->parent)
                                <a href="{{route('subcategory',[$company->category->parent->slug, $company->category->slug])}}" class="text-base font-semibold leading-8 text-indigo-600">
                                    {{ @$company->category->name }}
                                </a>
                            @else
                                <a href="{{route('category',$company->category->slug)}}" class="text-base font-semibold leading-8 text-indigo-600">
                                    {{ @$company->category->name }}
                                </a>
                            @endif
                        @endif
                        <h1 class="mt-2 text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl">
                            {{ $company->name }}</h1>
                        <div class="mt-6 text-lg leading-8 text-gray-600" x-data="{ open: false }">
                            <div class="line-clamp-4" :class="{ 'line-clamp-4': !open }" x-ref="para">
                                {{ @$company->descr }}
                            </div>
                                <template x-if="$refs.para.clientHeight < $refs.para.scrollHeight">
                                <button class="my-4 underline text-blue-600 text-sm" @click="open = !open" x-text="open ? 'Read less...' : 'Read more...'">
                                    Read more...
                                </button>
                            </template>
                        </div>
                        <dl class="mt-16 grid max-w-xl grid-cols-1 gap-8 sm:mt-20 sm:grid-cols-2 xl:mt-16">
                            @if(@$company->founded_date)
                            <div class="flex flex-col gap-y-3 border-l border-slate-200 pl-6">
                                <dt class="text-sm leading-6 text-gray-600">Founded</dt>
                                <dd class="order-first text-3xl font-semibold tracking-tight text-gray-900">{{ @$company->founded_date }}</dd>
                            </div>
                            @endif
                            @if($company->hq_country)
                            <div class="flex flex-col gap-y-3 border-l border-slate-200 pl-6">
                                <dt class="text-sm leading-6 text-gray-600">Country</dt>
                                <dd class="order-first text-3xl font-semibold tracking-tight text-gray-900">
                                    <img src="https://flagicons.lipis.dev/flags/1x1/{{ strtolower($company->hq_country) }}.svg"
                                         alt="{{ strtolower($company->hq_country) }} flag" width="20" height="20" style="float:right;padding-top:7px;">
                                    {{ @$company->country->nicename }}
                                </dd>
                            </div>
                            @endif

                             @if($company->hq_city)
                            <div class="flex flex-col gap-y-3 border-l border-slate-200 pl-6">
                                <dt class="text-sm leading-6 text-gray-600">City</dt>
                                <dd class="order-first text-3xl font-semibold tracking-tight text-gray-900">
                                    {{$company->hq_city}}
                                </dd>
                            </div>
                            @endif

                            <div class="flex flex-col gap-y-3 border-l border-slate-200 pl-6">
                                <dt class="text-sm leading-6 text-gray-600">Website</dt>
                                <dd class="order-first text-base font-semibold tracking-tight text-gray-900">
                                    <a class="break-all" href="https://{{ $company->host }}" target="_blank" rel="nofollow noopener noreferrer">
                                        {{ strip_url_prefix($company->website) }}
                                    </a>
                                </dd>
                            </div>

                            @if(@$company->global_rank)
                            <div class="flex flex-col gap-y-3 border-l border-slate-200 pl-6">
                                <dt class="text-sm leading-6 text-gray-600 flex justify-start items-center gap-2">
                                    <span>Platform Rank</span>
                                    <x-tooltip location="left">
                                        Company's ranking based on organic traffic performance within our comprehensive database.
                                    </x-tooltip>
                                </dt>
                                <dd class="order-first text-3xl font-semibold tracking-tight text-gray-900">
                                    {{ $company->global_rank }}
                                </dd>
                            </div>
                            @endif

                            @if(@$company->number_of_employees)
                            <div class="flex flex-col gap-y-3 border-l border-slate-200 pl-6">
                                <dt class="text-sm leading-6 text-gray-600">Employee Count</dt>
                                <dd class="order-first text-3xl font-semibold tracking-tight text-gray-900">
                                    {{ $company->number_of_employees }}
                                </dd>
                            </div>
                            @endif
                        </dl>
                    </div>
                </div>
            </div>
        </div>

        @php
            $igcount = @$company->follower_counts->where('platform', 'ig')->first()->count;
            $fbcount = @$company->follower_counts->where('platform', 'fb')->first()->count;
            $twcount = @$company->follower_counts->where('platform', 'tw')->first()->count;
            $ytcount = @$company->follower_counts->where('platform', 'yt')->first()->count;
            $picount = @$company->follower_counts->where('platform', 'pi')->first()->count;
            $fbgroupcount = @$company->follower_counts->where('platform', 'fb-group')->first()->count;

            $totalFollowers = $igcount + $fbcount + $twcount + $ytcount + $picount + $fbgroupcount;

            $igurl = @$company->follower_counts->where('platform', 'ig')->first()->url;
            $textigurl = str_replace(['https://www.', 'http://www.', 'https://', 'http://'], '', $igurl);

            $fburl = @$company->follower_counts->where('platform', 'ig')->first()->url;
            $textfburl = str_replace(['https://www.', 'http://www.', 'https://', 'http://'], '', $fburl);

            $twurl = @$company->follower_counts->where('platform', 'ig')->first()->url;
            $texttwurl = str_replace(['https://www.', 'http://www.', 'https://', 'http://'], '', $twurl);

            $yturl = @$company->follower_counts->where('platform', 'ig')->first()->url;
            $textyturl = str_replace(['https://www.', 'http://www.', 'https://', 'http://'], '', $yturl);

            $piurl = @$company->follower_counts->where('platform', 'ig')->first()->url;
            $textpiurl = str_replace(['https://www.', 'http://www.', 'https://', 'http://'], '', $piurl);
        @endphp

        <div class="lg:mt-12 px-4 lg:px-0">
            @if($company->trafficMetric && ($company->trafficMetric->authority_score>0 || $company->trafficMetric->organic_traffic>0 || $company->trafficMetric->organic_keywords_count>0 || $company->trafficMetric->organic_traffic_cost>0))
            <h2 class="text-2xl">{{$company->name}} Organic Traffic Metrics</h2>
            <x-title_helper_text>
                <span class="inline-block">{{$company->host}}’s organic traffic with search engine authority and overall performance data.</span>
                <x-source_text>Semrush - Last Update: {{$company->trafficMetric->updated_at->format('M d, Y')}}</x-source_text>
            </x-title_helper_text>
            <div class="bg-white mb-16">
                <div class="mx-auto max-w-7xl">
                    <div class="grid grid-cols-1 gap-4 bg-white sm:grid-cols-2 lg:grid-cols-4">
                        @if($company->trafficMetric && $company->trafficMetric->authority_score>0)
                        <div class="px-4 py-6 sm:px-6 lg:px-8 bg-slate-50 rounded-xl" >
                            <div class="text-sm font-medium leading-6 text-gray-700 flex justify-start items-center gap-1 ">
                                <span >Authority Score</span>
                                <x-tooltip location="right">
                                    A metric used to evaluate overall quality and SEO performance of a domain. The score is calculated on a scale of 0 to 100.
                                </x-tooltip>
                            </div>
                            <p class="mt-2 flex items-baseline gap-x-2">
                                <span class="text-4xl font-semibold tracking-tight text-black">{{$company->trafficMetric->authority_score}}</span>
                            </p>
                        </div>
                        @endif
                        @if($company->trafficMetric->organic_traffic>0)
                            <div class="px-4 py-6 sm:px-6 lg:px-8 bg-slate-50 rounded-xl">
                                <div class="text-sm font-medium leading-6 text-gray-700 flex justify-start items-center gap-1">
                                    <span>Estimated Organic Traffic</span>
                                    <x-tooltip>
                                        The estimated monthly traffic that comes from organic search engine results.
                                    </x-tooltip>
                                </div>
                                <p class="mt-2 flex items-baseline gap-x-2">
                                    <span class="text-4xl font-semibold tracking-tight text-black">{{number_format($company->trafficMetric->organic_traffic)}}</span>
                                </p>
                            </div>
                        @endif
                        @if($company->trafficMetric->organic_keywords_count>0)
                        <div class="px-4 py-6 sm:px-6 lg:px-8 bg-slate-50 rounded-xl">
                            <div class="text-sm font-medium leading-6 text-gray-700 flex justify-start items-center gap-1">
                                <span>Organic Keywords</span>
                                <x-tooltip location="right">
                                    Top-performing keywords used in search engines to attract free traffic.
                                </x-tooltip>
                            </div>
                            <p class="mt-2 flex items-baseline gap-x-2">
                                <span class="text-4xl font-semibold tracking-tight text-black">{{number_format($company->trafficMetric->organic_keywords_count)}}</span>
                            </p>
                        </div>
                        @endif
                        @if($company->trafficMetric->organic_traffic_cost>0)
                        <div class="px-4 py-6 sm:px-6 lg:px-8 bg-slate-50 rounded-xl">
                            <div class="text-sm font-medium leading-6 text-gray-700 flex justify-start items-center gap-1">
                                <span>Organic Traffic Cost</span>
                                <x-tooltip>
                                    The estimated monthly expense for advertisers to rank for all listed organic keywords.
                                </x-tooltip>
                            </div>
                            <p class="mt-2 flex items-baseline gap-x-2">
                                <span class="text-4xl font-semibold tracking-tight text-black">{{number_format($company->trafficMetric->organic_traffic_cost)}}</span>
                            </p>
                        </div>
                        @endif
                    </div>
                </div>
            </div>
            @endif
            @if($company->trafficMetric->paid_traffic>0 || $company->trafficMetric->paid_keywords_count>0 || $company->trafficMetric->ppc_traffic_cost>0)
            <h2 class="text-2xl">Paid Traffic Metrics</h2>
            <x-title_helper_text>
                <span class="inline-block">{{$company->host}}’s estimated paid traffic including the number of keywords and traffic cost based on monthly traffic volume.</span>
                <x-source_text>Semrush</x-source_text>
            </x-title_helper_text>
            <div class="mb-16">
                <div class="mx-auto max-w-7xl">
                    <div class="grid grid-cols-1 gap-4 bg-white/5 sm:grid-cols-2 lg:grid-cols-3">
                        @if($company->trafficMetric->paid_traffic>0)
                        <div class="px-4 py-6 sm:px-6 lg:px-8 bg-slate-50 rounded-xl">
                            <div class="text-sm font-medium leading-6 text-gray-700 flex justify-start items-center gap-1">
                                <span>Paid Traffic</span>
                                <x-tooltip location="right">
                                    The estimated number of visitors who reached the website by clicking on paid links or ads.
                                </x-tooltip>
                            </div>
                            <p class="mt-2 flex items-baseline gap-x-2">
                                <span class="text-4xl font-semibold tracking-tight text-black">{{number_format($company->trafficMetric->paid_traffic)}}</span>
                            </p>
                        </div>
                        @endif
                        @if($company->trafficMetric->paid_keywords_count>0)
                        <div class="px-4 py-6 sm:px-6 lg:px-8 bg-slate-50 rounded-xl">
                        <div class="text-sm font-medium leading-6 text-gray-700 flex justify-start items-center gap-1">
                            <span>Paid Keywords</span>
                            <x-tooltip location="right">
                                The number of keywords driving visitors through paid search results on Google.
                            </x-tooltip>
                        </div>
                        <p class="mt-2 flex items-baseline gap-x-2">
                            <span class="text-4xl font-semibold tracking-tight text-black">{{number_format($company->trafficMetric->paid_keywords_count)}}</span>
                        </p>
                        </div>
                        @endif
                        @if($company->trafficMetric->ppc_traffic_cost>0)
                        <div class="px-4 py-6 sm:px-6 lg:px-8 bg-slate-50 rounded-xl">
                        <div class="text-sm font-medium leading-6 text-gray-700 flex justify-start items-center gap-1">
                            <span>Paid Traffic Cost</span>
                            <x-tooltip location="right">
                                The total cost of all paid keywords that rank in ads. It’s calculated by multiplying the monthly paid traffic for each keyword by its cost-per-click (CPC).
                            </x-tooltip>
                        </div>
                        <p class="mt-2 flex items-baseline gap-x-2">
                            <span class="text-4xl font-semibold tracking-tight text-black">{{number_format($company->trafficMetric->ppc_traffic_cost)}}</span>
                        </p>
                        </div>
                        @endif
                    </div>
                </div>
            </div>
            @endif
        </div>


        @if(!$metric_keywords->isEmpty())
            <div class="px-4 mb-8 lg:px-0 lg:mb-16">
                <h2 class="text-2xl">Organic Keywords</h2>
                <x-title_helper_text>
                    <span class="inline-block">Organic keyword rankings, along with position, traffic percentage and landing page.</span>
                    <x-source_text>Semrush - Database: US</x-source_text>
                </x-title_helper_text>
                <div class="relative border border-slate-100">
                    <table class="w-full text-sm text-left text-gray-500">
                        <thead class="text-xs text-gray-700 bg-gray-50">
                            <tr>
                                <th scope="col" class="px-3 lg:px-6 py-3 sticky top-0 bg-gray-50">
                                    <div class="flex justify-start items-center gap-1">
                                        <span class="inline-block">KEYWORD</span>
                                        <x-tooltip location="right">
                                            The query phrase for which the page appears in search engine results.
                                        </x-tooltip>
                                    </div>
                                </th>
                                <th scope="col" class="px-3 lg:px-6 py-3 sticky top-0 bg-gray-50">
                                    <div class="flex justify-start items-center gap-1">
                                        <span class="inline-block md:hidden ">POS.</span>
                                        <span class="hidden md:inline-block">POSITION</span>
                                        <x-tooltip>
                                            The page's search engine ranking for this keyword.
                                        </x-tooltip>
                                    </div>
                                </th>
                                <th scope="col" class="px-3 lg:px-6 py-3 sticky top-0 bg-gray-50">
                                    <div class="flex justify-start items-center gap-1">
                                        <span class="inline-block">TRAFFIC %</span>
                                        <x-tooltip location="left">
                                            The percentage of total traffic that arrives at the site through this keyword.
                                        </x-tooltip>
                                    </div>
                                </th>
                                <th scope="col" class="hidden md:table-cell px-6 py-3 sticky top-0 bg-gray-50">
                                    <div class="flex justify-start items-center gap-1">
                                        <span class="inline-block">LANDING PAGE</span>
                                        <x-tooltip>
                                            The page that users land on after searching for this keyword.
                                        </x-tooltip>
                                    </div>
                                </th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($metric_keywords as $mk)
                                <tr class="bg-white border-b">
                                    <th scope="row"
                                        class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap">
                                        {{ $mk->keyword->name }}
                                    </th>
                                    <td class="px-6 py-4">
                                        {{ $mk->position }}
                                    </td>
                                    <td class="px-6 py-4">
                                        {{ $mk->traffic_percentage }}
                                    </td>
                                    <td class="px-6 py-4 hidden md:table-cell">
                                        {{ strip_url_prefix($mk->landing_page) }}
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        @endif

        @if(!$metric_traffic_by_pages->isEmpty())
        <div class="px-4 mb-8 lg:px-0 lg:mb-16">
            <h2 class="text-2xl">Organic Landing Pages</h2>
            <x-title_helper_text>
                <span class="inline-block">The top landing pages visited by users who came from organic search results.</span>
                <x-source_text>Semrush - Database: US</x-source_text>
            </x-title_helper_text>
            <div class="relative border border-slate-100 overflow-y-auto sm:overflow-y-visible">
                <table class="w-full max-w-full text-sm text-left text-gray-500">
                    <thead class="text-xs text-gray-700 bg-gray-50">
                        <tr>
                            <th scope="col" class="px-6 py-3 top-0 bg-gray-50">
                                URL
                            </th>
                            <th scope="col" class="px-6 py-3 top-0 bg-gray-50 text-right">
                                <div class="flex justify-end items-center gap-1">
                                    <span class="inline-block">TOTAL TRAFFIC</span>
                                    <x-tooltip vertical="bottom">
                                        The total number of visits to this page from organic search results per month.
                                    </x-tooltip>
                                </div>
                            </th>
                            <th scope="col" class="px-6 py-3 top-0 bg-gray-50 text-right">
                                <div class="flex justify-end items-center gap-1">
                                    <span class="inline-block">TRAFFIC %</span>
                                    <x-tooltip vertical="bottom">
                                        This percentage shows how much of the website's total search traffic comes from this page.
                                    </x-tooltip>
                                </div>
                            </th>
                            <th scope="col" class="px-6 py-3 top-0 bg-gray-50 text-right">
                                <div class="flex justify-end items-center gap-1">
                                    <span class="inline-block"># OF KEYWORDS</span>
                                    <x-tooltip vertical="bottom" location="left">
                                        The number of organic keywords that this page ranks for in search engine results.
                                    </x-tooltip>
                                </div>
                            </th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($metric_traffic_by_pages as $mtbp)
                            <tr class="bg-white border-b">
                                <th scope="row"
                                    class="px-6 py-4 font-medium text-gray-900 break-words">
                                    {{ strip_url_prefix($mtbp->url) }}
                                </th>
                                <td class="px-6 py-4 text-right">
                                    {{ number_format($mtbp->total,0,',','.') }}
                                </td>
                                <td class="px-6 py-4 text-right">
                                    {{ $mtbp->traffic_percentage }}
                                </td>
                                <td class="px-6 py-4 text-right">
                                    {{ $mtbp->number_of_keywords }}
                                </td>

                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
        @endif

        @if(!$metric_competitors->isEmpty())
        <div class="px-4 lg:px-0 mb-8 lg:mb-16">
            <h2 class="text-2xl">{{$company->name}} Organic Competitors</h2>
            <x-title_helper_text>
                <span class="inline-block">The top website domains competing for similar organic traffic and keywords. The level of competition is based on common keywords shared by both competitors.</span>
                <x-source_text>Semrush - Database: US</x-source_text>
            </x-title_helper_text>
            <div class="relative max-h-96  border border-slate-100">
                <table class="w-full text-sm text-left text-gray-500">
                    <thead class="text-xs text-gray-700 bg-gray-50">
                        <tr>
                            <th scope="col" class="px-6 py-3">
                                <div class="flex justify-start items-center gap-1">
                                    <span class="inline-block">COMPETITOR</span>
                                    <x-tooltip location="right">
                                        The domain of a competitor who ranks for the same organic traffic.
                                    </x-tooltip>
                                </div>
                            </th>
                            <th scope="col" class="px-6 py-3">
                                <div class="flex justify-start items-center gap-1">
                                    <span class="inline-block">COMPETITION LEVEL</span>
                                    <x-tooltip location="left">
                                        The percentage of competition level based on the amount of common keywords between competitors.
                                    </x-tooltip>
                                </div>
                            </th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($metric_competitors as $mc)
                            <tr class="bg-white border-b">
                                <th scope="row"
                                    class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap">
                                    {{ $mc->competitor }}
                                </th>
                                <td class="px-6 py-4">
                                    {{ $mc->level }}
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
        @endif

        @if($totalFollowers)
            <div class="px-4 lg:px-0 mb-8 lg:mb-16">
                <h2 class="text-2xl mb-5">{{$company->name}} on Social Media</h2>

                <dl class="mt-5 grid grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-3">
                    @if($fbcount)
                        <div class="relative overflow-hidden rounded-lg bg-white px-4 pb-12 pt-5 shadow sm:px-6 sm:pt-6">
                            <dt>
                                <div class="absolute rounded-md bg-indigo-500 p-3">
                                    <svg class="h-6 w-6 text-white" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
                                        <path stroke-linecap="round" stroke-linejoin="round" d="M15 19.128a9.38 9.38 0 002.625.372 9.337 9.337 0 004.121-.952 4.125 4.125 0 00-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 018.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0111.964-3.07M12 6.375a3.375 3.375 0 11-6.75 0 3.375 3.375 0 016.75 0zm8.25 2.25a2.625 2.625 0 11-5.25 0 2.625 2.625 0 015.25 0z" />
                                    </svg>
                                </div>
                                <p class="ml-16 truncate text-sm font-medium text-gray-500">Facebook</p>
                            </dt>
                            <dd class="ml-16 flex items-baseline pb-6 sm:pb-7">
                                <p class="text-2xl font-semibold text-gray-900">{{$fbcount}}</p>
                                <p class="ml-2 flex items-baseline text-sm font-semibold text-green-600">
                                    <svg class="h-5 w-5 flex-shrink-0 self-center text-green-500" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                                        <path fill-rule="evenodd" d="M10 17a.75.75 0 01-.75-.75V5.612L5.29 9.77a.75.75 0 01-1.08-1.04l5.25-5.5a.75.75 0 011.08 0l5.25 5.5a.75.75 0 11-1.08 1.04l-3.96-4.158V16.25A.75.75 0 0110 17z" clip-rule="evenodd" />
                                    </svg>
                                    <span class="sr-only"> Increased by </span>
                                    122
                                </p>
                                <div class="absolute inset-x-0 bottom-0 bg-gray-50 px-4 py-4 sm:px-6">
                                    <div class="text-sm">
                                        <a href="{{$fburl}}" target="_blank" rel="nofollow noopener noreferrer" class="font-medium text-indigo-600 hover:text-indigo-500">{{$textfburl}}<span class="sr-only"> Total Subscribers stats</span></a>
                                    </div>
                                </div>
                            </dd>
                        </div>
                    @endif

                    @if($igcount)
                        <div class="relative overflow-hidden rounded-lg bg-white px-4 pb-12 pt-5 shadow sm:px-6 sm:pt-6">
                            <dt>
                                <div class="absolute rounded-md bg-indigo-500 p-3">
                                    <svg class="h-6 w-6 text-white" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
                                        <path stroke-linecap="round" stroke-linejoin="round" d="M21.75 9v.906a2.25 2.25 0 01-1.183 1.981l-6.478 3.488M2.25 9v.906a2.25 2.25 0 001.183 1.981l6.478 3.488m8.839 2.51l-4.66-2.51m0 0l-1.023-.55a2.25 2.25 0 00-2.134 0l-1.022.55m0 0l-4.661 2.51m16.5 1.615a2.25 2.25 0 01-2.25 2.25h-15a2.25 2.25 0 01-2.25-2.25V8.844a2.25 2.25 0 011.183-1.98l7.5-4.04a2.25 2.25 0 012.134 0l7.5 4.04a2.25 2.25 0 011.183 1.98V19.5z" />
                                    </svg>
                                </div>
                                <p class="ml-16 truncate text-sm font-medium text-gray-500">Instagram</p>
                            </dt>
                            <dd class="ml-16 flex items-baseline pb-6 sm:pb-7">
                                <p class="text-2xl font-semibold text-gray-900">{{$igcount}}</p>
                                <p class="ml-2 flex items-baseline text-sm font-semibold">
                                    Followers
                                </p>
                                <div class="absolute inset-x-0 bottom-0 bg-gray-50 px-4 py-4 sm:px-6">
                                    <div class="text-sm">
                                        <a href="{{$igurl}}" target="_blank" rel="nofollow noopener noreferrer" class="font-medium text-indigo-600 hover:text-indigo-500">{{$textigurl}}<span class="sr-only"> Avg. Open Rate stats</span></a>
                                    </div>
                                </div>
                            </dd>
                        </div>
                    @endif

                    @if($twcount)
                        <div class="relative overflow-hidden rounded-lg bg-white px-4 pb-12 pt-5 shadow sm:px-6 sm:pt-6">
                            <dt>
                                <div class="absolute rounded-md bg-indigo-500 p-3">
                                    <svg class="h-6 w-6 text-white" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
                                        <path stroke-linecap="round" stroke-linejoin="round" d="M15.042 21.672L13.684 16.6m0 0l-2.51 2.225.569-9.47 5.227 7.917-3.286-.672zM12 2.25V4.5m5.834.166l-1.591 1.591M20.25 10.5H18M7.757 14.743l-1.59 1.59M6 10.5H3.75m4.007-4.243l-1.59-1.59" />
                                    </svg>
                                </div>
                                <p class="ml-16 truncate text-sm font-medium text-gray-500">Twitter</p>
                            </dt>
                            <dd class="ml-16 flex items-baseline pb-6 sm:pb-7">
                                <p class="text-2xl font-semibold text-gray-900">{{$twcount}}</p>
                                <p class="ml-2 flex items-baseline text-sm font-semibold text-red-600">
                                    <svg class="h-5 w-5 flex-shrink-0 self-center text-red-500" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                                        <path fill-rule="evenodd" d="M10 3a.75.75 0 01.75.75v10.638l3.96-4.158a.75.75 0 111.08 1.04l-5.25 5.5a.75.75 0 01-1.08 0l-5.25-5.5a.75.75 0 111.08-1.04l3.96 4.158V3.75A.75.75 0 0110 3z" clip-rule="evenodd" />
                                    </svg>
                                    <span class="sr-only"> Decreased by </span>
                                    3.2%
                                </p>
                                <div class="absolute inset-x-0 bottom-0 bg-gray-50 px-4 py-4 sm:px-6">
                                    <div class="text-sm">
                                        <a href="{{$twurl}}" target="_blank" rel="nofollow noopener noreferrer" class="font-medium text-indigo-600 hover:text-indigo-500">{{$texttwurl}}<span class="sr-only"> Avg. Click Rate stats</span></a>
                                    </div>
                                </div>
                            </dd>
                        </div>
                    @endif

                    @if($ytcount)
                        <div class="relative overflow-hidden rounded-lg bg-white px-4 pb-12 pt-5 shadow sm:px-6 sm:pt-6">
                            <dt>
                                <div class="absolute rounded-md bg-indigo-500 p-3">
                                    <svg class="h-6 w-6 text-white" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
                                        <path stroke-linecap="round" stroke-linejoin="round" d="M15.042 21.672L13.684 16.6m0 0l-2.51 2.225.569-9.47 5.227 7.917-3.286-.672zM12 2.25V4.5m5.834.166l-1.591 1.591M20.25 10.5H18M7.757 14.743l-1.59 1.59M6 10.5H3.75m4.007-4.243l-1.59-1.59" />
                                    </svg>
                                </div>
                                <p class="ml-16 truncate text-sm font-medium text-gray-500">Youtube</p>
                            </dt>
                            <dd class="ml-16 flex items-baseline pb-6 sm:pb-7">
                                <p class="text-2xl font-semibold text-gray-900">{{$ytcount}}%</p>
                                <p class="ml-2 flex items-baseline text-sm font-semibold text-red-600">
                                    <svg class="h-5 w-5 flex-shrink-0 self-center text-red-500" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                                        <path fill-rule="evenodd" d="M10 3a.75.75 0 01.75.75v10.638l3.96-4.158a.75.75 0 111.08 1.04l-5.25 5.5a.75.75 0 01-1.08 0l-5.25-5.5a.75.75 0 111.08-1.04l3.96 4.158V3.75A.75.75 0 0110 3z" clip-rule="evenodd" />
                                    </svg>
                                    <span class="sr-only"> Decreased by </span>
                                    1.2%
                                </p>
                                <div class="absolute inset-x-0 bottom-0 bg-gray-50 px-4 py-4 sm:px-6">
                                    <div class="text-sm">
                                        <a href="{{$textyturl}}" target="_blank" rel="nofollow noopener noreferrer" class="font-medium text-indigo-600 hover:text-indigo-500">{{$textyturl}}<span class="sr-only"> Avg. Click Rate stats</span></a>
                                    </div>
                                </div>
                            </dd>
                        </div>
                    @endif

                    @if($picount)
                        <div class="relative overflow-hidden rounded-lg bg-white px-4 pb-12 pt-5 shadow sm:px-6 sm:pt-6">
                            <dt>
                                <div class="absolute rounded-md bg-indigo-500 p-3">
                                    <svg class="h-6 w-6 text-white" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
                                        <path stroke-linecap="round" stroke-linejoin="round" d="M15.042 21.672L13.684 16.6m0 0l-2.51 2.225.569-9.47 5.227 7.917-3.286-.672zM12 2.25V4.5m5.834.166l-1.591 1.591M20.25 10.5H18M7.757 14.743l-1.59 1.59M6 10.5H3.75m4.007-4.243l-1.59-1.59" />
                                    </svg>
                                </div>
                                <p class="ml-16 truncate text-sm font-medium text-gray-500">Pinterest</p>
                            </dt>
                            <dd class="ml-16 flex items-baseline pb-6 sm:pb-7">
                                <p class="text-2xl font-semibold text-gray-900">{{$picount}}%</p>
                                <p class="ml-2 flex items-baseline text-sm font-semibold text-red-600">
                                    <svg class="h-5 w-5 flex-shrink-0 self-center text-red-500" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                                        <path fill-rule="evenodd" d="M10 3a.75.75 0 01.75.75v10.638l3.96-4.158a.75.75 0 111.08 1.04l-5.25 5.5a.75.75 0 01-1.08 0l-5.25-5.5a.75.75 0 111.08-1.04l3.96 4.158V3.75A.75.75 0 0110 3z" clip-rule="evenodd" />
                                    </svg>
                                    <span class="sr-only"> Decreased by </span>
                                    3.2%
                                </p>
                                <div class="absolute inset-x-0 bottom-0 bg-gray-50 px-4 py-4 sm:px-6">
                                    <div class="text-sm">
                                        <a href="{{$textpiurl}}" target="_blank" rel="nofollow noopener noreferrer" class="font-medium text-indigo-600 hover:text-indigo-500">{{$textpiurl}}<span class="sr-only"> Avg. Click Rate stats</span></a>
                                    </div>
                                </div>
                            </dd>
                        </div>
                    @endif

                    @if($fbgroupcount)
                        <div class="relative overflow-hidden rounded-lg bg-white px-4 pb-12 pt-5 shadow sm:px-6 sm:pt-6">
                            <dt>
                                <div class="absolute rounded-md bg-indigo-500 p-3">
                                    <svg class="h-6 w-6 text-white" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
                                        <path stroke-linecap="round" stroke-linejoin="round" d="M15.042 21.672L13.684 16.6m0 0l-2.51 2.225.569-9.47 5.227 7.917-3.286-.672zM12 2.25V4.5m5.834.166l-1.591 1.591M20.25 10.5H18M7.757 14.743l-1.59 1.59M6 10.5H3.75m4.007-4.243l-1.59-1.59" />
                                    </svg>
                                </div>
                                <p class="ml-16 truncate text-sm font-medium text-gray-500">Facebook Group</p>
                            </dt>
                            <dd class="ml-16 flex items-baseline pb-6 sm:pb-7">
                                <p class="text-2xl font-semibold text-gray-900">{{$fbgroupcount}}%</p>
                                <p class="ml-2 flex items-baseline text-sm font-semibold text-red-600">
                                    <svg class="h-5 w-5 flex-shrink-0 self-center text-red-500" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                                        <path fill-rule="evenodd" d="M10 3a.75.75 0 01.75.75v10.638l3.96-4.158a.75.75 0 111.08 1.04l-5.25 5.5a.75.75 0 01-1.08 0l-5.25-5.5a.75.75 0 111.08-1.04l3.96 4.158V3.75A.75.75 0 0110 3z" clip-rule="evenodd" />
                                    </svg>
                                    <span class="sr-only"> Decreased by </span>
                                    3.2%
                                </p>
                                <div class="absolute inset-x-0 bottom-0 bg-gray-50 px-4 py-4 sm:px-6">
                                    <div class="text-sm">
                                        <a href="#" class="font-medium text-indigo-600 hover:text-indigo-500">facebook.com/group/nike<span class="sr-only"> Avg. Click Rate stats</span></a>
                                    </div>
                                </div>
                            </dd>
                        </div>
                    @endif

                </dl>
            </div>
        @endif
        <div>
            <div class="bg-white px-4 py-6 sm:px-6 lg:px-0">
                <div class="mx-auto max-w-7xl">
                    <div  x-data="{ tab: 'overview'}">
                        <div class="sm:hidden">
                            <label for="tabs" class="sr-only">Select a tab</label>
                            <!-- Use an "onChange" listener to redirect the user to the selected tab URL. -->
                            <select id="tabs" name="tabs" class="block w-full rounded-md border-gray-300 py-2 pl-3 pr-10 text-base focus:border-indigo-500 focus:outline-none focus:ring-indigo-500 sm:text-sm">
                                <option selected>Overview</option>
                                @if($company->founders->count()>0 || $company->advisors->count()>0 || $company->investors->count()>0)
                                    <option>People</option>
                                @endif
                                @if($company->acquisitions->count()>0 || $company->fundings->count()>0)
                                <option>Financial</option>
                                @endif
                                @if($company->trademark)
                                <option>Trademark</option>
                                @endif
                            </select>
                        </div>
                        <div class="hidden sm:block mb-5">
                            <nav class="flex space-x-4" aria-label="Tabs">
                                <button x-on:click.prevent="tab = 'overview'" :class="{ 'bg-indigo-50 text-indigo-700 ': tab === 'overview' }"
                                   class="text-gray-500 hover:text-gray-700 rounded-md px-3 py-2 text-sm font-medium"
                                   >Overview</button>
                                @if($company->founders->count()>0 || $company->advisors->count()>0 || $company->investors->count()>0)
                                <button x-on:click.prevent="tab = 'people'" :class="{ 'bg-indigo-50 text-indigo-700 ': tab === 'people' }"
                                   class="text-gray-500 hover:text-gray-700 rounded-md px-3 py-2 text-sm font-medium"
                                   >People</button>
                                @endif
                                @if($company->acquisitions->count()>0 || $company->fundings->count()>0)
                                <button x-on:click.prevent="tab = 'financial'" :class="{ 'bg-indigo-50 text-indigo-700 ': tab === 'financial' }"
                                   class="text-gray-500 hover:text-gray-700 rounded-md px-3 py-2 text-sm font-medium"
                                   >Financial</button>
                                @endif
                                @if($company->trademark)
                                <button x-on:click.prevent="tab = 'tech'" :class="{ 'bg-indigo-50 text-indigo-700 ': tab === 'tech' }"
                                   class="text-gray-500 hover:text-gray-700 rounded-md px-3 py-2 text-sm font-medium"
                                   >Trademark</button>
                                @endif
                            </nav>
                        </div>
                        <div x-show="tab === 'overview'" class="border-8 border-slate-100 rounded-xl p-5">
                            <div class=" px-4 sm:px-0">
                                <h2 class="text-2xl">{{ $company->name }} Company Details</h2>
                            </div>
                            <div class="mt-6">
                                <dl class="grid grid-cols-1 sm:grid-cols-2">
                                    <div class="border-t border-gray-100 px-4 py-6 sm:col-span-1 sm:px-0">
                                        <dt class="text-sm font-medium leading-6 text-gray-900">Title</dt>
                                        <dd class="mt-1 text-sm leading-6 text-gray-700 sm:mt-2">{{ $company->name }}</dd>
                                    </div>
                                    <div class="border-t border-gray-100 px-4 py-6 sm:col-span-1 sm:px-0">
                                        <dt class="text-sm font-medium leading-6 text-gray-900">Phone</dt>
                                        <dd class="mt-1 text-sm leading-6 text-gray-700 sm:mt-2">{{ $company->phone??'N/A' }}</dd>
                                    </div>
                                    <div class="border-t border-gray-100 px-4 py-6 sm:col-span-1 sm:px-0">
                                        <dt class="text-sm font-medium leading-6 text-gray-900">Email Address</dt>
                                        <dd class="mt-1 text-sm leading-6 text-gray-700 sm:mt-2">{{ $company->email??'N/A' }}</dd>
                                    </div>
                                    <div class="border-t border-gray-100 px-4 py-6 sm:col-span-1 sm:px-0">
                                        <dt class="text-sm font-medium leading-6 text-gray-900">Contact Page</dt>
                                        <dd class="mt-1 text-sm leading-6 text-gray-700 sm:mt-2"><a href="https://{{ strip_url_prefix($company->host) }}/contact" target="_blank" rel="nofollow noopener">{{ strip_url_prefix($company->host) }}/contact</a></dd>
                                    </div>
                                    <div class="border-t border-gray-100 px-4 py-6 sm:col-span-2 sm:px-0">
                                        <dt class="text-sm font-medium leading-6 text-gray-900">About</dt>
                                        <dd class="mt-1 text-sm leading-6 text-gray-700 sm:mt-2">{{ $company->descr }}</dd>
                                    </div>
                                </dl>
                            </div>
                        </div>
                        @if($company->founders->count()>0 || $company->advisors->count()>0 || $company->investors->count()>0)
                        <div x-show="tab === 'people'" class="border-8 border-blue-50 rounded-xl p-5">
                            <div class=" px-4 sm:px-0">
                                <h2 class="text-2xl">{{ $company->name }} People Details</h2>
                            </div>
                            @if($company->founders && !$company->founders->isEmpty())
                                <div clasS="mt-6">
                                    <h3 class="text-xl mb-5">Founders</h3>
                                    <table class="w-full text-sm text-left text-gray-500 border border-gray-100 rounded-xl ">
                                        <thead class="text-xs text-gray-700 bg-gray-50">
                                        <tr>
                                            <th scope="col" class="px-6 py-3">
                                                <span class="inline-block">Name</span>
                                            </th>
                                            <th scope="col" class="px-6 py-3">
                                                <span class="inline-block">Type</span>
                                            </th>
                                        </tr>
                                        </thead>
                                        <tbody>
                                        @foreach($company->founders as $founder)
                                            <tr class="bg-white border-b">
                                                <td class="px-6 py-4">
                                                    {{ $founder->name }}
                                                </td>
                                                <td class="px-6 py-4">
                                                    {{ $founder->type }}
                                                </td>
                                            </tr>
                                        @endforeach
                                        </tbody>
                                    </table>
                                </div>
                            @endif
                            @if($company->advisors && !$company->advisors->isEmpty())
                                <div clasS="mt-6">
                                    <h3 class="text-xl mb-5">Advisors</h3>
                                    <table class="w-full text-sm text-left text-gray-500 border border-gray-100 rounded-xl ">
                                        <thead class="text-xs text-gray-700 bg-gray-50">
                                        <tr>
                                            <th scope="col" class="px-6 py-3">
                                                <span class="inline-block">Name</span>
                                            </th>
                                            <th scope="col" class="px-6 py-3">
                                                <span class="inline-block">Type</span>
                                            </th>
                                            <th scope="col" class="px-6 py-3">
                                                <span class="inline-block">Job</span>
                                            </th>
                                            <th scope="col" class="px-6 py-3">
                                                <span class="inline-block">Started at</span>
                                            </th>
                                        </tr>
                                        </thead>
                                        <tbody>
                                        @foreach($company->advisors as $advisor)
                                            <tr class="bg-white border-b">
                                                <td class="px-6 py-4">
                                                    {{ $advisor->name }}
                                                </td>
                                                <td class="px-6 py-4">
                                                    {{ $advisor->type }}
                                                </td>
                                                <td class="px-6 py-4">
                                                    {{ $advisor->job }}
                                                </td>
                                                <td class="px-6 py-4">
                                                    {{ $advisor->started_at?->format('d M, Y') }}
                                                </td>
                                            </tr>
                                        @endforeach
                                        </tbody>
                                    </table>
                                </div>
                            @endif
                            @if($company->investors && !$company->investors->isEmpty())
                                <div clasS="mt-6">
                                    <h3 class="text-xl mb-5">Investors</h3>
                                    <table class="w-full text-sm text-left text-gray-500 border border-gray-100 rounded-xl ">
                                        <thead class="text-xs text-gray-700 bg-gray-50">
                                        <tr>
                                            <th scope="col" class="px-6 py-3">
                                                <span class="inline-block">Investment</span>
                                            </th>
                                            <th scope="col" class="px-6 py-3">
                                                <span class="inline-block">Investor</span>
                                            </th>
                                            <th scope="col" class="px-6 py-3">
                                                <span class="inline-block">Is Lead</span>
                                            </th>
                                            <th scope="col" class="px-6 py-3">
                                                <span class="inline-block">Investor Type</span>
                                            </th>
                                        </tr>
                                        </thead>
                                        <tbody>
                                        @foreach($company->investors as $investor)
                                            <tr class="bg-white border-b">
                                                <td class="px-6 py-4">
                                                    {{ $investor->investment }}
                                                </td>
                                                <td class="px-6 py-4">
                                                    {{ $investor->investor }}
                                                </td>
                                                <td class="px-6 py-4">
                                                    {{ $investor->is_lead? 'Yes' : 'No' }}
                                                </td>
                                                <td class="px-6 py-4">
                                                    {{ $investor->investor_type }}
                                                </td>
                                            </tr>
                                        @endforeach
                                        </tbody>
                                    </table>
                                </div>
                            @endif
                        </div>
                        @endif
                        @if($company->acquisitions->count()>0 || $company->fundings->count()>0)
                        <div x-show="tab === 'financial'" class="border-8 border-blue-50 rounded-xl p-5">
                            <div class=" px-4 sm:px-0">
                                <h2 class="text-2xl">{{ $company->name }} Financial Details</h2>
                            </div>
                            @if($company->acquisitions && !$company->acquisitions->isEmpty())
                                <div clasS="mt-6">
                                    <h3 class="text-xl mb-5">Acquisitions</h3>
                                    <table class="w-full text-sm text-left text-gray-500 border border-gray-100 rounded-xl ">
                                        <thead class="text-xs text-gray-700 bg-gray-50">
                                        <tr>
                                            <th scope="col" class="px-6 py-3">
                                                <span class="inline-block">Company</span>
                                            </th>
                                            <th scope="col" class="px-6 py-3">
                                                <span class="inline-block">Role</span>
                                            </th>
                                            <th scope="col" class="px-6 py-3">
                                                <span class="inline-block">Identifier</span>
                                            </th>
                                            <th scope="col" class="px-6 py-3">
                                                <span class="inline-block">Announced on</span>
                                            </th>
                                        </tr>
                                        </thead>
                                        <tbody>
                                        @foreach($company->acquisitions as $acquisition)
                                            <tr class="bg-white border-b">
                                                <td class="px-6 py-4">
                                                    {{ $acquisition->company }}
                                                </td>
                                                <td class="px-6 py-4">
                                                    {{ $acquisition->role }}
                                                </td>
                                                <td class="px-6 py-4">
                                                    {{ $acquisition->identifier }}
                                                </td>
                                                <td class="px-6 py-4">
                                                    {{ $acquisition->announced_on?$acquisition->announced_on->format('d M, Y'):'N/A' }}
                                                </td>
                                            </tr>
                                        @endforeach
                                        </tbody>
                                    </table>
                                </div>
                            @endif
                            @if($company->fundings && !$company->fundings->isEmpty())
                                <div clasS="mt-6">
                                    <h3 class="text-xl mb-5">Funding Rounds</h3>
                                    <table class="w-full text-sm text-left text-gray-500 border border-gray-100 rounded-xl ">
                                        <thead class="text-xs text-gray-700 bg-gray-50">
                                        <tr>
                                            <th scope="col" class="px-6 py-3">
                                                <span class="inline-block">Name</span>
                                            </th>
                                            <th scope="col" class="px-6 py-3">
                                                <span class="inline-block">Announced on</span>
                                            </th>
                                            <th scope="col" class="px-6 py-3">
                                                <span class="inline-block">Raised Amount</span>
                                            </th>
                                            <th scope="col" class="px-6 py-3">
                                                <span class="inline-block">Raised Amount (USD)</span>
                                            </th>
                                            <th scope="col" class="px-6 py-3">
                                                <span class="inline-block">Investor Count</span>
                                            </th>
                                        </tr>
                                        </thead>
                                        <tbody>
                                        @foreach($company->fundings as $funding)
                                            <tr class="bg-white border-b">
                                                <td class="px-6 py-4">
                                                    {{ $funding->name }}
                                                </td>
                                                <td class="px-6 py-4">
                                                    {{ $funding->announced_on?$funding->announced_on->format('d M, Y'):'N/A' }}
                                                </td>
                                                <td class="px-6 py-4">
                                                    {{ number_format($funding->raised_amount,0,'.',',') }}
                                                </td>
                                                <td class="px-6 py-4">
                                                    {{  number_format($funding->raised_amount_usd,0,'.',',') }}
                                                </td>
                                                <td class="px-6 py-4">
                                                    {{ $funding->investor_count }}
                                                </td>
                                            </tr>
                                        @endforeach
                                        </tbody>
                                    </table>
                                </div>
                            @endif
                        </div>
                        @endif
                        @if($company->trademark)
                        <div x-show="tab === 'tech'" class="border-8 border-blue-50 rounded-xl p-5">
                            <div class=" px-4 sm:px-0">
                                <h2 class="text-2xl">{{ $company->name }} Trademark Details</h2>
                            </div>
                            <div class="mt-5 grid grid-cols-3 gap-5">
                                <div class="bg-slate-50 p-4 rounded-lg divide-y divide-slate-100 space-y-4 flex flex-col justify-center items-stretch text-center">
                                    <span class="block">Num. Patent Granted</span>
                                    <span class="block text-xl">{{$company->trademark->num_patent_granted}}</span>
                                </div>
                                <div class="bg-slate-50 p-4 rounded-lg divide-y divide-slate-100 space-y-4 flex flex-col justify-center items-stretch text-center">
                                    <span class="block">Num. Trademark Registered</span>
                                    <span class="block text-xl">{{$company->trademark->num_trademark_registered}}</span>
                                </div>
                                <div class="bg-slate-50 p-4 rounded-lg divide-y divide-slate-100 space-y-4 flex flex-col justify-center items-stretch text-center">
                                    <span class="block">Popular Trademark Class</span>
                                    <span class="block text-xl">{{$company->trademark->popular_trademark_class}}</span>
                                </div>

                            </div>
                        </div>
                        @endif
                    </div>
                </div>
            </div>
        </div>
        @if($similarcompanies && !$similarcompanies->isEmpty())
            <div class="px-4 lg:px-0">
                <div class="mt-12">
                    <h2 class="text-2xl">Similar Companies on {{ @$company->category->name }}</h2>
                </div>
                <ul role="list" class="mt-6 grid grid-cols-1 gap-x-6 gap-y-8 lg:grid-cols-3 xl:gap-x-8">
                    @foreach ($similarcompanies as $company)
                        <li class="overflow-hidden rounded-xl border border-gray-200">
                            <div class="flex items-center gap-x-4 border-b border-gray-900/5 bg-gray-50 p-6">
                            <div class="text-sm font-medium leading-6 text-gray-900">
                                <a href="{{route('company',$company->slug)}}">{{$company->name}}</a>
                            </div>
                            </div>
                            <dl class="-my-3 divide-y divide-gray-100 px-6 py-4 text-sm leading-6">
                            <div class="flex justify-between gap-x-4 py-3">
                                <dt class="text-gray-500">Authority Score</dt>
                                <dd class="text-gray-700">{{ @$company->trafficMetric->authority_score }}</dd>
                            </div>
                            <div class="flex justify-between gap-x-4 py-3">
                                <dt class="text-gray-500">Est. Organic Traffic</dt>
                                <dd class="flex items-start gap-x-2">
                                <div class="font-medium text-gray-900">{{number_format(@$company->trafficMetric->organic_traffic)}}</div>
                                </dd>
                            </div>
                            </dl>
                        </li>
                    @endforeach

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


    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/@fancyapps/ui@5.0/dist/fancybox/fancybox.css"
    />
    <script src="https://cdn.jsdelivr.net/npm/@fancyapps/ui@5.0/dist/fancybox/fancybox.umd.js"></script>
    <script>
      Fancybox.bind('[data-fancybox="gallery"]', {
      });
    </script>
@endsection