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

@section('title', '車輛詳細')

@section('content')
    <main>
        @if ($vehicle->vehicle_hp_publish->parts_publish == config('const.hp_publish_code.publish'))
            @include('frontend.share.truck_search._detail')
            @include("frontend.{$_fb_department}.layouts.partials.search_parts_list")
        @else
            <p class="empty_car">車両が存在しません。</p>
        @endif
    </main>
@endsection

@section('page_css')
    <link rel="stylesheet" href="{{ asset("assets/frontend/{$_fb_department}/css/under.css") }}?{{ Carbon::now()->format('YmdHis') }}">

    <style>
        #thumbnail-list {
            width: 100%;
            position: absolute;
        }
        #verification_doc_img {
            width: 100% !important;
            margin: 0 auto !important;
            margin-bottom: 20px !important;
        }
        #verification_doc_img img {
            width: 100% !important;
        }
        ul.contact-list li.printout {
            width: 33%;
        }
        ul.contact-list li.printout a {
            background: url(/assets/frontend/truck/img/icon/printout.png) 20px 50% no-repeat;
            background-size: 25px;
            text-align: left;
            padding-left: 60px;
            border: 2px solid #333;
        }

        ul.contact-list {
            margin-top: 10px !important;
        }
        ul.contact-list li span {
            display: block !important;
        }
        ul.contact-list li {
            width: 32%;
        }

        div.vehicle-info .panel {
            box-shadow: 0 0 3px #CCC;
            border-radius: unset;
            padding: 10px 10px;
            margin-bottom: 5px;
        }

        div.vehicle-info .tab-group {
            margin: unset;
        }

        div.vehicle-info .tab-group li {
            box-shadow: 0 0 3px #CCC;
        }
        img {
            vertical-align: middle !important;
        }
        .vehicle-detail {
            margin: unset !important;
            padding: 20px 0;
            background: #fff;
            border-radius: 5px;
            box-sizing: border-box;
        }

        .vehicle-detail ul#thumbnail-list{
            display: inline-block;
            margin-top: 10px;
        }
        .vehicle-summary {
            position: relative;
            margin: 30px 0 10px 0;
            padding: 0 20px;
            font-size: 24px;
            background: #fff;
            border-radius: 5px;
            box-sizing: border-box;
            overflow: hidden;
        }
        .vehicle-summary h2 {
            font-size: 20px;
            font-weight: bold;
            color: #005BAC;
            padding: 25px 0 0;
        }
        .vehicle-summary > span {
            background: #005BAC;
            padding: 5px 15px;
            color: #fff;
            font-size: 20px;
        }
        .vehicle-price span {
            font-family: 'Anton',"メイリオ",helvetica, sans-serif;
            font-size: 40px;
            font-weight: bold;
            color: #005BAC;
            margin: 0 0 0 5px;
        }
        .vehicle-price span span {
            font-size: 18px;
        }
        .slider-right table{
            margin-top: 0 !important;
        }
        .vehicle_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;
        }
        .vehicle_detail_info .bg_white {
            background-color: white !important;
            border: none !important;
        }

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

        .vehicle_detail_info td{
            padding: 10px 10px !important;
            background-color: #FFFFFF !important;
            color: black !important;
            width: 70% !important;
            font-size: 13px !important;
        }
        #vehicle_verify_doc {
            height: 500px !important;
        }
        #vehicle_checksheet {
            height: 300px !important;
        }
        .text-center {
            text-align: center !important;
        }
        .vehicle_basic_info {
            border-collapse: collapse;
            width: 100% !important;
            margin-bottom: 20px !important;
            font-size: small !important;
        }
        .vehicle_basic_info th{
            background-color: #eee !important;
            border: 1px solid #fff !important;
            color: #333 !important;
            padding: 4px 8px 5px !important;
            vertical-align: top !important;
            width: 152px !important;
            box-sizing: border-box !important;
            font-size: small !important;
        }
        .vehicle_basic_info td {
            border: #fff solid 1px !important;
            padding: 4px 8px 5px !important;
            vertical-align: top !important;
            background: #f5f5f5 !important;
            font-size: small !important;
        }
        .tire_table {
            width: 100% !important;
            border: none !important;
        }
        .tire_table td {
            padding: 5px !important;
            border: none !important;
            width: 20% !important;
        }
        .tire_table td div {
            background-color: #fff37c;
            text-align: center;
            width: 98% !important;
            height: 25px !important;
            padding-top: 10px !important;
            border-radius: 5px !important;
            margin: auto !important;
            color: black !important;
        }
        .pt20 {
            padding-top: 20px !important;
            font-size: 10px !important;
        }


        #contactAreaTxt {
            margin: 0 0 20px;
            padding: 40px 0;
            background: #fff697;
            text-align: center;
        }
        #contactAreaWrap {
            margin: 0 0 30px;
            overflow: hidden;
            width: 100% !important;
        }
        #contactAreaTxt p {
            font-size: 24px;
        }
        .vehicle-summary p {
            float: right;
            font-size: 13px;
        }
        .notice {
            font-size: 13px;
            margin: 0 0 40px;
        }
        .thum {
            overflow: hidden;
            background: #f5f5f5;
            padding: 20px;
            box-sizing: border-box;
        }
        .thum ul {
            background: #fff;
            padding: 3px;
            overflow: hidden;
            box-sizing: border-box;
            width: 545px !important;
        }
        .thum li {
            display: inline;
            float: left;
            /* margin: 0 1px 1px 0; */
            border-right: 1px solid #fff;
            border-bottom: 1px solid #fff;
        }
        .thum li img {
            width: 76px !important;
            height: 63px !important;
        }
        .thum .liLast {
            border-right: none;
        }
        .thumLast {
            margin: 0;
        }
        .navWrap {
            margin: 0 0 50px;
            background: #005BAC;
            -moz-box-shadow: 0px 5px 0px 0px #8d0813;
            -webkit-box-shadow: 0px 5px 0px 0px #8d0813;
            box-shadow: 0px 5px 0px 0px #8d0813;
            background-color: #e60013;
        }
        .contactAreaBtn a {
            background: #555555;
            border-radius: 5px;
            box-shadow: 0 3px 0 rgba(61, 61, 61, 1);
        }
        .printBtn a {
            background: #555555;
            border-radius: 5px;
            box-shadow: 0 3px 0 rgba(61,61,61,1);
        }
        .skypeBtn a {
            background: #00aff0;
            border-radius: 5px;
            box-shadow: 0 3px 0 rgba(0,147,201,1);
        }
        .vehicle-price {
            text-align: right;
            line-height: 1;
        }
        .btnAreaBox {
            text-align: right;
        }
        #btnArea {
            overflow: hidden;
            margin: 0 0 20px;
            display: inline-block;
        }
        #btnArea li {
            display: inline;
            float: left;
            margin: 0 0 0 8px;
        }
        #btnArea li a {
            display: block;
            padding: 0 8px;
            margin: 0 0 3px;
            border-radius: 5px;
            height: 26px;
            line-height: 26px;
            box-sizing: border-box;
        }
        #basic-wrap {
            margin-right: 20px !important;
        }
        .lineBtn a {
            background: #00c300;
            box-shadow: 0 3px 0 rgba(0,153,0,1);
        }
        #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;
        }

        ul.relation {
            display: flex;
            flex-wrap: wrap;
        }

        ul.relation li{
            box-sizing: border-box;
            position: relative;
        }

        #thumbnail-list li {
            width: 7% !important;
            margin: 0 0.3% 0.3% 0.3% !important;
        }
        .slider-right {
            width: 39% !important;
        }
        .slider-left {
            width: 60% !important;
            margin-right: 1% !important;
        }
        #wrap-slide .talk {
            left: 0px !important;
            width: 60% !important;
            border-radius: 0 !important;
            top: 0 !important;
            text-align: left !important;
        }
        #wrap-slide .talk span {
            margin: 0 10px !important;
        }
        #wrap-slide .dismantle {
             left: 20px !important;
             width: auto !important;
             border-radius: 10px !important;
             top: 20px !important;
             text-align: left !important;
             background: #ff8200;
             border: #ff8200 solid 1px;
            padding: 0 10px !important;
            line-height: 30px !important;
            height: 30px !important;
         }
        @media only screen and (max-width: 736px){
            #thumbnail-list {
                width: 100%;
                position: relative;
            }
            .vehicle-summary {
                margin: 15px 0 0 0;
            }
            .slider-right {
                width: 100% !important;
            }
            .slider-left {
                width: 100% !important;
            }
            .vehicle-summary > span {
                padding: 3px 10px;
                font-size: 18px;
            }
            .vehicle-summary h2 {
                font-size: 18px;
                padding: 20px 0 0;
            }
            .vehicle-price span {
                font-size: 18px;
            }
            .vehicle-price span span {
                font-size: 14px;
            }

            .vehicle_detail_info th,
            .vehicle_detail_info td {
                width: 100% !important;
                text-align: center !important;
            }
            .vehicle_detail_info th {
                background-color: #f7f7f7 !important;
                color: black !important;
                font-weight: bold;
            }
            .tire_table td,
            .tire_table th {
                width: 100% !important;
                text-align: center !important;
            }
            .tire_table td div {
                width: 100% !important;
            }
            #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/truck/img/icon/printout.png) no-repeat center 10px;
                background-size: 25px;
                padding-left: 10px;
                border: 2px solid #333;
                text-align: center;
                padding-top: 35px;
            }
            #wrap-slide .talk {
                width: calc(100% - 40px) !important;
                top: 0 !important;
            }
            #verification_doc_img {
                width: 100% !important;
            }
            #verification_doc_img img {
                width: 100% !important;
            }
        }
    </style>
@endsection

@section('page_js')
    <script>
        $(function () {
            $(document).ready(function () {
                $(".pdf_view_tab").click(function () {
                    window.open($(this).data('src'));
                    $(this).removeClass('is-active');
                    $("#basic_info_tab").addClass('is-active');
                    $("#basic_info_panel").addClass('is-show');
                });
                resizeImageWrap();
            });

            function resizeImageWrap() {
                setTimeout(function() {
                    if($("#thumbnail-list").css('position') == 'absolute') {
                        $("#wrap-slide").css('height', ($("#slider").height() > $(".title-wrap.vehicle-info").height() ? $("#slider").height() : $(".title-wrap.vehicle-info").height()) + $("#thumbnail-list").height() + 50+"px");
                        if($("#slider").height() < $(".title-wrap.vehicle-info").height()) {
                            $("#thumbnail-list").css('margin-top', ($(".title-wrap.vehicle-info").height() - $("#slider").height() + 10) + 'px');
                        } else {
                            $("#thumbnail-list").css('margin-top', '10px');
                        }
                    } else {
                        $("#thumbnail-list").css('margin-top', '10px');
                    }
                }, 500);
            }
            $(window).resize(function() {
                resizeImageWrap();
            });
        });
    </script>
@endsection