@extends('layouts.app')
@section('title', $user->name)
@section('content')
<section class="relative about-banner">
    <div
        class="bannerInner bg-gradient-to-t from-[#AABF86] from-[-60%] to-80% to-[#F4FFE1] md:px-20 md:pt-[8rem] md:pb-[8rem] w-[90%] mx-auto rounded-3xl">
        <div class="container">
            <div class="md:flex md:items-center md:justify-center">
                <h1 class="text-3xl md:text-6xl text-black font-extrabold relative max-[991px]:text-center">{{$user->store->name}}</h1>
            </div>
        </div>
    </div>
</section>
<section class="marketsection w-[90%] mx-auto pt-[5rem] mb-[5rem]">
    <div class="flex flex-wrap">
        <div class="w-1/4 px-4">
            <div class="bg-[#CFDBBB] p-8 rounded-3xl my-5">
                <div class="user-profile">
                    <img src="{{ asset($user->store->image) }}"/>
                    <h4>{{ $user->store->name }}</h4>
                    <p>{!! $user->store->description !!}</p>
                </div>
            </div>
            <div class="bg-[#CFDBBB] p-8 rounded-3xl my-5">
                <div class="store">
                    <h4>Store Policies</h4>
                    {!! $user->store->store_policies !!}
                </div>
            </div>
            <div class="bg-[#CFDBBB] p-8 rounded-3xl my-5">
                <div class="store">
                    <h4>Shipping Policies</h4>
                    {!! $user->store->shipping_policies !!}
                </div>
            </div>
        </div>
        <div class="w-2/3 px-4">
            <div class="flex justify-center">
                <div class="grid grid-cols-3 gap-8 my-5 w-fit">
                    @foreach($user->products as $key => $value)
                    <div>
                        <a href="{{ route('product.detail', $value->slug) }}" class="product-box">
                            <figure class="mb-5">
                                <img class="w-full h-full object-contain" src="{{ asset($value->image) }}" alt="{{ $value->name }}">
                            </figure>
                            <div class="flex justify-between">
                                <p class="text-base">{{ $value->name }}</p>
                                <div class="rounded-xl bg-black px-3 py-1 text-sm text-white">${{$value->get_min_price()}} - ${{$value->get_max_price()}}</div>
                            </div>
                        </a>
                    </div>
                    @endforeach
                </div>
            </div>
        </div>
    </div>
</section>
@endsection