@extends('layouts.app')

@section('content')
<main>
	<div class="mypage-wrap">
		<div class="user-img-wrap">
			@if ($user->profile)
				@if ($user->profile->background != null)
					<img style="width: 100%;height: 280px;object-fit: cover;object-fit: cover; opacity: 0.7;" src="{{ config('app.aws_url').$user->profile->background }}">
				@else
					<div id="preview" style="width: 100%;height: 280px;object-fit: cover; cursor: pointer;object-fit: cover; opacity: 0.7;"></div>
				@endif

				@if ($user->profile->thumbnail != null)
					<img class="thumbnail p-2" width="120" src="{{ config('app.aws_url').$user->profile->thumbnail }}">
				@else
					<span class="thumbnail material-icons" style="font-size: 120px;">account_circle</span>
				@endif
			@else
				<div id="preview" style="width: 100%;height: 280px;object-fit: cover; cursor: pointer;object-fit: cover; opacity: 0.7;"></div>
				<span class="thumbnail material-icons" style="font-size: 120px;">account_circle</span>
			@endif
		</div>
		<h2 class="my-6 text-4xl font-bold">{{$user->name}}</h2>
		@if ($user->profile)
			<div class="mt-3 mb-2">{{$user->profile->introduction}}</div>
		@endif

		<a class="bg-red-500 hover:bg-red-600 block text-center py-3 rounded-full w-40 text-white my-6 m-auto" href="{{url('user/'.$user->id.'/edit')}}">{{ __('Edit') }}</a>

	    <div class="container m-auto">
	    	<ul class="flex flex-wrap -mx-4">
	            @foreach ($posts as $post)
	            	<li class="w-full sm:w-1/3 px-4 mb-8" x-data="{selected:null}">
	                    <div class="border border-black rounded-md py-6">
	                        <div class="flex mb-2 px-6 justify-between content-center relative">
	                            <a class="flex items-center mb-2" href="{{ url('post/'.$post->id) }}">
	                                @if(optional($post->user->profile)->thumbnail)
	                                    <img class="mr-2" width="30" src="{{ config('app.aws_url').$post->user->profile->thumbnail }}">
	                                @else
	                                    <span class="material-icons-round mr-2">account_circle</span>
	                                @endif
	                                <h2 class="font-bold text-xl">{{ $post->user->name }}</h2>
	                            </a>
	                            @guest
	                            @else
	                                @if($post->user->id == Auth::user()->id)
	                                    <button @click="selected !== 1 ? selected = 1 : selected = null">
	                                        <span class="material-icons-outlined">more_horiz</span>
	                                    </button>
	                                    <ul class="w-36 top-8 absolute right-6 bg-white z-10 border border-tcross-color rounded-md p-3" x-show.transition="selected == 1">
	                                        <li><a href="{{ url('/post/'.$post->id.'/edit') }}">編集</a></li>
	                                    </ul>
	                                @endif
	                            @endguest
	                        </div>
	                        <a href="{{ url('post/'.$post->id) }}">
	                            @if ($post->video == null)
	                                <img class="mb-4 border-t border-b border-black" width="100%" src="{{ $post->img1 }}">
	                            @else
	                                <video class="mb-4" src="{{ $post->video }}" controls loop></video>
	                            @endif
	                            
	                            <div class="px-6">
	                                <div class="mb-4">
	                                    <div class="font-bold mb-2">{{ $post->name }}</div>
	                                    <div>{{Str::limit($post->discription, 80, '…' )}}</div>
	                                </div>
	                                <ul class="">
	                                    @foreach( $post->post_product as $post_product )
	                                        <li class="font-bold">
	                                            {{ $post_product->product->name }}, ¥{{ number_format($post_product->product->price * config('price.tax')) }}
	                                        </li>
	                                    @endforeach
	                                </ul>                         
	                            </div>
	                        </a>
	                    </div>
	                </li>
	            @endforeach
	            {{ $posts->links() }}
	        </ul>
	    </div>
	</div>
</main>
@endsection