@extends('layouts.app')

@section('content')

<div id="productList" class="container-fluid">
    <div class="container">
        <div class="contentArea">
            <section>
                <div class="pageTopBannerPc">
                    @foreach($categories as $category)
                    <img src="{{ $category->category_image }}">
                    @endforeach
                </div>
            </section>
            <div id="productListArea">
                <div id="productListItem">
                    <div id="productListContent">
                        <ul class="contentList">
                            @foreach($items as $item)
                            @if($item->is_active == 1)
                            <li class="productItem">
                                <img src="{{ $item->item_image }}" alt="{{ $item->name }}">
                                <button class="open btn btnExpansion">画像拡大</button>
                                <input type="hidden" name="itemImg" value="{{ $item->item_image }}">
                                <h5 class="itemName">{{ $item->name }}</h5>
                                <a href="" class="itemDetail"><span class="detailMark"></span>詳細</a>
                                <ul class="itemDetailList">
                                    <li><span>サイズ</span>{{ $item->size }}</li>
                                    <li><span>上代</span>&yen;{{ $item->senior }}</li>
                                    <li><span>JAN</span>{{ $item->jan }}</li>
                                    <li><span>素材</span>{{ $item->material }}</li>
                                    <li><span>塗装</span>{{ $item->paint }}</li>
                                    <li><span>製造国</span>{{ $item->country }}</li>
                                    <li><span>備考</span>{{ $item->remarks }}</li>
                                </ul>
                            </li>
                            @endif
                            @endforeach
                            <div id="overlay"></div>
                            <div id="modalWindow">
                                <img class="itemImg" src="{{ $item->item_image }}" alt="{{ $item->name }}">
                                <button class="close btn btnExpansion">閉じる</button>
                            </div>
                        </ul>
                    </div>
                </div>
                <div id="sideBarPc">
                    <div id="sideBarContent">
                        <div class="title">
                            <h1>商品カテゴリ</h1>
                        </div>
                        <ul>
                            @foreach($sideBarItemCategories as $sideBarItemCategory)
                            <a href="{{ url('item_list') }}?item_category_id={{ $sideBarItemCategory->id }}">
                                <li class="sideBarListTitle">&gt;{{ $sideBarItemCategory->name }}</li>
                            </a>
                            @endforeach
                        </ul>
                        <div class="title">
                            <h1>シリーズ一覧</h1>
                        </div>
                        <ul>
                            @foreach($sideBarSeriesCategories as $sideBarSeriesCategory)
                            <a href="{{ $sideBarSeriesCategory->pdf }}" target="_blank">
                                <li class="sideBarListTitle">&gt;{{ $sideBarSeriesCategory->name }}</li>
                            </a>
                            @endforeach
                        </ul>
                    </div>
                </div>
                <div id="sideBarSp">
                    <h4>Category</h4>
                    <select id="selectBox" class="select-box">
                        <option value="">商品カテゴリーを選択</option>
                        @foreach($sideBarItemCategories as $sideBarItemCategory)
                        <option value="{{ $sideBarItemCategory->id }}">{{ $sideBarItemCategory->name }}</option>
                        @endforeach
                    </select>
                    <h4>Series</h4>
                    <ul>
                        <p>※シリーズのカタログが表示されます。</p>
                        @foreach($sideBarSeriesCategories as $sideBarSeriesCategory)
                        <li>
                            <a href="{{ $sideBarSeriesCategory->pdf }}" target="=_blank">
                                <span>{{ $sideBarSeriesCategory->name }}</span>
                            </a>
                        </li>
                        @endforeach
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>

@endsection