@extends('layouts.admin')

@section('content')
<div class="mb-4">
	<div class="mb-4">
		商品
	</div>
	<div>
		<ul class="border text-center">
			<li class="grid grid-cols-10 gap-4 content-start py-4 border-b">
				<div>商品ID</div>
				<div>商品名</div>
				<div>値段</div>
				<div>色</div>
				<div>サイズ</div>
			</li>
			<li class="grid grid-cols-10 gap-4 content-start py-4">
				<div>{{ $product->id }}</div>
				<div>{{ $product->name }}</div>
				<div>{{ $product->price }}</div>
				<div>{{ $product->color }}</div>
				<div>{{ $product->size }}</div>
			</li>
		</ul>
	</div>
</div>
<div class="mb-8">
	<div class="mb-4">
		商品詳細
	</div>
	<div>
		<ul class="border text-center">
			<li class="grid grid-cols-10 gap-4 content-start border-b py-4">
				<div>商品詳細ID</div>
				<div>商品ID</div>
				<div>商品名</div>
				<div>値段</div>
				<div>色</div>
				<div>サイズ</div>
			</li>
			@foreach ($product->product_details as $product_detail)
				<li class="grid grid-cols-10 gap-4 content-start border-b py-4">
					<div>{{ $product_detail->id }}</div>
					<div>{{ $product_detail->product_id }}</div>
					<div>{{ $product_detail->name }}</div>
					<div>{{ $product_detail->price }}</div>
					<div>{{ $product_detail->color }}</div>
					<div>{{ $product_detail->size }}</div>
				</li>
			@endforeach
		</ul>
	</div>
</div>
<div>
	<div class="mb-4">商品詳細追加</div>
	<form method="POST" action="{{ url('admin/product_detail') }}" enctype="multipart/form-data">
		@csrf
		<input type="hidden" name="product_id" value="{{ $product->id }}">
		<input type="text" name="name" placeholder="名前" value="{{ $product->name }}">
		<input type="text" name="discription" placeholder="概要" value="{{ $product->discription }}">

		<label for="img1">
			<div class="h-12 bg-gray-300 mb-4">画像アップロード1</div>	
			<input id="img1" class="hidden" type="file" name="img1" accept="image/*">
		</label>
<!-- 		<label for="img2">
			<div class="h-12 bg-gray-300 mb-4">画像アップロード1</div>	
			<input id="img2" class="hidden" type="file" name="img2" accept="image/*">
		</label>
		<label for="img3">
			<div class="h-12 bg-gray-300 mb-4">画像アップロード1</div>	
			<input id="img3" class="hidden" type="file" name="img3" accept="image/*">
		</label> -->
		
		<label for="video">
			<div class="h-12 bg-gray-300 mb-8">動画アップロード1</div>	
			<input class="hidden" id="video" type="file" name="video" accept="video/*">
		</label>

		<input type="text" name="color" placeholder="色">
		<input type="text" name="size" placeholder="サイズ">
		<input type="text" name="price" placeholder="金額" value="{{ $product->price }}">
		<button type="submit">作成</button>
	</form>
</div>

@endsection