@extends('layouts.app')

@section('content')
<main class="container mx-auto mt-10 px-6">
    <div class="w-full sm:px-6">
        <!-- <img class="w-full sm:w-1/2 m-auto" src="{{ asset('images/common/update.png') }}"> -->
        <form class="mb-8 flex flex-wrap" method="GET" action="{{ url('/search') }}">
            @csrf
            <input class="border py-1 px-2 rounded-md w-full sm:w-8/12 mb-2" type="text" name="keyword" value="{{ $keyword }}" placeholder="検索">
            <div class="w-full sm:w-4/12 sm:pl-4 mb-2">
                <button class="border py-1 px-2 rounded-md w-full">検索</button>
            </div>
        </form>
<!--         <div>
            自分の身長に近いモデルを検索
        </div>
        <div>
            自分のウエストに近いモデルを検索
        </div> -->

        <h3 id="result" class="text-2xl mb-6">@if($keyword) 検索結果 @else おすすめ @endif</h3>
        <ul class="flex flex-wrap sm:-mx-4">
            @foreach($results as $result)
                @if($result->post)
                    <li class="w-full sm:w-6/12 lg:w-1/3 sm:px-4 mb-8">
                        <div class="border border-black rounded-md h-full py-6">
                            <div class="flex mb-2 px-6 justify-between content-center relative">
                                <a class="flex items-center mb-2" href="{{ url('post/'.$result->post->id) }}">
                                    @if(optional($result->post->user->profile)->thumbnail)
                                        <img class="mr-2" width="30" src="{{ config('app.aws_url').$result->post->user->profile->thumbnail }}">
                                    @else
                                        <span class="material-icons-round mr-2">account_circle</span>
                                    @endif
                                    <h2 class="font-bold text-xl">{{ $result->post->user->name }}</h2>
                                </a>
                            </div>
                            <a href="{{ url('post/'.$result->post->id) }}">
                                @if ($result->post->video == null)
                                    <img class="mb-4 border-t border-b border-black" width="100%" style="object-fit: cover;height: 320px;" src="{{ $result->post->img1 }}">
                                @else
                                    <video class="mb-4" src="{{ $result->post->video }}" style="object-fit: cover;height: 320px;" controls loop></video>
                                @endif
                                
                                <div class="px-6">
                                    <div class="mb-4">
                                        <div class="font-bold mb-2">{{ $result->post->name }}</div>
                                        <div>{{Str::limit($result->post->discription, 80, '…' )}}</div>
                                    </div>
                                    <ul class="">
                                        @foreach( $result->post->post_product as $result->post_product )
                                            <li class="font-bold">
                                                {{ $result->post_product->product->name }}, ¥{{ number_format($result->post_product->product->price * config('price.tax')) }}
                                            </li>
                                        @endforeach
                                    </ul>                         
                                </div>
                            </a>
                        </div>
                    </li>
                @endif
            @endforeach
            {{ $results->links() }}
        </ul>

<!--         <section class="flex flex-col break-words bg-white sm:border-1 sm:rounded-md sm:shadow-sm sm:shadow-lg">
            <header class="font-semibold bg-gray-200 text-gray-700 py-5 px-6 sm:py-6 sm:px-8 sm:rounded-t-md">
                Dashboard
            </header>

            <div class="w-full p-6">
                <p class="text-gray-700">
                    You are logged in!
                </p>
            </div>
        </section> -->
    </div>
</main>
@endsection