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

@section('title', (isset($title) ? $title : '車輛検索'))

@section('content')
    <main>
        <div id="mv">
            <h1>{{ isset($title) ? $title : '車輛検索' }}</h1>
        </div>

        <article class="w1200">
            <div id="search-box">
                <section id="search"  class="box">
                    {{ Form::open(["route"=>"frontend.{$_fb_department}.parts_search.index", "method"=>"get", "id"=>"search_submit"]) }}
                    <ul>
                        <li class="li-parts-category">
                            <dl>
                                <dt class="category-label">カテゴリー</dt>
                                <dd>
                                    <ul class="category">
                                        <li>
                                            <input type="radio" id="search_vehicle_category_for_b" onclick='location.href="{{ route("frontend.{$_fb_department}.truck_search.index", ['b_class_status'=>config('const.b_class_status_code.for_b')]) }}"'  {{ (isset($search_params['b_class_status']) && $search_params['b_class_status'] == config('const.b_class_status_code.for_b')) ? 'checked' : '' }}>
                                            <label for="search_vehicle_category_for_b">海外向け</label>
                                        </li>
                                        <li>
                                            <input type="radio" id="search_vehicle_category_dismantling" onclick='location.href="{{ route("frontend.{$_fb_department}.truck_search.index", ['b_class_status'=>config('const.b_class_status_code.dismantling')]) }}"' {{ (isset($search_params['b_class_status']) && $search_params['b_class_status'] == config('const.b_class_status_code.dismantling')) ? 'checked' : '' }}>
                                            <label for="search_vehicle_category_dismantling">部品生産前</label>
                                        </li>
                                        @foreach(\App\Service\Masters\PartsCategoryService::getAllPartsCategories() as $key => $category)
                                            <li>
                                                <input type="radio" name="search_params[parts_category]" data-url="{{ route("frontend.{$_fb_department}.parts_search.index", ["search_params[parts_category]"=>$category->id]) }}" value="{{ $category->id }}" id="search_parts_category{{ $category->id }}" {{ (isset($search_params['parts_category']) ? ($search_params['parts_category'] == $category->id) : false) !== false ? 'checked' : '' }}>
                                                <label for="search_parts_category{{ $category->id }}">{{ $category->name }}</label>
                                            </li>
                                        @endforeach
                                    </ul>
                                </dd>
                            </dl>
                        </li>
                    </ul>
                    {{ Form::close() }}
                </section>
            </div>
        </article>

        @include('frontend.share.truck_search._index')

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

    </main>

@endsection

@section('page_css')
    <link rel="stylesheet" href="{{ asset("assets/frontend/truck/css/under.css") }}?{{ Carbon::now()->format("YmdHis") }}">
    <style>
        /*#empty_column:before{
            content:"アウトレットの車輛はございません。";
            font-style:italic;
            white-space: nowrap;
            font-size: 30px;
            top:50%;
            transform: translateY(-50%);
            color: #0a0a0a;
            font-weight:bold;
            text-align:center;
        }*/
        li.amount strong {
            font-weight: bold;
            font-size: 16px;
            color: #ec1b23;
        }
        ul.icons {
            justify-content: unset !important;
        }
        #search-box input[type=button],
        #search-box input[type=submit]
        {
            background: #dddddd !important;
            color: #FFF;
            padding: 12px 50px;
            border: none;
            border-radius: 50px;
            letter-spacing: 1px;
            font-weight: bold;
            margin: 5px 0 0 0;
            cursor: pointer;
            transition: all 0.3s ease-in-out;
        }
        #search-box input[type=button]:hover,
        #search-box input[type=submit]:hover {
            background: #EC1B23 !important;
            opacity: 1 !important;
        }
        .discussion_period {
            margin-top: 2px;
            color: #FFF;
            position: absolute;
            text-align: left;
            width: 100%;
            font-size: 12px;
            font-weight: bold;
        }
        .gray_out {
            color: #fff;
            position: absolute;
            text-align: center;
            box-sizing: border-box;
            display: flex;
            flex-wrap: wrap;
            width: 100%;
            height: 100%;
            background: rgba(50, 50, 50, 0.4);
            align-items: center;
            justify-content: center;
            font-size: 12px;
            font-weight: normal;
        }
        .icons {
            margin-top: -7.7px !important;
        }
        .icons li {
            background-color: #005BAC;
            color: white;
            width: calc(26% - 5px) !important;

        }
        .pic .talk {
            padding:3px 0;
            height: unset !important;
            width: 100% !important;
            border-radius: 0 !important;
            line-height: 25px !important;
            text-align: left !important;
            left: 0 !important;
        }

        .pic .talk span,
        .outlet_icon .talk span {
            margin: 0 0 0 8px;
        }
        .outlet_icon .talk {
            background: #FBB040;
            position: absolute !important;
            width: calc(100% - 6px) !important;
            border-radius: 0 !important;
            line-height: unset !important;
            text-align: left !important;
            height: unset !important;
            font-size: 13px;
            color: #FFF;
            vertical-align: middle;
            font-weight: bold;
            z-index: 99;
            left: 3px !important;
            top: 0 !important;
            padding:5px 0 !important;
        }
        .outlet_icon .sold {
            background: #414042;
            position: absolute;
            width: 50px !important;
            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;
        }

        #outra ul li p span {
            font-size: 100% !important;
        }
        #outra .title3 span {
            position: relative;
        }
        .outlet_icon .discussion_period {
            top: 10px !important;
            left: 75px !important;
        }
        .car-detail dt,
        .car-detail dd,
        .car-detail span,
        .car-detail p {
            color: black !important;
        }
        .outlet_slider li {
            position: relative !important;
        }
        .discussion_date_sp {
            display: none;
        }
        .discussion_date {
            display: inline-block;
        }
        #empty_column {
            margin: 8% 0;
            text-align: center;
            position: relative;
        }

        #search-box ul li ul.category li label {
            border: 2px solid #005BAC;
            display: block;
            font-size: 12px;
            font-weight: bold;
            padding: 10px 5px 0 5px;
            cursor: pointer;
            position: relative;
            transition: all 0.3s ease-in-out;
        }
        #search-box ul.category li {
            float: left;
            box-sizing: border-box;
            text-align: center;
            margin: 0 1.25% 1.25% 0;
            width: 12.9%;
            border: none;
        }
        #search-box ul.category li label:hover {
            background: rgba(0,91,172,.8);
        }
        #search-box ul.category li label:hover {
            color: #FFF;
        }
        #search-box ul li {
            width: 100%;
        }

        #search-box ul li ul.category li input[type="radio"] {
            display: none !important;
        }
        #search-box ul li ul.category li input[type="radio"]:checked + label {
            background: rgba(0,91,172,.8);
            color: #fff;
        }

        #search-box ul li ul.category li:nth-child(1) label:after,
        #search-box ul li ul.category li:nth-child(2) label:after {
            background: url(../assets/frontend/parts/img/pic/truck1.png) center 50% no-repeat;
            background-size: 100%;
        }

        #search-box ul li ul.category li:nth-child(3) label:after {
            background: url(../assets/frontend/parts/img/pic/truck2.png) center 50% no-repeat;
            background-size: 100%;
        }

        #search-box ul li ul.category li:nth-child(4) label:after {
            background: url(../assets/frontend/parts/img/pic/truck6.png) center 50% no-repeat;
            background-size: 100%;
        }

        #search-box ul li ul.category li:nth-child(5) label:after {
            background: url(../assets/frontend/parts/img/pic/truck3.png) center 50% no-repeat;
            background-size: 100%;
        }

        #search-box ul li ul.category li:nth-child(6) label:after {
            background: url(../assets/frontend/parts/img/pic/truck7.png) center 50% no-repeat;
            background-size: 100%;
        }

        #search-box ul li ul.category li:nth-child(7) label:after {
            background: url(../assets/frontend/parts/img/pic/truck4.png) center 50% no-repeat;
            background-size: 100%;
        }

        #search-box ul li ul.category li:nth-child(8) label:after {
            background: url(../assets/frontend/parts/img/pic/truck8.png) center 50% no-repeat;
            background-size: 100%;
        }

        #search-box ul li ul.category li:nth-child(9) label:after {
            background: url(../assets/frontend/parts/img/pic/truck9.png) center 50% no-repeat;
            background-size: 100%;
        }

        #search-box ul li ul.category li:nth-child(10) label:after {
            background: url(../assets/frontend/parts/img/pic/truck10.png) center 50% no-repeat;
            background-size: 100%;
        }

        #search-box ul li ul.category li:nth-child(11) label:after {
            background: url(../assets/frontend/parts/img/pic/truck11.png) center 50% no-repeat;
            background-size: 100%;
        }
        #search-box ul li ul.category li:nth-child(12) label:after {
            background: url(../assets/frontend/parts/img/pic/truck12.png) center 50% no-repeat;
            background-size: 100%;
        }
        #search-box ul li ul.category li:nth-child(13) label:after {
            background: url(../assets/frontend/parts/img/pic/truck5.png) center 50% no-repeat;
            background-size: 100%;
        }
        @media only screen and (max-width: 736px){
            #empty_column {
                margin: 15% 0;
                text-align: center;
            }
            #search-box input[type=button] {
                width: 100%;
                box-sizing: border-box;
                display: block;
            }
            .outlet_icon .talk {
                left: 10px !important;
                width: calc(100% - 20px) !important;
            }
            .pic .talk {
                line-height: unset !important;
                padding: 5px 0 !important;
            }
            .outlet_icon .talk {
                line-height: unset !important;
            }
            #other_search_info dl .wire_title {
                width: 100% !important;
            }
            .outlet_icon .sold {
                left: 15px !important;
            }
            #search-box ul.category li {
                width: 32%;
                margin-bottom: 2%;
            }
        }
    </style>
@endsection

@section('page_js')
    <script>

        var view_mode = "{{ isset($view_mode) ? $view_mode : 'list' }}";
        getStyle(view_mode); //customize.js
        $(function () {
            $(document).ready(function () {

                $('input[name="search_params[parts_category]"]').click(function () {
                    $("#search_submit").submit();
                });
                showSubCategory();
                function showSubCategory() {
                    /*if($('input[name="search_params[body_category]"]:checked').val() == '1'){
                        $("#body_sub_category_box").removeClass('hidden');
                    } else {
                        $("#body_sub_category_box").addClass('hidden');
                    }*/
                }

                $('p.btn-more-search').click(function() {
                    $(this).fadeOut();
                    $(this).next().slideToggle(this.checked);
                    $(this).toggleClass('on');
                });
            });
        });
    </script>
@endsection