@extends('layouts.app')

@section('content')
    <div class="min-h-screen -mt-16">
        <main class="pt-20">
            <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="grid gap-4 lg:col-start-1 lg:col-end-3">
                        {{-- KATEGORİLER --}}
                        <div class="p-4 shadow ring-1 bg-white ring-stone-300 rounded-lg">
                            <h2 class="flex items-center text-lg font-jbmono-bold leading-6 text-stone-700 mb-4">
                                <span class="material-symbols-rounded mr-1">
                                    category
                                </span>
                                Kategoriler
                            </h2>
                            <div class="grid grid-cols-2 gap-5 lg:grid-cols-3">
                                <!-- Card -->
                                @foreach ($categories as $category)
                                    <div
                                        class="overflow-hidden ring-1 ring-stone-200 rounded-lg bg-stone-100/40 shadow hover:ring-stone-400 hover:shadow-xl transition-all">
                                        <div class="p-5 bg-stone-100/40 hover:bg-stone-100 hover:shadow-2xl transition-all">
                                            <div class="flex items-center">
                                                <div class="flex-shrink-0">
                                                    <span class="material-symbols-rounded text-4xl text-stone-600">
                                                        category
                                                    </span>
                                                </div>
                                                <a href="{{ route('category.products', $category->slug) }}"
                                                    class="ml-4 w-0 flex-1">
                                                    <dl>
                                                        <dt class="truncate text-xs font-light text-stone-500">
                                                            {{ count($category->products) }} KAYIT
                                                        </dt>
                                                        <dd>
                                                            <div class="text-xl truncate font-bold text-stone-600">
                                                                {{ $category->name }}</div>
                                                        </dd>
                                                    </dl>
                                                </a>
                                            </div>
                                        </div>
                                    </div>
                                @endforeach
                                <div
                                    class="overflow-hidden ring-1 ring-stone-200 rounded-lg bg-stone-100/40 shadow hover:ring-stone-400 hover:shadow-xl transition-all">
                                    <div class="p-5 bg-stone-100/40 hover:bg-stone-100 hover:shadow-2xl transition-all">
                                        <div class="flex items-center">
                                            <div class="flex-shrink-0">
                                                <span class="material-symbols-rounded text-4xl text-stone-600">
                                                    clear_all
                                                </span>
                                            </div>
                                            <a href="#" class="ml-4 w-0 flex-1">
                                                <dl>
                                                    <dt class="truncate text-xs font-light text-stone-500">
                                                        {{ count($products) }} KAYIT
                                                    </dt>
                                                    <dd>
                                                        <div class="text-xl truncate font-bold text-stone-600">TÜM
                                                            KAYITLAR
                                                        </div>
                                                    </dd>
                                                </dl>
                                            </a>
                                        </div>
                                    </div>
                                </div>

                            </div>
                        </div>
                        {{-- ÜRÜNLER --}}
                        <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-2">
                                <span class="material-symbols-rounded mr-1">
                                    history
                                </span>
                                Son Ürünler
                            </h2>
                            <div class="grid grid-cols-1 gap-x-8">
                                <ul role="list" class="divide-y divide-gray-100">
                                    @foreach ($products as $product)
                                        <a href="{{ route('products.show', $product->id) }}"
                                            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 items-center justify-center rounded ring-1 ring-stone-100 shadow">
                                                    <img class="h-12 w-12 rounded"
                                                        src="{{ count($product->images) > 0 ? 'https://photo.apper.com.tr/uploads/images/small/' . $product->images[0]->url : 'https://woodsnab.ru/images/default.png' }}"
                                                        alt="">
                                                </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">
                                                        {{ $product->name }}</p>
                                                </div>
                                                <div class="gap-y-2 text-xs leading-5 text-gray-500">
                                                    <p class="whitespace-nowrap">{{ $product->brand }}
                                                        - {{ $product->model }}</p>
                                                    @if ($product->category_id)
                                                        <p class="whitespace-nowrap">{{ $product->category->name }}</p>
                                                    @endif
                                                </div>
                                            </div>
                                            <div class="flex-none items-center">
                                                <p class="font-semibold text-gray-900 sm:block">
                                                    {{ number_format($product->sale_price, 2, ',', '.') }}<span
                                                        class="text-xs ml-1">{{ $product->currency }}</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-rounded mr-1">
                                bolt
                            </span>
                            Aktiviteler
                        </h2>
                        <ul role="list" class="mt-6 space-y-6">
                            <li class="relative flex gap-x-4">
                                <div class="absolute left-0 top-0 flex w-6 justify-center -bottom-6">
                                    <div class="w-px bg-gray-200"></div>
                                </div>
                                <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">Chelsea Hagon</span> created the
                                    invoice.</p>
                                <time datetime="2023-01-23T10:32"
                                    class="flex-none py-0.5 text-xs leading-5 text-gray-500">7d ago
                                </time>
                            </li>
                            <li class="relative flex gap-x-4">
                                <div class="absolute left-0 top-0 flex w-6 justify-center -bottom-6">
                                    <div class="w-px bg-gray-200"></div>
                                </div>
                                <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">Chelsea Hagon</span> edited the
                                    invoice.</p>
                                <time datetime="2023-01-23T11:03"
                                    class="flex-none py-0.5 text-xs leading-5 text-gray-500">6d ago
                                </time>
                            </li>
                            <li class="relative flex gap-x-4">
                                <div class="absolute left-0 top-0 flex w-6 justify-center -bottom-6">
                                    <div class="w-px bg-gray-200"></div>
                                </div>
                                <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">Chelsea Hagon</span> sent the invoice.
                                </p>
                                <time datetime="2023-01-23T11:24"
                                    class="flex-none py-0.5 text-xs leading-5 text-gray-500">6d ago
                                </time>
                            </li>
                            <li class="relative flex gap-x-4">
                                <div class="absolute left-0 top-0 flex w-6 justify-center -bottom-6">
                                    <div class="w-px bg-gray-200"></div>
                                </div>
                                <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">Chelsea Hagon</span> commented
                                        </div>
                                        <time datetime="2023-01-23T15:56"
                                            class="flex-none py-0.5 text-xs leading-5 text-gray-500">3d ago
                                        </time>
                                    </div>
                                    <p class="text-sm leading-6 text-gray-500">Called client, they reassured me
                                        the invoice would be paid by the 25th.</p>
                                </div>
                            </li>
                            <li class="relative flex gap-x-4">
                                <div class="absolute left-0 top-0 flex w-6 justify-center -bottom-6">
                                    <div class="w-px bg-gray-200"></div>
                                </div>
                                <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">Alex Curren</span> viewed the invoice.
                                </p>
                                <time datetime="2023-01-24T09:12"
                                    class="flex-none py-0.5 text-xs leading-5 text-gray-500">2d ago
                                </time>
                            </li>
                            <li class="relative flex gap-x-4">
                                <div class="absolute left-0 top-0 flex w-6 justify-center h-6">
                                    <div class="w-px bg-gray-200"></div>
                                </div>
                                <div class="relative flex h-6 w-6 flex-none items-center justify-center bg-white">
                                    <svg class="h-6 w-6 text-indigo-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">Alex Curren</span> paid the invoice.
                                </p>
                                <time datetime="2023-01-24T09:20"
                                    class="flex-none py-0.5 text-xs leading-5 text-gray-500">1d ago
                                </time>
                            </li>
                        </ul>
                    </div>

                </div>
            </div>
        </main>
    </div>
@endsection

@section('sidebar')
    @include('sideovers.new-product')
@endsection