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

@section('title', '部品詳細')

@section('content')
    <main>
        <div id="mv">
            <h1>部品詳細</h1>
        </div>
        <article class="w1200">
            <div class="numberandshop-wrap">
                <ul class="numberandshop-under">
                    <li><a href="{{ route("frontend.{$_fb_department}.contact.index", ["id"=>$parts['parts_id']]) }}">お問い合わせ</a></li>
                    <li>管理番号：<span>{{ $parts['parts_code'] }}</span></li>
                </ul>
            </div>
            <div id="wrap-slide">
                @if($parts['support_status'] == config('const.vehicle_enquiry_status.during_talking'))
                    <i class="talk"><span>商談中</span>{{ (!empty($parts['discussion_period']) && !empty($parts['discussion_period_to'])) ? Carbon::parse($parts['discussion_period'])->format('m月d日').'～'.Carbon::parse($parts['discussion_period_to'])->format('m月d日') : '' }}</i>
                @elseif($parts['sale_status'] == config('const.parts_sale_status_code.finish_sale'))
                    <i class="sold">売約済</i>
                @elseif(($parts['hp_publish'] == config('const.parts_public_status_code.public')) && !empty($parts['hp_publish_date']) && Carbon::parse($parts['hp_publish_date'])->diffInDays(Carbon::now()) <= 7)
                    <i class="new">NEW</i>
                @elseif($parts['hp_publish'] == config('const.parts_public_status_code.expected') || $parts['sale_status'] == config('const.parts_sale_status_code.before_sale'))
                    <i class="expected">入庫予定</i>
                @endif
                <div class="slider-left">
                    <ul id="slider">
                        @php
                        $image_count = 0;
                        @endphp
                        @if(is_object($images) && $images->count() > 0)
                            @foreach($images as $image)
                                @if(!empty($image->file_path) && Storage::disk('parts')->has($parts['parts_id'].'/'.$image->file_path))
                                    <li class="slide-item">
                                        <div class="pic"><img src="{{ asset("assets/frontend/{$_fb_department}/img/common/loading.gif") }}" data-original="{{ asset('storage/parts/') }}/{{ $parts['parts_id'] }}/{{ $image->file_path }}" class="lazy">
                                            <p>{{ $image->comment }}</p>
                                        </div>
                                    </li>
                                    @php
                                        $image_count++;
                                    @endphp
                                @endif
                            @endforeach
                        @endif
                        @if($image_count == 0)
                            <li class="slide-item">
                                <div class="pic"><img src="{{ asset("assets/frontend/{$_fb_department}/img/common/loading.gif") }}" data-original="{{ asset("assets/frontend/{$_fb_department}/img/pic/i_noimage.gif") }}" class="lazy">
                                    <p></p>
                                </div>
                            </li>
                        @endif
                    </ul>
                    {{--
                    <div class="search-navi"> <span id="select" class="search_item select">ALL</span><span id="a" class="search_item">外装</span><span id="b" class="search_item">キャブ内</span><span id="c" class="search_item">その他</span> </div>
                    --}}
                    <ul id="thumbnail-list">
                        @php
                            $image_count = 0;
                        @endphp
                        @if(is_object($images) && $images->count() > 0)
                            @foreach($images as $key => $image)
                                @if(!empty($image->file_path) && Storage::disk('parts')->has($parts['parts_id'].'/'.$image->file_path))
                                    <li class="thumbnail-item a"><img src="{{ asset("assets/frontend/{$_fb_department}/img/common/loading.gif") }}" data-original="{{ asset('storage/parts/') }}/{{ $parts['parts_id'] }}/{{ $image->file_path }}" class="lazy"></li>
                                    @php
                                        $image_count++;
                                    @endphp
                                @endif
                            @endforeach
                        @endif
                        @if($image_count == 0)
                            <li class="thumbnail-item a b c"><img src="{{ asset("assets/frontend/{$_fb_department}/img/common/loading.gif") }}" data-original="{{ asset("assets/frontend/{$_fb_department}/img/pic/i_noimage.gif") }}" class="lazy"></li>
                        @endif
                    </ul>
                </div>
                <div class="slider-right">
                    <div class="title-wrap">
                        @if(Storage::disk('parts_check')->has($parts['parts_id'].'/'.$parts['parts_code']."_チェックシート.pdf"))
                            <ul class="tab-group">
                                <li class="tab-basic is-active">基本仕様</li>
                                <li class="tab-basic">チェックシート </li>
                            </ul>
                        @else
                            <h2 class="title4">基本情報</h2>
                        @endif

                    </div>
                    @if(Storage::disk('parts_check')->has($parts['parts_id'].'/'.$parts['parts_code']."_チェックシート.pdf"))
                        <div class="panel-group">
                            <div class="panel is-show">
                                @include('frontend.parts.parts_search.info_tab._t_info_basic')
                            </div>
                            <div class="panel">
                                @include('frontend.parts.parts_search.info_tab._t_checksheet_pdf')
                            </div>
                        </div>
                    @endif
                    <div id="basic-wrap">
                        @unless(Storage::disk('parts_check')->has($parts['parts_id'].'/'.$parts['parts_code']."_チェックシート.pdf"))
                            @include('frontend.parts.parts_search.info_tab._t_info_basic')
                        @endunless
                        <p><small>※記載の数値(寸法及び重量・積載量)は現時点の車輛状態と異なる場合があり新規・継続検査時に減トン及び構造の変更を要す場合があります。</small></p>
                    </div>
                    <div class="faxandprice">
                        <p class="fax"><a target="_blank" href="{{ asset("assets/frontend/{$_fb_department}/img/pdf/certificate.pdf") }}?20210705"><img src="{{ asset("assets/frontend/{$_fb_department}/img/pic/fax.png") }}" alt="FAXお申し込み"></a></p>
                        <p class="price">価格：@if(!empty($parts['parts_price']) && $parts['hp_publish'] != config('const.parts_public_status_code.expected'))￥<em>{{ $parts['parts_price'] }}</em>（税込）</p> @endif
                    </div>
                </div>
            </div>
        </article>
        <article id="basic">
            <div class="w1200">
                <section>
                    <div id="contact-box">
                        <h3>問い合わせ情報</h3>
                        <div class="contact-left">
                            <p class="tel righttext"><a href="tel:0120106960">0120-1069-60</a></p>
                            <p class="righttext">管理番号：{{ $parts['parts_code']  }}</p>
                        </div>
                        <div class="contact-right">
                            <ul class="contact-list">
                                <li class="mail"><a href="{{ route("frontend.{$_fb_department}.contact.index", ["id"=>$parts['parts_id']]) }}"><span>メール</span>問い合わせ</a></li>
                                <!--li class="line"><a href="https://access.line.me/oauth2/v2.1/login?loginState=g0cMuWdRJSI2OEsqoR4s5K&loginChannelId=1446101138&returnUri=%2Foauth2%2Fv2.1%2Fauthorize%2Fconsent%3Fscope%3Dopenid%2Bprofile%2Bfriends%2Bgroups%2Btimeline.post%2Bmessage.write%26response_type%3Dcode%26redirect_uri%3Dhttps%253A%252F%252Fsocial-plugins.line.me%252Fwidget%252FloginCallback%253FreturnUrl%253Dhttps%25253A%25252F%25252Fsocial-plugins.line.me%25252Fwidget%25252Fclose%26state%3De9f8a8efc08ba33ad0b8d9849d5219%26client_id%3D1446101138#/qr" target="_blank"><span>LINE</span>問い合わせ</a></li-->
                                <!--li class="shaken"><a href="">車検証を見る</a></li-->
                                <li class="printout"><a href="#"  onclick='window.open("{{ route("frontend.{$_fb_department}.parts_search.detail_print",["parts"=>$parts['parts_id']]) }}", "部品詳細", "width=945, height=655, directories=yes, menubar=no, toolbar=yes, scrollbars=yes, resizeable=yes"); return false;' >プリントアウト</a></li>
                            </ul>
                        </div>
                    </div>
                </section>
            </div>
            <div class="w1200 mt50">
                <section>
                    <div class="title-wrap">
                        <h2 class="title4">関連車輛<!--span>この部品に合う車輛あります！</span--></h2>
                    </div>
                    <div id="basic-wrap">
                        <ul class="relation">
                            @if(!is_null($relation_vehicle) && $relation_vehicle->count() > 0)
                                @foreach($relation_vehicle as $vehicle)
                                    <li>
                                        <a href="#{{-- route("frontend.truck.truck_search.detail", ['vehicle'=>$vehicle->id]) --}}">
                                            <div class="pic">
                                                @if(!empty($vehicle->getDefaultImage()))
                                                    <img src="{{ asset("storage/vehicle/images/") }}/{{ $vehicle->id }}/{{ $vehicle->getDefaultImage() }}" alt="">
                                                @else
                                                    <img src="{{ asset("assets/frontend/{$_fb_department}/img/pic/i_noimage.gif") }}" alt="">
                                                @endif
                                            </div>
                                            <div class="txt">
                                                <h3></h3>
                                            </div>
                                        </a>
                                    </li>
                                @endforeach
                            @else
                                <li>関連車輛が存在しません。</li>
                            @endif
                        </ul>
                        <p class="back"> <a href="{{ route('frontend.parts.parts_search.index') }}">部品一覧に戻る</a> </p>
                    </div>
                </section>
            </div>
        </article>

        @include("frontend.{$_fb_department}.layouts.partials.search_parts_list")

    </main>
@endsection

@section('page_css')
    <link rel="stylesheet" href="{{ asset("assets/frontend/{$_fb_department}/css/under.css") }}?{{ Carbon::now()->format('YmdHis') }}">
    <style>
        #parts_checksheet {
            height: 500px;
        }
        .title4 {
            font-size: 16px !important;
        }
        .slider-right table{
            margin-top: 0 !important;
        }
        .parts_detail_info li{
            width: 40% !important;
            list-style: disc !important;
            border-bottom: 1px dotted black;
            padding: 10px !important;
            margin: 10px 3% !important;
            float: left !important;
        }
        .parts_detail_info .bg_white {
            background-color: white !important;
            border: none !important;
        }

        .parts_detail_info th {
            padding: 10px 10px !important;
            width: 30% !important;
            background-color: #f7f7f7 !important;
            color: black !important;
            vertical-align: middle;
            font-size: 13px !important;
        }

        .parts_detail_info td{
            padding: 10px 10px !important;
            background-color: #FFFFFF !important;
            color: black !important;
            width: 70% !important;
            font-size: 13px !important;
        }

        #slider .slick-next  {
            background:url(/assets/frontend/truck/img/slider/icon-next.png) no-repeat;
            background-size: 37px;
            right: 10px;
            width: 37px;
            height: 37px;
            transition: all 0.3s ease-in-out;
        }
        #slider .slick-prev{
            background:url(/assets/frontend/truck/img/slider/icon-prev.png) no-repeat;
            background-size: 37px;
            left: 10px;
            width: 37px;
            height: 37px;
            transition: all 0.3s ease-in-out;
        }
        .faxandprice {
            position: relative !important;
        }
        ul.contact-list li.printout a {
            padding: 18px 10px;
        }
        #wrap-slide .talk {
            left: 0px !important;
            width: 51% !important;
            border-radius: 0 !important;
            top: 0 !important;
            text-align: left !important;
        }
        #wrap-slide .talk span {
            margin: 0 10px !important;
        }
        @media only screen and (max-width: 736px){

            .parts_detail_info th,
            .parts_detail_info td {
                width: 100% !important;
                text-align: center !important;
            }
            .parts_detail_info th {
                background-color: #f7f7f7 !important;
                color: black !important;
                font-weight: bold;
            }
            #slider .slick-next {
                right:15px;
                background: url(/assets/frontend/truck/img/slider/icon-next.png) no-repeat;
                background-size: 30px;
                width: 30px;
                height: 30px;
            }
            #slider .slick-prev  {
                display:block;
                left: 15px;
                background: url(/assets/frontend/truck/img/slider/icon-prev.png) no-repeat;
                background-size: 30px;
                width: 30px;
                height: 30px;
                transition: all 0.3s ease-in-out;
            }
            ul.contact-list li.printout a {
                background: url(/assets/frontend/parts/img/icon/printout.png) no-repeat center 10px;
                background-size: 25px;
                padding-left: 10px;
                border: 2px solid #333;
                text-align: center;
                padding-top: 35px !important;
            }
            #wrap-slide .talk {
                width: 100% !important;
                top: 0 !important;
            }

        }
    </style>
@endsection