@extends('layouts.app')

@section('content')

    <header class="bg-gradient-to-b from-stone-100 to-white shadow">
        <div class="lg:divide-y lg:divide-stone-200">
            <nav class="hidden lg:flex" aria-label="Global">
                <div class="bg-gradient-to-b from-stone-600 to-stone-500 ps-2.5 pe-4 py-1.5 text-sm text-stone-50 shadow-sm rounded-e-2xl">İŞLETMELER</div>
                <a href="{{ route('offers.create') }}" type="button" class="px-3.5 py-1.5 text-sm text-stone-500 hover:bg-stone-100 transition-all">Yeni Oluştur</a>
            </nav>
        </div>
    </header>

    <div class="space-y-10 divide-y divide-stone-900/10 max-w-6xl mx-auto pb-24">
        <div class="grid grid-cols-3 gap-x-8 gap-y-8 md:grid-cols-1">

            <div class="grid grid-cols-3 gap-x-4 gap-y-4 pt-5 md:grid-cols-1">

                <div class="flex items-center">
                    <div class="flex-shrink-0">
                        <span class="material-symbols-rounded text-4xl text-stone-600">
                            apartment
                        </span>
                    </div>
                    <div class="pl-2 pb-1 w-0 flex-1">
                        <dl>
                            <dd>
                                <div class="text-2xl font-bold text-stone-600">İŞLETMELER</div>
                            </dd>
                        </dl>
                    </div>
                </div>

                @php
                    function replaceTurkishChars($string) {
                        $turkish = ['ç', 'ğ', 'ı', 'ö', 'ş', 'ü', 'Ç', 'Ğ', 'İ', 'Ö', 'Ş', 'Ü'];
                        $english = ['c', 'g', 'i', 'o', 's', 'u', 'C', 'G', 'I', 'O', 'S', 'U'];
                        return str_replace($turkish, $english, $string);
                    }
                @endphp
                <ul role="list" class="grid grid-cols-1 bg-white gap-4 p-4 rounded-xl shadow sm:grid-cols-2 lg:grid-cols-3">
                    @foreach($companies as $item)
                        <li class="col-span-1 divide-y divide-stone-200 rounded-lg bg-stone-50 shadow-sm border border-stone-300 hover:shadow-lg transition-all">
                            <div class="grid grid-cols-1 h-full content-between">
                                <div class="h-full">
                                    <a href="{{ route('companies.show', $item->slug) }}" class="flex w-full items-center justify-between space-x-6 p-6">
                                        <div class="flex-1 truncate">
                                            <div class="flex items-center space-x-3">
                                                <h3 class="truncate text-lg font-medium text-stone-900">{{ $item->name }}</h3>
                                            </div>
                                            <p class="mt-1 truncate text-sm text-stone-500">{{ $item->city }} {{ $item->country }}</p>
                                            <p class="mt-1 truncate text-sm text-stone-500">{{ $item->phone }}</p>
                                        </div>
                                        <span class="inline-flex h-14 w-14 items-center justify-center rounded-full bg-stone-100 ring-1 ring-stone-300">
                                        <span class="text-lg font-medium leading-none text-stone-700">{{ $item->shortname ?: substr(replaceTurkishChars($item->name), 0, 3) }}</span>
                                    </span>
                                    </a>
                                </div>
                                <div class="grid grid-cols-3 bg-white rounded-b-lg">
                                    <div class="col-span-1 px-2 py-1 flex gap-x-2 items-center text-stone-400">
                                        <span class="material-symbols-rounded text-lg">
                                            hov
                                        </span>
                                        <span>{{ count($item->opportunities) }}</span>
                                    </div>
                                    <div class="col-span-1 px-2 py-1 flex gap-x-2 items-center text-stone-400">
                                        <span class="material-symbols-rounded text-lg">
                                            article
                                        </span>
                                        <span>{{ count($item->offers) }}</span>
                                    </div>
                                    <div class="col-span-1 px-2 py-1 flex gap-x-2 items-center text-stone-400">
                                        <span class="material-symbols-rounded text-lg">
                                            stylus_note
                                        </span>
                                        <span>{{ count($item->deals) }}</span>
                                    </div>
                                </div>
                            </div>
                        </li>
                    @endforeach
                </ul>
            </div>
        </div>
    </div>

@endsection

@section('scripts')

@endsection