@extends('layouts.app')

@section('content')

<div class="container-fluid slick-slider">
    <div class="slick-list" style='width:100%;'>
        <div class="slickTrackPc">
            <img src="{{ asset('images/home/slider/pc/1.jpg') }}" alt="メインビジュアル">
            <img src="{{ asset('images/home/slider/pc/2.jpg') }}" alt="メインビジュアル">
            <img src="{{ asset('images/home/slider/pc/3.jpg') }}" alt="メインビジュアル">
        </div>
        <div class="slickTrackSp">
            <img src="{{ asset('images/home/slider/sp/1.jpg') }}" alt="メインビジュアル">
            <img src="{{ asset('images/home/slider/sp/2.jpg') }}" alt="メインビジュアル">
            <img src="{{ asset('images/home/slider/sp/3.jpg') }}" alt="メインビジュアル">
        </div>
    </div>
</div>

<div class="container">
    <div class="contentArea">
        <div id="topicArea">
            <div class="title">
                <h1>Topic</h1>
                <span>お知らせ</span>
            </div>
            <div id="topic">
                <div class="topicContent">
                    <ul>
                        @foreach($topics as $topic)
                        @if($topic->is_active == 1)
                        <li>
                            <div class="updatedAt"><p>{{ $topic->created_at->format('Y.m.d') }}</p></div>
                            <div class="topicCategory"><p>{{ $topic->name }}</p></div>
                            @if(empty($topic->topic_link))
                            <div class="topicImage"><img src="{{ $topic->topic_image }}" alt="トッピク画像"></div>
                            @else
                            <div class="topicImage"><a href="{{ $topic->topic_link }}" target="_blank"><img src="{{ $topic->topic_image }}" alt="トッピク画像"></a></div>
                            @endif
                            <div class="topicDetail">
                                <p>{!! nl2br(e($topic->contents)) !!}</p>
                            </div>
                        </li>
                        @endif
                        @endforeach
                    </ul>
                </div>
            </div>
        </div>
    </div>

    <div class="contentArea">
        <div id="pickUp">
            <div class="title">
                <h1>Pick Up</h1>
                <span>おすすめ商品</span>
            </div>
            <div class="slick-slider">
                <div class="slick-list">
                    <ul class="autoplay">
                        @foreach($series_categories as $series_category )
                        <li class="pickUpBanner"><a href="{{ $series_category->pdf }}" target="_brank"><img src="{{ $series_category->series_category_image }}" alt="{{ $series_category->name }}"></a></li>
                        @endforeach
                    </ul>
                </div>
            </div>
        </div>
    </div>

    <div class="contentArea">
        <div id="itemTop">
            <div class="title">
                <h1>Item</h1>
                <span>取り扱い商品</span>
            </div>
            <div id="itemBanner">
                <ul>
                    @foreach($item_categories as $item_category)
                    <li class="banner01"><a href="{{ url('item_list') }}?item_category_id={{ $item_category->id }}"><img src="{{ $item_category->category_image }}" alt="{{ $item_category->name }}"></a></li>
                    @endforeach
                    <li class="banner01"><a href="{{ url('series') }}"><img src="{{ asset('images/item/1.jpg') }}" alt="シリーズ"></a></li>
                </ul>
            </div>
        </div>
    </div>
    <div class="contentArea">
        <div id="aboutUs">
            <div class="title">
                <h1>About us</h1>
                <span>株式会社 田中箸店</span>
            </div> 
            <div id="introduction">
                <div id="introductionLeft">
                    <img src="{{ asset('images/home/aboutUs/1.jpg') }}">
                </div>
                <div id="introductionRight">
                    <p>創業昭和23年。<br/>若狭塗箸の産地、福井県小浜市に本社をかまえる箸メーカーです。<br/>自社工場で作り上げる箸を中心に、漆器・陶器・カトラリーなどの<br/>キッチン用品や雑貨を幅広く取り扱っています。</p>
                    <p>Since 1948. We make chopsticks in Obama City in Fukui.Our Town is famous for the production of “wakasanurihashi”（Lacquered chopsticks).<br/>We also handle lacquerware, Tabeleware,and so on.</p>
                </div>
            </div>
            <div id="aboutUsBtn">
                <a href="{{ url('company#company') }}"><button class="btn btnPrimary">会社概要</button></a>
                <a href="{{ url('company') }}"><button class="btn btnPrimary">箸街道とは</button></a>
                <a href="{{ url('contact') }}"><button class="btn btnPrimary">お問い合わせ</button></a>
            </div>
        </div>
    </div>
</div>

@endsection