@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">
                                {{--SATINALMA--}}
                                <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">
                                                    conveyor_belt
                                                </span>
                                            </div>
                                            <a href="" class="ml-5 w-0 flex-1">
                                                <dl>
                                                    <dt class="truncate text-sm font-light text-slate-600">12 KAYIT</dt>
                                                    <dd>
                                                        <div class="text-xl font-bold text-slate-600">SATINALMA
                                                            {{--                                                            <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="{{ route('waybill.create') }}" class="font-medium text-slate-600">+ Yeni Oluştur</a>
                                        </div>
                                    </div>
                                </div>
                                {{--STOK--}}
                                <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">
                                                    shelves
                                                </span>
                                            </div>
                                            <a href="" class="ml-5 w-0 flex-1">
                                                <dl>
                                                    <dt class="truncate text-sm font-light text-slate-600">124 ÜRÜN</dt>
                                                    <dd>
                                                        <div class="text-xl font-bold text-slate-600">STOK
                                                            {{--                                                            <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>
                                {{--ÜRETİM--}}
                                <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">
                                                    precision_manufacturing
                                                </span>
                                            </div>
                                            <a href="" class="ml-5 w-0 flex-1">
                                                <dl>
                                                    <dt class="truncate text-sm font-light text-slate-600">23 KAYIT</dt>
                                                    <dd>
                                                        <div class="text-xl font-bold text-slate-600">ÜRETİM</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>

                        {{--SON KAYITLAR--}}
                        <div class="p-4 bg-white mt-4 ring-1 ring-stone-300 rounded-lg shadow">
                            <h2 class="flex items-center text-lg font-jbmono-bold leading-6 text-stone-700 mb-2">
                                <span class="material-symbols-outlined mr-1">
                                    receipt_long
                                </span>
                                Son Kayıtlar
                            </h2>
                            <div class="grid grid-cols-1 sm:grid-cols-3 gap-x-8">
                                <ul role="list" class="grid gap-2">
                                    <h2 class="text-md my-2 font-medium leading-6 text-sky-600">İrsaliyeler</h2>
                                    @foreach($waybills as $waybill)
                                        <li class="content-center bg-slate-100/20 hover:bg-slate-50 hover:shadow transition-all ring-1 ring-slate-100 rounded-lg text-xs tracking-tight">
                                            <a href="#" class="flex flex-1 items-center justify-between truncate px-2">
                                                <div class="flex-1 truncate py-1.5">
                                                    <p class="font-medium text-gray-900 mb-1">{{ $waybill->company->name }}</p>
                                                    @foreach($waybill->lines as $lines)
                                                        <p class="text-gray-500">{{ $lines->product->name }} x{{ $lines->quantity }}</p>
                                                    @endforeach
                                                </div>
                                            </a>
                                        </li>
                                    @endforeach
                                </ul>
                                <ul rule="list" class="divide-y divide-gray-100">
                                    <h2 class="text-md my-2 font-medium leading-6 text-sky-600">Stoklar</h2>
                                    @foreach($products as $product)
                                        <a href="#"
                                           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="grow min-w-0">
                                                <div class="flex items-start gap-x-3">
                                                    <p class="text-sm font-semibold leading-6 text-gray-900">{{ $product->name }}</p>
                                                    <p class="text-sm font-semibold leading-6 text-gray-900">{{ $product->brand }}</p>
                                                </div>
                                            </div>
                                            <div class="flex-none items-center text-end">
                                                <p class="font-semibold leading-6 text-gray-900"><span
                                                        class="text-xs font-normal pr-1">{{ $product->unit }}</span>{{ $product->getStock() }}</p>
                                                <p class="text-xs tracking-tight leading-6 text-gray-500">
                                                    <span class="text-xs">LPP</span>
                                                    {{ number_format($product->getLastPurchasePrice(), 2, ',', '.') }}<span class="text-xs pl-0.5">{{ $product->currency }}</span></p>
                                            </div>
                                        </a>
                                    @endforeach
                                </ul>
                                <ul role="list" class="divide-y divide-gray-100">
                                    <h2 class="text-md my-2 font-medium leading-6 text-sky-600">İmalatlar</h2>
                                    {{--
                                        @foreach($waybills as $waybill)
                                            <a href="#"
                                               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="grow min-w-0">
                                                    <div class="flex items-start gap-x-3">
                                                        <p class="text-sm font-semibold leading-6 text-gray-900">{{ $waybill->note }}</p>
                                                        <p class="text-sm font-semibold leading-6 text-gray-900">{{ $waybill->note }}</p>
                                                    </div>
                                                </div>
                                                <div class="flex-none items-center">
                                                    <p class="font-semibold text-gray-900 sm:block">
                                                        {{ number_format($waybill->total_amount, 2, ',', '.') }}<span class="text-xs pl-0.5">₺</span>
                                                    </p>
                                                </div>
                                            </a>
                                        @endforeach
                                    --}}
                                </ul>
                            </div>

                        </div>
                    </div>

                    {{--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($activities_all 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