@extends("frontend.{$_fb_department}.layouts.app")

@section('title', 'TOP')

@section('content')
    <main>
        <div id="slider-wrap">
            <ul class="slider">
                <li><img src="{{ asset("assets/frontend/{$_fb_department}/img/main/mainimage03.jpg") }}"></li>
                <li><img src="{{ asset("assets/frontend/{$_fb_department}/img/main/mainimage02.jpg") }}"></li>
                <li><img src="{{ asset("assets/frontend/{$_fb_department}/img/main/mainimage01.jpg") }}"></li>
            </ul>
            <div class="search-area box">
                <ul class="btns">
                    <li>車輛検索</li>
                    {{--<li><a href="{{ route('frontend.parts.parts_search.index') }}">部品検索</a></li>--}}
                    <li><a href="http://www.ushiparts.com">部品検索</a></li>
                </ul>
                <div class="search-list">
                    <ul>
                        @foreach(config('const.hp_vehicle_body_category') as $key => $category)
                            <li><a href="{{ route('frontend.truck.truck_search.index', ['search_params[body_category]'=>$key]) }}">
                                    <h2><span>{{ $category }}</span></h2>
                                    <img src="{{ asset("assets/frontend/{$_fb_department}/img/pic/truck{$key}.png") }}" alt="{{ $category }}"></a>
                            </li>
                        @endforeach
                    </ul>
                </div>
            </div>
        </div>
        <article>
            <section id="news"  class="box">
                <h2>新着情報</h2>
                <p class="all"><a href="{{ route("frontend.{$_fb_department}.news.index") }}">All</a></p>
                <ul>
                    @if($news->count() > 0)
                        @foreach($news as $key => $item)
                            <li>
                                <dl>
                                    <dt>{{ Carbon::parse($item->updated_at)->format('Y/m/d') }}</dt>
                                    <dd>{{ $item->title }}</dd>
                                </dl>
                            </li>
                        @endforeach
                    @else
                        <li>
                            <dl>新着情報が存在しません。</dl>
                        </li>
                    @endif
                </ul>

            </section>
            <div id="top-btns">
                <ul>
                    <li class="box"><a href="{{ route("frontend.{$_fb_department}.truck_purchase.index") }}">
                            <h3><span>高価トラック買取</span></h3>
                            <img src="{{ asset("assets/frontend/{$_fb_department}/img/top/pic1.png") }}" alt="高価トラック買取"></a></li>
                    <li class="box"><a href="{{ route("frontend.{$_fb_department}.wrecker.index") }}">
                            <h3><span>トラック専門<br>
                        24時間レッカー作業</span></h3>
                            <img src="{{ asset("assets/frontend/{$_fb_department}/img/top/pic2.png") }}" alt="トラック専門24時間レッカー作業"></a></li>
                    <li class="box"><a href="{{ route("frontend.{$_fb_department}.renovation.index") }}">
                            <h3><span>リノベーション<br>
                        トラック</span></h3>
                            <img src="{{ asset("assets/frontend/{$_fb_department}/img/top/pic3.png") }}" alt="リノベーショントラック"></a></li>
                    <li class="box"><a href="{{ route("frontend.parts.parts_search.index", ['search_params[parts_category]'=>79]) }}" target="_blank">
                            <h3><span>載替用ボディー</span></h3>
                            <img src="{{ asset("assets/frontend/{$_fb_department}/img/top/pic4.png") }}" alt="載替用ボディー"></a></li>
                    <li class="box"><a href="{{ route("frontend.{$_fb_department}.quality.index") }}">
                            <h3><span>安心の価格と品質</span></h3>
                            <img src="{{ asset("assets/frontend/{$_fb_department}/img/top/pic5.png") }}" alt="安心の価格と品質"></a></li>
                    <li class="box"><a href="{{ route("frontend.{$_fb_department}.equipment.index") }}">
                            <h3><span>設備のご案内</span></h3>
                            <img src="{{ asset("assets/frontend/{$_fb_department}/img/top/pic6.png") }}" alt="設備のご案内"></a></li>
                    <li class="box"><a href="{{ route("frontend.{$_fb_department}.bases.index") }}">
                            <h3><span>拠点案内</span></h3>
                            <img src="{{ asset("assets/frontend/{$_fb_department}/img/top/pic7.png") }}" alt="拠点案内"></a></li>
                    <li class="box"><a href="https://www.ushiparts.com/parts/windshield" target="_blank">
                            <h3><span>フロントガラス</span></h3>
                            <img src="{{ asset("assets/frontend/{$_fb_department}/img/top/pic8.png") }}" alt="フロントガラス"></a></li>
                    <li class="box"><a href="http://www.ushiparts.com" target="_blank">
                            <h3><span>部品販売</span></h3>
                            <img src="{{ asset("assets/frontend/{$_fb_department}/img/top/pic9.png") }}" alt="部品販売" target="_blank"></a></li>
                    <li class="box"><a href="http://www.truck-uj.com/company/bases#shop">
                            <h3><span>整備・車検</span></h3>
                            <img src="{{ asset("assets/frontend/{$_fb_department}/img/top/pic10.png") }}" alt="整備・車検" target="_blank"></a></li>
                    {{--<li class="box"><a href="{{ route("frontend.rental.home.index") }}" target="_blank">--}}
                    <li class="box"><a href="http://150.60.170.49/rental/index.html" target="_blank">
                            <h3><span>トラックレンタル</span></h3>
                            <img src="{{ asset("assets/frontend/{$_fb_department}/img/top/pic11.png") }}" alt="トラックレンタル"></a></li>
                    <li class="box"><a href="https://www.smart-truck.co.jp/" target="_blank">
                            <h3><span>トラック<br>
                        短期リース</span></h3>
                            <img src="{{ asset("assets/frontend/{$_fb_department}/img/top/pic12.png") }}" alt="トラック短期リース"></a></li>
                    <li class="box"><a href="{{ route('frontend.truck.outlet.index') }}" >
                            <h3><span>アウトレット<br>
                        トラック</span></h3>
                            <img src="{{ asset("assets/frontend/{$_fb_department}/img/top/pic13.png") }}" alt="アウトレットトラック"></a></li>
                    <li class="box"><a href="{{ route("frontend.{$_fb_department}.movie.index") }}">
                            <h3><span>動画で<br>
                        トラック確認</span></h3>
                            <img src="{{ asset("assets/frontend/{$_fb_department}/img/top/pic14.png") }}" alt="動画でトラック確認"></a></li>
                    <li class="box"><a href="">
                            <h3><span>アプリ<br>準備中</span></h3>
                            <img src="{{ asset("assets/frontend/{$_fb_department}/img/top/uj_brand.png") }}" alt="アプリ"></a></li>
                    <li class="box"><a href="http://www.truck-uj.com/" target="_blank">
                            <h3><span>UJ GROUP<br>
                        会社紹介</span></h3>
                            <img src="{{ asset("assets/frontend/{$_fb_department}/img/top/pic16.png") }}" alt="トラック短期リース"></a></li>
                    <li class="box black"><a href="https://www.youtube.com/channel/UCIa3b852VxFwZrJPUX314LQ" target="_blank">
                            <img src="{{ asset("assets/frontend/{$_fb_department}/img/top/pic17.png") }}" alt="youtube"></a></li>
                    <li class="box"><a href="{{ route("frontend.{$_fb_department}.gallery.index") }}">
                            <h3><span>CMギャラリー<br>
                        <i>TVCM放送チュー!!</i></span></h3>
                            <img src="{{ asset("assets/frontend/{$_fb_department}/img/top/pic18.png") }}" alt="CMギャラリーTVCM放送チュー!!"></a></li>
                    <li class="box"><a href="{{ route("frontend.{$_fb_department}.calender.index") }}">
                            <h3><span>営業カレンダー</span></h3>
                            <img src="{{ asset("assets/frontend/{$_fb_department}/img/top/pic19.png") }}" alt="営業カレンダー"></a></li>
                    <li class="box"><a href="http://www.truck-uj.com/company/recruit/" target="_blank">
                            <h3><span>リクルート<i>一緒に働きましょう！</i></span></h3>
                            <img src="{{ asset("assets/frontend/{$_fb_department}/img/top/pic20.png") }}" alt="リクルート"></a></li>
                </ul>
            </div>
            <section id="recommend" class="box">
                <h2 class="title">おすすめ車輛・部品</h2>
                <div id="recommendInner" class="clearfix">
                    <ul>
                        @foreach($vehicles as $ob_vehicle)
                            <li>
                                <a href="{{ route("frontend.truck.truck_search.detail", ['vehicle'=>$ob_vehicle->id]) }}" target="_blank">
                                <div class="pic">
                                    @if($ob_vehicle->support_status == config('const.vehicle_enquiry_status.during_talking'))
                                        <i class="talk"><span>商談中</span>{{ (!empty($ob_vehicle->discussion_period) && !empty($ob_vehicle->discussion_period_to)) ? Carbon::parse($ob_vehicle->discussion_period)->format('m月d日').'～'.Carbon::parse($ob_vehicle->discussion_period_to)->format('m月d日') : '' }}</i>
                                    @elseif($ob_vehicle->vehicle_info_basic->sale_status >= config('const.vehicle_sale_status_code.finish_sale'))
                                        <i class="sold">売約済</i>
                                    @elseif($ob_vehicle->vehicle_hp_publish->ujweb_publish == config('const.hp_publish_code.publish') && !empty($ob_vehicle->vehicle_hp_publish->ujweb_publish_date) && Carbon::parse($ob_vehicle->vehicle_hp_publish->ujweb_publish_date)->diffInDays(Carbon::now()) < 7)
                                        <i class="new">NEW</i>
                                    @elseif($ob_vehicle->vehicle_hp_publish->ujweb_publish == config('const.hp_publish_code.expected'))
                                        <i class="expected">入庫予定</i>
                                    @endif
                                </div>
                                @if($ob_vehicle->id && !empty($ob_vehicle->getDefaultImage()) && Storage::disk('vehicle_image')->has($ob_vehicle->id.'/'.$ob_vehicle->getDefaultImage()))
                                    <img src="{{ asset('storage/vehicle/images/') }}/{{ $ob_vehicle->id }}/{{ $ob_vehicle->getDefaultImage() }}" alt="" class="recommendImg" />
                                @else
                                    <img src="{{ asset("assets/frontend/{$_fb_department}/img/pic/i_thumbnail.jpg") }}" alt="" class="recommendImg" />
                                @endif
                                </a>
                            </li>
                        @endforeach
                    </ul>
                </div>
            </section>
            {{--
            <section id="instagram" class="box">
                <h2 class="title">Instagram</h2>
            </section>
            --}}
        </article>
    </main>

@endsection

@section('page_css')
    <link rel="stylesheet" href="{{ asset("assets/frontend/{$_fb_department}/css/top.css") }}">
    <style>
        .discussion_period {
            margin-top: 2px;
            color: #FFF;
            position: absolute;
            text-align: left;
            width: 100%;
            font-size: 12px;
            font-weight: bold;
        }
        #recommendInner .pic {
            float: left;
            width: 100%;
            position: relative;
        }
        #recommendInner .pic i.new {
            background: #E80000;
        }

        #recommendInner .pic i.expected {
            background: #638c37;
        }
        #recommendInner .pic i.sold {
            background: #414042;
        }
        #recommendInner .pic i.talk {
            background: #FBB040;
        }
        #recommendInner .pic i {
            position: absolute;
            width: 50px;
            height: 50px;
            line-height: 50px;
            font-size: 11px;
            color: #FFF;
            border-radius: 50%;
            text-align: center;
            vertical-align: middle;
            font-weight: bold;
            z-index: 99;
            margin-top: 5px !important;
        }
        #recommendInner .pic .talk {
             padding:3px 0;
             height: unset !important;
             width: 100% !important;
             border-radius: 0 !important;
             line-height: 25px !important;
             text-align: left !important;
             left: -4px !important;
         }

        #recommendInner .pic .talk span  {
            margin: 0 5px 0 8px;
        }
        .icons {
            margin-top: -7.7px !important;
        }
        .icons li {
            background-color: #005BAC;
            color: white;
            width: calc(26% - 5px) !important;

        }

        @media only screen and (max-width: 736px){
            #recommendInner .pic .talk {
                line-height: unset !important;
                padding: 5px 0 !important;
            }
        }
    </style>
@endsection