@extends('layouts.app')
@section('title', $post->name)
@section('description', $post->description)
@section('og_image', $post->img1)

@section('content')
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/css/toastr.min.css">
<main class="container mx-auto sm:mt-10" x-data="{ 'modalIframe': false }">
    <div class="flex flex-wrap items-start">
        <div class="w-full sm:w-6/12">
            <div class="main-preview-content mb-8">
                <video class="mx-auto @if(!$post->video) hidden @endif" src="@if($post->video) {{ $post->video }} @endif" controls></video>
                <img class="mx-auto @if($post->video) hidden @endif" src="@if(!$post->video) @if($post->img1) {{ $post->img1 }} @elseif($post->img2) {{ $post->img2 }} @elseif($post->img3) {{ $post->img3 }} @endif @endif">
            </div>
            <ul class="flex flex-wrap -mx-4 px-8">
                @if($post->video)
                    <li class="main-preview-thumbnail-video px-4 mb-4">
                        <video class="mx-auto" src="{{ $post->video }}"></video>
                    </li>
                @endif
                @if($post->img1)
                    <li class="main-preview-thumbnail-img px-4 mb-4">
                        <img class="mx-auto" src="{{ $post->img1 }}">
                    </li>
                @endif
                @if($post->img2)
                    <li class="main-preview-thumbnail-img px-4 mb-4">
                        <img class="mx-auto" src="{{ $post->img2 }}">
                    </li>
                @endif
                @if($post->img3)
                    <li class="main-preview-thumbnail-img px-4 mb-4">
                        <img class="mx-auto" src="{{ $post->img3 }}">
                    </li>
                @endif
                @foreach ( $post_products as $post_product )
                    @if ( $post_product->product->img1 )
                        <li class="main-preview-thumbnail-img px-4 mb-4">
                            <img class="mx-auto" src="{{ $post_product->product->img1 }}">
                        </li>
                    @endif
                    @if ( $post_product->product->img2 )
                        <li class="main-preview-thumbnail-img px-4 mb-4">
                            <img class="mx-auto" src="{{ $post_product->product->img2 }}">
                        </li>
                    @endif
                    @if ( $post_product->product->img3 )
                        <li class="main-preview-thumbnail-img px-4 mb-4">
                            <img class="mx-auto" src="{{ $post_product->product->img2 }}">
                        </li>
                    @endif
                @endforeach
            </ul>
        </div>
        <div class="w-full sm:w-6/12 px-8">
            <div class="mb-4 flex">
                <h1 class="w-full text-3xl border-b border-black">
                    {{ $post->name }}
                </h1>
            </div>
            <div class="flex content-center justify-between items-center mb-4">
                <div class="flex items-center">
                    @if(optional($post->user->profile)->thumbnail)
                        <img class="mr-2" width="52" src="{{ config('app.aws_url').$post->user->profile->thumbnail }}">
                    @else
                        <img width="52" class="mr-2" src="{{ asset('images/user/account.png') }}">
                    @endif
                    <h4 class="text-xl">{{ $post->user->name }}</h4>
                </div>
            </div>
            <div class="mb-4 text-sm">
                <div class="mb-4">
                    {{ $post->discription }}
                </div>
                @if (optional($post->user->profile)->weight || optional($post->user->profile)->height || optional($post->user->profile)->foot_size)
                    <div>モデル情報</div>
                    @if (optional($post->user->profile)->weight)
                        <div>
                            体重 {{ optional($post->user->profile)->weight }}kg
                        </div>
                    @endif
                    @if (optional($post->user->profile)->height)
                        <div>
                            身長 {{ optional($post->user->profile)->height }}cm
                        </div>
                    @endif
                    @if (optional($post->user->profile)->foot_size)
                        <div>
                            足の大きさ {{ optional($post->user->profile)->foot_size }}cm
                        </div>
                    @endif
                @endif
            </div>
            <ul class="flex flex-wrap items-center justify-end mb-4 border-b border-black pb-4">
                <li class="mr-4">
                    <a class="twitter_icon" href="https://twitter.com/share?url={{ request()->url() }}&via=atp44158987&related=atp44158987&hashtags=ManyWear,story&text={{ $post->name }}" rel="nofollow" target="_blank">
                        <img class="align-top" width="24" src="{{ asset('images/common/Twitter_Logo_W.png') }}">
                    </a>
                </li>
                <li @click="modalIframe = true" class="h-6 mr-4 cursor-pointer"><span style="line-height: 24px; font-size: 18px;" class="material-icons-outlined h-6 w-6 bg-gray-700 text-white rounded-full text-center">code</span></li>
                <li class="h-6 cursor-pointer" id="link_copy"><span style="line-height: 24px; font-size: 18px;" class="material-icons-outlined h-6 w-6 bg-gray-700 text-white rounded-full text-center">link</span></li>
            </ul>

            <h3 class="w-full mb-2">商品一覧</h3>
            <div class="mb-4">
                @foreach ( $post_products as $post_product )
                    <div class="flex flex-wrap mb-6 items-start -mx-2 border-b">
                        <img class="w-4/12 mb-4 px-2" src="{{ $post_product->product->img1 }}">
                        <div class="w-8/12 px-2">
                            <h3 class="text-xl font-bold mb-2">{{ $post_product->product->name }}</h3>
                            <div class="flex flex-wrap items-center mb-2">
                                <div class="mr-2">{{ $post_product->product->color }} ({{ $post_product->product->size }})</div>
                                <h4 class="text-xl font-bold">¥{{ number_format($post_product->product->price * config('price.tax')) }}</h4> 
                            </div>
                            @livewire('add-cart', ['post_id' => $post->id, 'product_id' => $post_product->product->id, 'product_detail_id' => null])
                        </div>
                    </div>

                    @foreach ( $post_product->product->product_details as $product_detail)
                        <div class="flex flex-wrap mb-6 items-start -mx-2 border-b">
                            @if ($product_detail->img1)
                                <img class="w-4/12 mb-4 px-2" src="{{ $product_detail->img1 }}">
                            @else
                                <img class="w-4/12 mb-4 px-2" src="{{ $post_product->product->img1 }}">
                            @endif
                            <div class="w-8/12 mb-4 px-2">
                                <h3 class="text-xl font-bold mb-2">{{ $product_detail->name }}</h3>
                                <div class="flex flex-wrap items-center mb-2">
                                    <div class="mr-2">{{ $product_detail->color }} ({{ $product_detail->size }})</div>
                                    <h4 class="text-xl font-bold">
                                        ¥{{ number_format($product_detail->price * config('price.tax')) }}
                                    </h4>
                                </div>
                                @livewire('add-cart', ['post_id' => $post->id, 'product_id' => $post_product->product->id, 'product_detail_id' => $product_detail->id])
                            </div>
                        </div>
                    @endforeach
                @endforeach
            </div>
            @if ($post_product->product->size_text)
                <div class="mb-4">
                    <h3  class="font-bold text-xl mb-4">サイズについて</h3>
                    <div>{!! $post_product->product->size_text !!}</div>
                </div>
            @endif
            @if ($post_product->product->material)
                <div class="mb-4">
                    <h3 class="font-bold text-xl mb-4">素材</h3>
                    <div>{!! $post_product->product->material !!}</div>
                </div>
            @endif
        </div>
    </div>

    <div :class="{ 'is-block': modalIframe }" class="hidden fixed z-10 inset-0 overflow-y-auto" aria-labelledby="modal-title" role="dialog" aria-modal="true">
      <div class="flex items-center justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
        <div class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" aria-hidden="true"></div>
        <div class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full">
          <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
            <div class="sm:flex sm:items-start flex-wrap">
                <div class="text-center relative w-full">
                    <h3 class="text-xl font-medium">埋め込む</h3>
                    <span @click="modalIframe = false" class="absolute right-0 top-0 material-icons-outlined">cancel</span>
                </div>

                <div class="w-full mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
                    <textarea class="form-input w-full resize-none mb-2" rows="4">{{ $embed_html }}</textarea>
                    <div class="text-gray-600">埋め込みコードをサイトに埋め込んでください</div>
                </div>
            </div>
          </div>
          <div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
            <button @click="modalIframe = false" id="link_iframe" type="button" class="w-full inline-flex justify-center rounded-full border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:ml-3 sm:w-auto sm:text-sm">
              埋め込みコードをコピー
            </button>
            <button @click="modalIframe = false" type="button" class="mt-3 w-full inline-flex justify-center rounded-full border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm">
              閉じる
            </button>
          </div>
        </div>
      </div>
    </div>
</main>
<script type="text/javascript" src="{{ asset('js/libs/jquery-3.4.1.min.js') }}"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/js/toastr.min.js"></script>
<script type="text/javascript">
$('.main-preview-thumbnail-video').on('click', function() {
    if ($('.main-preview-content').find('video').hasClass('hidden')) {
        $('.main-preview-content').find('video').attr('src', $(this).find('video').attr('src'));
        $('.main-preview-content').find('video').removeClass('hidden');
        $('.main-preview-content').find('img').addClass('hidden');
        $(window).scrollTop(0);
    }

});
$('.main-preview-thumbnail-img').on('click', function() {
    $('.main-preview-content').find('img').attr('src', $(this).find('img').attr('src'));
    $('.main-preview-content').find('img').removeClass('hidden');
    $('.main-preview-content').find('video').addClass('hidden');
    $(window).scrollTop(0);
});


function copyUrl(trg, content) {
    trg.on('click', function() {
        let url = content;
        navigator.clipboard.writeText(url);
        Command: toastr["success"]("コピーしたリンクをSNSやLineに投稿しよう", "コピーしました")

        toastr.options = {
          "closeButton": true,
          "debug": false,
          "newestOnTop": false,
          "progressBar": true,
          "positionClass": "toast-top-right",
          "preventDuplicates": true,
          "onclick": null,
          "showDuration": "300",
          "hideDuration": "1000",
          "timeOut": "1000",
          "extendedTimeOut": "1000",
          "showEasing": "swing",
          "hideEasing": "linear",
          "showMethod": "fadeIn",
          "hideMethod": "fadeOut"
        }
    })
}
copyUrl($('#link_copy'), @json($url));
copyUrl($('#link_iframe'), @json($embed_html));
</script>
@endsection