@extends('layouts.app')
@section('title', 'Many Wear')
@section('description', 'モデルになれるショッピングサイト')

@section('content')
<style type="text/css">
@media only screen and (max-width: 640px){
    .swiper-button-next, .swiper-button-prev {
        display: none !important;
    }
}
</style>
<div class="w-full">
    <div class="swiper-container mb-8">
        <ul class="swiper-wrapper">
            <li class="swiper-slide">
                <a href="{{ url('/search?keyword=ねむる3羽のフクロウ#result') }}">
                    <picture>
                        <source srcset="{{ asset('images/bnr/bnr_02.jpg') }}" media="(min-width: 640px)">
                        <img src="{{ asset('images/bnr/bnr_sp02.jpg') }}" alt="" />
                    </picture>
                </a>
            </li>
            <li class="swiper-slide">
                <a href="{{ url('/search?keyword=オモいでの繋がる街 Tシャツ#result') }}">
                    <picture>
                        <source srcset="{{ asset('images/bnr/bnr_01.jpg') }}" media="(min-width: 640px)">
                        <img src="{{ asset('images/bnr/bnr_sp01.jpg') }}" alt="" />
                    </picture>
                </a>
            </li>
        </ul>
        <div class="swiper-button-next"></div>
        <div class="swiper-button-prev"></div>
        <div class="swiper-pagination"></div>
    </div>
</div>
<main class="container mx-auto px-6">
    <div class="mb-4">
        <ul class="flex flex-wrap sm:-mx-4">
            @foreach ($posts as $post)
                <li class="w-full sm:w-6/12 lg:w-1/3 sm:px-4 mb-8" x-data="{selected:null}">
                    <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/'.$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%" style="object-fit: cover;height: 320px;" src="{{ $post->img1 }}">
                            @else
                                <video class="mb-4 w-full" src="{{ $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">{{ $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 class="flex flex-wrap px-6 pt-4 pb-2 space-x-4">
                            <a class="bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2 mb-2">#photography</a>
                        </div> -->
                    </div>
                </li>
            @endforeach
            {{ $posts->links() }}
        </ul>
    </div>
    <ul class="flex space-x-3">
        <!-- <li><a class="text-xs text-gray-600" href="">{{ config('app.name', 'Many Wear') }}について</a></li> -->
        <li><a class="text-xs text-gray-600" href="{{ url('/user_policy') }}">利用規約</a></li>
        <li><a class="text-xs text-gray-600" href="{{ url('/privacy') }}">プライバシーポリシー</a></li>
        <li><a class="text-xs text-gray-600" href="{{ url('/terms') }}">特商法</a></li>
        <li><a class="text-xs text-gray-600" href="{{ url('/contact') }}">お問い合わせ</a></li>
    </ul>
</main>
<script>
    let swiper = new Swiper(".swiper-container", {
        loop: true,
        speed: 800,
        autoplay: {
            delay: 5000,
        },
        breakpoints: {
            640: {
                centeredSlides:true,
                slidesPerView:1.2,
                navigation: {
                    nextEl: ".swiper-button-next",
                    prevEl: ".swiper-button-prev",
                },
            },
        },
        pagination: {
          el: ".swiper-pagination",
          clickable: true,
        },
    });
</script>
@endsection