@extends('layouts.app')

@section('content')

    <div class="">

        @include('components.notification')

        <main>
            <div class="mx-auto max-w-screen-2xl px-4 pt-4 pb-60 sm:px-6 lg:px-8">
                <div class="mx-auto grid max-w-2xl grid-cols-1 grid-rows-1 items-start gap-4 lg:mx-0 lg:max-w-none lg:grid-cols-3">

                    <div class=" lg:col-span-2 lg:row-span-2 lg:row-end-2 gap-4">
                        {{--SAYFA İŞLEMLERİ--}}
{{--
                        <div
                            class="mx-auto p-4 shadow ring-1 bg-white ring-stone-300 sm:mx-0 sm:rounded-lg lg:col-span-2 lg:row-span-2 lg:row-end-2">
                            <div class="grid grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-3">
                                <!-- MÜŞTERİLER -->
                                <div
                                    class="overflow-hidden ring-1 ring-emerald-200 rounded-lg bg-white shadow hover:ring-emerald-400 hover:shadow-xl transition-all">
                                    <div
                                        class="p-5 bg-emerald-100/40 hover:bg-emerald-100 hover:shadow-2xl transition-all">
                                        <div class="flex items-center">
                                            <div class="flex-shrink-0">
                                                <span class="material-symbols-outlined text-4xl text-emerald-600">
                                                    store
                                                </span>
                                            </div>
                                            <a href="" class="ml-5 w-0 flex-1">
                                                <dl>
                                                    <dt class="truncate text-sm font-medium text-emerald-600">{{ $count_clients }}</dt>
                                                    <dd>
                                                        <div class="text-xl font-bold text-emerald-600">MÜŞTERİLER
                                                        </div>
                                                    </dd>
                                                </dl>
                                            </a>
                                        </div>
                                    </div>
                                    <div
                                        class="bg-emerald-50 px-5 py-3 hover:bg-emerald-100 hover:shadow-2xl transition-all">
                                        @include('sideovers.new-client')
                                    </div>
                                </div>

                                <!-- TEDARİKÇİLER -->
                                <div
                                    class="overflow-hidden ring-1 ring-amber-200 rounded-lg bg-white shadow hover:ring-amber-400 hover:shadow-xl transition-all">
                                    <div class="p-5 bg-amber-100/40 hover:bg-amber-100 hover:shadow-2xl transition-all">
                                        <div class="flex items-center">
                                            <div class="flex-shrink-0">
                                                <span class="material-symbols-outlined text-4xl text-amber-600">
                                                    help_clinic
                                                </span>
                                            </div>
                                            <a href="" class="ml-5 w-0 flex-1">
                                                <dl>
                                                    <dt class="truncate text-sm font-medium text-amber-600">{{ $count_suppliers }}</dt>
                                                    <dd>
                                                        <div class="text-xl font-bold text-amber-600">TEDARİKÇİLER</div>
                                                    </dd>
                                                </dl>
                                            </a>
                                        </div>
                                    </div>
                                    <div
                                        class="bg-amber-50 px-5 py-3 hover:bg-amber-100 hover:shadow-2xl transition-all">
                                        @include('sideovers.new-supplier')
                                    </div>
                                </div>

                                <!-- KİŞİLER -->
                                <div
                                    class="overflow-hidden ring-1 ring-slate-200 rounded-lg shadow hover:ring-slate-400 hover:shadow-xl transition-all">
                                    <div class="p-5 bg-slate-100/40 hover:bg-slate-100 hover:shadow-2xl transition-all">
                                        <div class="flex items-center">
                                            <div class="flex-shrink-0">
                                                <span class="material-symbols-outlined text-4xl text-slate-600">
                                                    person
                                                </span>
                                            </div>
                                            <a href="" class="ml-5 w-0 flex-1">
                                                <dl>
                                                    <dt class="truncate text-sm font-medium text-slate-600">0</dt>
                                                    <dd>
                                                        <div class="text-xl font-bold text-slate-600">KİŞİLER
                                                            <span class="text-xs font-normal text-slate-400">YAKINDA</span>
                                                        </div>
                                                    </dd>
                                                </dl>
                                            </a>
                                        </div>
                                    </div>
                                    <div
                                        class="bg-slate-50 px-5 py-3 hover:bg-slate-100 hover:shadow-2xl transition-all">
                                        <div class="text-sm">
                                            <a href="#" class="font-medium text-slate-600">+ Yeni Oluştur</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
--}}

                        {{--TÜM İŞLETMELER--}}
                        <div class="p-4 bg-white ring-1 ring-stone-300 rounded-lg shadow">
                            <h2 class="flex items-center text-lg font-jbmono-bold leading-6 text-stone-700 mb-4">
                                <span class="material-symbols-outlined mr-1">
                                    receipt_long
                                </span>
                                Tüm Müşteriler
                            </h2>
                            <div class="grid grid-cols-1 gap-x-8">
                                <ul role="list" class="divide-y divide-gray-100">
                                    @foreach($clients as $client)
                                        <a href="{{ route('companies.show', $client->slug) }}"
                                           class="flex items-center justify-start gap-x-4 py-2 hover:bg-stone-50 hover:ring-1 hover:ring-stone-200 hover:px-2 hover:-mx-2 hover:shadow hover:rounded-xl transition-all">
                                            <div class="flex-none">
                                                <span
                                                    class="inline-flex h-10 w-10 items-center justify-center rounded-full bg-emerald-50 ring-1 ring-emerald-100">
                                                    <span
                                                        class="font-bold text-emerald-500">{{ $client->shortname }}</span>
                                                </span>
                                            </div>
                                            <div class="grow min-w-0">
                                                <div class="flex items-start gap-x-3">
                                                    <p class="text-sm font-semibold leading-6 text-gray-900">{{ $client->name }}</p>
                                                </div>
                                                <div class="gap-y-2 text-xs leading-5 text-gray-500">
                                                    @if($client->getCompanyLastPaidDate($client->id) == null && $client->getCompanyLastInvoiceDate($client->id) > 10)
                                                        <div class="flex items-center whitespace-nowrap text-xs text-rose-400">
                                                            <span class="material-symbols-outlined text-rose-400 text-sm">priority_high</span>
                                                            <p class="text-rose-400">hiç tahsilat yapılmadı</p>
                                                        </div>
                                                    @endif
                                                    @if($client->getCompanyLastPaidDate($client->id) > 30)
                                                        <div class="flex items-center whitespace-nowrap text-xs text-amber-400">
                                                            <span class="material-symbols-outlined text-amber-400 text-sm">priority_high</span>
                                                            <p class="text-amber-400">geciken ödeme</p>
                                                        </div>
                                                    @endif
                                                    @if($client->hasInvoiceAddress() == 0)
                                                        <div class="flex items-center whitespace-nowrap text-xs text-stone-400">
                                                            <span class="material-symbols-outlined text-stone-400 text-sm">priority_high</span>
                                                            <p class="text-stone-400">fatura adresi yok</p>
                                                        </div>
                                                    @endif
                                                </div>
                                            </div>
                                            <div class="flex-none items-center">
                                                <p class="font-semibold text-gray-900 sm:block">
                                                    {{ number_format($client->getCompanyBalance(), 2, ',', '.') }}<span class="pl-0.5">₺</span>
                                                </p>
                                            </div>
                                        </a>
                                    @endforeach
                                </ul>
                            </div>

                        </div>
                    </div>

                    {{--BU GUN - AKTIVITELER--}}
                    <div class="p-4 shadow bg-white ring-1 ring-stone-400/20 sm:mx-0 sm:rounded-lg lg:col-start-3">
                        <!-- Activity feed -->
                        <h2 class="flex items-center text-lg font-jbmono-bold leading-6 text-stone-700">
                            <span class="material-symbols-outlined mr-1">
                                bolt
                            </span>
                            Aktiviteler
                        </h2>
                        <ul role="list" class="mt-6 space-y-6">

{{--
                            @forelse($companies_activity as $activity)
                                @if($activity->type == 'new' || 'update')
                                    <li class="relative flex gap-x-4">
                                        @if(!$loop->last)
                                            <div class="absolute left-0 top-0 flex w-6 justify-center -bottom-6">
                                                <div class="w-px bg-gray-200"></div>
                                            </div>
                                        @endif
                                        <div
                                            class="relative flex h-6 w-6 flex-none items-center justify-center bg-white">
                                            <div
                                                class="h-1.5 w-1.5 rounded-full bg-gray-100 ring-1 ring-gray-300"></div>
                                        </div>
                                        <p class="flex-auto py-0.5 text-xs leading-5 text-gray-500">
                                            <span class="font-medium text-gray-900">{{ $activity->user->name }}</span>
                                            <br>{{ $activity->content }}
                                        </p>
                                        <time datetime="2023-01-23T10:32"
                                              class="flex-none py-0.5 text-xs leading-5 text-gray-500">{{ $activity->created_at->diffForHumans() }}
                                        </time>
                                    </li>
                                @elseif($activity->type == 'action')
                                    <li class="relative flex gap-x-4">
                                        @if(!$loop->last)
                                            <div class="absolute left-0 top-0 flex w-6 justify-center -bottom-6">
                                                <div class="w-px bg-gray-200"></div>
                                            </div>
                                        @endif
                                        <img
                                            src="https://images.unsplash.com/photo-1550525811-e5869dd03032?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
                                            alt="" class="relative mt-3 h-6 w-6 flex-none rounded-full bg-gray-50">
                                        <div class="flex-auto bg-stone-50 rounded-md p-3 ring-1 ring-inset ring-gray-200">
                                            <div class="flex justify-between gap-x-4">
                                                <div class="py-0.5 text-xs leading-5 text-gray-500">
                                                    <span class="font-medium text-gray-900">{{ $activity->user->name }}</span>
                                                    {{ $activity->content }}
                                                </div>
                                                <time datetime="2023-01-23T15:56"
                                                      class="flex-none py-0.5 text-xs leading-5 text-gray-500">{{ $activity->created_at->diffForHumans() }}
                                                </time>
                                            </div>
                                            <p class="text-sm leading-6 text-gray-500">{{ $activity->content }}</p>
                                            <p class="text-xs leading-6 text-gray-400">#{{ $activity->company->name }}</p>
                                        </div>
                                    </li>
                                @elseif($activity->type == 'income')
                                    <li class="relative flex gap-x-4">
                                        @if(!$loop->last)
                                            <div class="absolute left-0 top-0 flex w-6 justify-center -bottom-6">
                                                <div class="w-px bg-gray-200"></div>
                                            </div>
                                        @endif
                                        <div
                                            class="relative flex h-6 w-6 flex-none items-center justify-center bg-white">
                                            <svg class="h-6 w-6 text-emerald-600" viewBox="0 0 24 24" fill="currentColor"
                                                 aria-hidden="true">
                                                <path fill-rule="evenodd"
                                                      d="M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12zm13.36-1.814a.75.75 0 10-1.22-.872l-3.236 4.53L9.53 12.22a.75.75 0 00-1.06 1.06l2.25 2.25a.75.75 0 001.14-.094l3.75-5.25z"
                                                      clip-rule="evenodd"/>
                                            </svg>
                                        </div>
                                        <p class="flex-auto py-0.5 text-xs leading-5 text-gray-500">
                                            <span class="font-medium text-gray-900">{{ $activity->company->name }}</span>
                                            {{ $activity->content }}
                                        </p>
                                        <time datetime="2023-01-24T09:20"
                                              class="flex-none py-0.5 text-xs leading-5 text-gray-500">{{ $activity->created_at->diffForHumans() }}
                                        </time>
                                    </li>
                                @endif
                            @empty
                                @include('components.empty-plant', [
                                    'title' => 'Henüz aktivite yok',
                                    'content' => ''
                                ])
                            @endforelse
--}}

                        </ul>
                    </div>

                </div>
            </div>
        </main>
    </div>

@endsection