@extends('layout.index')
@section('title', 'Beğendiğim Ürünler')
@section('content')
    <section class="my-10 lg:px-0 px-4" data-role="my-account">
        <div class="max-w-7xl mx-auto grid lg:gap-4 gap-10 lg:grid-cols-12 grid-cols-1">
            <div class="lg:col-span-3 col-span-1">
                <nav>
                    <ul class="flex gap-2 flex-col">
                        <li>
                            <a class="tab-button" href="{{ site('my-account') }}"> Kullanıcı Bilgilerim </a>
                        </li>
                        <li>
                            <a href="{{ site('my-account/address') }}" class="tab-button"> Adresim </a>
                        </li>
                        <li>
                            <a href="{{ site('my-account/favorites') }}" class="tab-button active"> Beğendiğim Ürünler </a>
                        </li>
                        <li>
                            <a href="{{ site('my-account/orders') }}" class="tab-button"> Siparişlerim </a>
                        </li>
                        <li>
                            <a href="{{ site('my-account/comments') }}" class="tab-button"> Yorumlarım </a>
                        </li>
                        <li>
                            <a href="{{ site('auth/logout') }}" class="py-2 px-3 w-full border border-red-500 rounded-md text-red-500 transition hover:text-white hover:bg-red-500 block cursor-pointer"> Çıkış Yap </a>
                        </li>
                    </ul>
                </nav>
            </div>
            <div class="lg:col-span-9 col-span-1">
                <h3 class="text-lg lg:mb-8 mb-2"> Beğendiğim Ürünler </h3>
                <div class="grid lg:grid-cols-3 grid-cols-2 gap-4">
                    @foreach($products as $product)
                        <div class="block border border-gray-200 rounded-md p-4">
                            <a class="rounded-md" href="{{ site('product/' . $product->slug) }}">
                                <img src="{{ upload('products', json_decode($product->images, true)[0]) }}" class="w-full" alt="">
                            </a>
                            <a href="{{ site('product/' . $product->slug) }}" class="block lg:text-sm text-xs font-bold mt-2.5"> {{ $product->name }} </a>
                            <a href="{{ site('brand/' . db('brand')->where('id', $product->brand)->get()->first()->slug ) }}" class="text-xs text-gray-400 mt-1 font-bold"> {{ db('brand')->where('id', $product->brand)->get()->first()->name }} </a>
                            <a href="{{ site('product/' . $product->slug) }}" class="flex justify-between items-center lg:mt-3 mt-1">
                                <span class="font-bold lg:text-sm text-xs text-black"> {{ CURRENCY . $product->fee }} </span>
                                <button class="text-primary-500 transition hover:text-primary-300" data-role="favorite-product"  data-id="{{ $product->id }}">
                                    <i class="icon-heart"></i>
                                </button>
                            </a>
                            <button class="w-full lg:mt-6 mt-3 border border-gray-300 rounded-full lg:py-2 py-1 lg:px-4 px-2 text-primary-500 transition hover:border-primary-500 hover:text-white hover:bg-primary-500"> Sepete Ekle </button>
                        </div>
                    @endforeach
                </div>
            </div>
        </div>
    </section>
@endsection