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

@section('title', '期間限定車検索')

@section('content')
    <main>
        <div id="mv">
            <h1>期間限定車検索</h1>
        </div>
        <article class="w1200">
            <div id="search-box">
                <section id="search"  class="box">
                    {{ Form::open(["route"=>"frontend.{$_fb_department}.car_search.index", "method"=>"get", "id"=>"search_form"]) }}
                    @php
                        $category = '';
                        if((isset($search_params['body_category']))) {
                            $category = \App\Models\Masters\BodyCategory::findById($search_params['body_category'], 'name');
                        }
                    @endphp
                    <input type="hidden" name="search_params[contact_search_type]" value="{{ config('const.contact_search_type_code.etc') }}"/>
                    <input type="hidden" name="search_params[loan_date]" value="{{ isset($search_params['loan_date']) ? $search_params['loan_date'] : '' }}"/>
                    <input type="hidden" name="search_params[loan_time]" value="{{ isset($search_params['loan_time']) ? $search_params['loan_time'] : '' }}"/>
                    <input type="hidden" name="search_params[return_date]" value="{{ isset($search_params['return_date']) ? $search_params['return_date'] : '' }}"/>
                    <input type="hidden" name="search_params[return_time]" value="{{ isset($search_params['return_time']) ? $search_params['return_time'] : '' }}"/>
                    <input type="hidden" name="search_params[plan_shed_id]" value="{{ isset($search_params['plan_shed_id']) ? $search_params['plan_shed_id'] : '' }}"/>
                    <ul>
                        <li class="li-vehicle-category">
                            <dl>
                                <dt class="category-label">車種</dt>
                                <dd>
                                    <ul class="category">
                                        @foreach(config('const.hp_vehicle_body_category') as $key => $category)
                                            <li>
                                                <input type="radio" name="search_params[body_category]" data-url="{{ route("frontend.{$_fb_department}.car_search.index", ["search_params[body_category]"=>$key]) }}" value="{{ $key }}" id="body_category{{ $key }}" {{ (isset($search_params['body_category']) ? ($search_params['body_category'] == $key) : false) !== false ? 'checked' : '' }}>
                                                <label for="body_category{{ $key }}">{{ $category }}</label>
                                            </li>
                                        @endforeach
                                    </ul>
                                </dd>
                            </dl>
                        </li>
                    </ul>
                    <ul id="other_search_box">
                        <li id="other_search_info">
                            <dl>
                                <dt class="wire_title">サブカテゴリ</dt>
                                <dd>
                                    <div class="select-box">
                                        <label>
                                            <select name="search_params[vehicle_sub_category]">
                                                <option value="">指定なし</option>
                                                @if(isset($search_params['body_category']) && $search_params['body_category'] == config('const.body_category_track_trailer_id'))
                                                    @foreach(\App\Service\Masters\BodyCategoryService::getMidCategories($search_params['body_category']) as $key => $sub_category)
                                                        <option value="{{ $key }}" {{ (isset($search_params['vehicle_sub_category']) ? $search_params['vehicle_sub_category'] : '') == $key ? 'selected' : '' }}>{{ $sub_category }}</option>
                                                    @endforeach
                                                @else
                                                    @foreach(\App\Service\Masters\BodyCategoryService::getSubCategories(isset($search_params['body_category']) ? $search_params['body_category'] : '') as $key => $sub_category)
                                                        <option value="{{ $key }}" {{ (isset($search_params['vehicle_sub_category']) ? $search_params['vehicle_sub_category'] : '') == $key ? 'selected' : '' }}>{{ $sub_category }}</option>
                                                    @endforeach
                                                @endif
                                            </select>
                                        </label>
                                    </div>
                                </dd>
                            </dl>
                        </li>
                        <li>
                            <dl>
                                <dt>サイズ</dt>
                                <dd>
                                    <div class="select-box">
                                        <label>
                                            <select name="search_params[vehicle_size]">
                                                <option value="">指定なし</option>
                                                @foreach(config('const.vehicle_size') as $key => $size)
                                                    @if($key == config('const.vehicle_size_code.trailer') || $key == config('const.vehicle_size_code.bus'))
                                                        @continue
                                                    @endif
                                                    <option value="{{ $key }}" {{ (isset($search_params['vehicle_size']) ? $search_params['vehicle_size'] : '') == $key ? 'selected' : '' }}>{{ $size }}</option>
                                                @endforeach
                                            </select>
                                        </label>
                                    </div>
                                </dd>
                            </dl>
                        </li>
                    </ul>
                    <div class="centre">
                        <input type="submit" value="検索">
                        <input type="button" value="クリア" onclick="location.href='{{ route('frontend.rental.car_search.index', ["search_params[contact_search_type]"=>config('const.contact_search_type_code.etc')]) }}';">
                    </div>
                    {{ Form::close() }}
                </section>
            </div>
        </article>

    @if(isset($search_params['vehicle_maker_id']))
            <div id="output-wrap">
                <div id="output">
                    <dl>
                        <dt>検索条件</dt>
                        @if(isset($search_params['vehicle_maker_id']) && !empty($search_params['vehicle_maker_id']))
                            <dd class="keyword_history">メーカー：<span>
                               @foreach($search_params['vehicle_maker_id'] as $maker_id)
                                        @if($maker_id == 'etc')
                                            その他
                                            @continue
                                        @endif
                                        {{ \App\Service\Masters\VehicleMakerService::getVehicleMakerName($maker_id) . ' ' }}
                                    @endforeach
                            </span>
                            </dd>
                        @endif

                        @if(isset($search_params['plan_shed_id']) && !empty($search_params['plan_shed_id']))
                            <dd class="keyword_history">拠点：<span>{{ \App\Service\Masters\VehicleShedService::getShedNameByID($search_params['plan_shed_id']) }}</span></dd>
                        @endif

                        @if(isset($search_params['vehicle_size']) && !empty($search_params['vehicle_size']))
                            <dd class="keyword_history">サイズ：<span>{{ config('const.vehicle_size.' . $search_params['vehicle_size']) }}</span></dd>
                        @endif

                        @if(isset($search_params['keyword']) && !empty($search_params['keyword']))
                            <dd class="keyword_history">キーワード：<span>{{ $search_params['keyword'] }}</span></dd>
                        @endif
                    </dl>
                </div>
            </div>
        @endif

        <article>
            {{--<div id="outra">
                <section>
                    <h2 class="title3"><span>期間限定車とは</span></h2>
                    <div class="limit_car_description">
                        <p>・ウシトラ車両在庫300台から厳選したトラック！</p>
                        <p>・豊富な車種をご用意しておりますので必ずお探しの車両が見つかります！</p>
                        <p>・毎日入替が発生しておりますので掲載の無いお車もお問合せ下さい。</p>
                    </div>
                </section>
            </div>--}}
            <section>
                <div class="bg-pink">
                </div>
            </section>
        </article>

        <article id="result">
            <div class="search-bar topver">
                @unless($_fb_department == 'parts')
                    <div class="left-box">
                        <ul>
                            <li class="amount">
                                <p>該当<strong>{{ $vehicles->total() }}</strong>件</p>
                            </li>
                            <li class="list"><a href="{{ route("frontend.{$_fb_department}.car_search.index", ['search_params'=>$search_params, 'm'=>'list', 's'=>$sort_mode, 'page'=>$page]) }}#result"></a></li>
                            <li class="square"><a href="{{ route("frontend.{$_fb_department}.car_search.index", ['search_params'=>$search_params, 'm'=>'square', 's'=>$sort_mode, 'page'=>$page]) }}#result"></a></li>
                        </ul>
                    </div>
                @endunless
                {{ $vehicles->appends(['search_params'=>$search_params, 'm'=>$view_mode, 's'=>$sort_mode])->links('vendor.pagination.user-vehicle-pagination') }}
                <div class="right-box">
                    <ul>
                        <li>
                            <button class="{{ ($sort_mode=='publish_date' || $sort_mode == '') ? 'active' :'' }}" onclick='location.href="{{ route("frontend.{$_fb_department}.car_search.index", ["search_params"=>$search_params, 'm'=>$view_mode, "s"=>'publish_date']) }}"'>新しく追加された順</button>
                        </li>
                        <li>
                            <button class="{{ $sort_mode=='year_made' ? 'active' :'' }}" onclick='location.href="{{ route("frontend.{$_fb_department}.car_search.index", ["search_params"=>$search_params, 'm'=>$view_mode, "s"=>'year_made']) }}"'>初年度登録が若い順</button>
                        </li>
                        <li>
                            <button class="{{ $sort_mode=='distance' ? 'active' :'' }}" onclick='location.href="{{ route("frontend.{$_fb_department}.car_search.index", ["search_params"=>$search_params, 'm'=>$view_mode, "s"=>'distance']) }}"'>走行距離が少ない順</button>
                        </li>
                    </ul>
                </div>
            </div>
            <!--結果-->
            <div id="result-car">
                <!-- 検索結果 -->
                @if($vehicles->count() > 0)
                    @foreach($vehicles as $key => $vehicle)
                        <div class="car"> <a href="{{ route("frontend.{$_fb_department}.car_search.detail", ['vehicle'=>$vehicle->id, 'is_limit_car'=>1, "search_params"=>$search_params,  'is_for_outside' => (isset($is_for_outside) ? $is_for_outside : '')]) }}">
                                <ul class="numberandshop">
                                    <li>管理番号：<span>{{ str_replace('OC', '', $vehicle->vehicle_hp_publish->manage_no) }}</span></li>
                                    @if($shed_name = $vehicle->getStockShedName())
                                        <li>{{ $shed_name }}</li>
                                    @endif
                                </ul>
                                <div class="pic">
                                    @if($vehicle->support_status == config('const.vehicle_enquiry_status.during_talking'))
                                        <i class="talk">
                                            <span>商談中</span>
                                            <span class="discussion_date">{{ (!empty($vehicle->discussion_period) && !empty($vehicle->discussion_period_to)) ? Carbon::parse($vehicle->discussion_period)->format('m月d日').'～'.Carbon::parse($vehicle->discussion_period_to)->format('m月d日') : '' }}</span>
                                            <span class="discussion_date_sp">{{ (!empty($vehicle->discussion_period) && !empty($vehicle->discussion_period_to)) ? Carbon::parse($vehicle->discussion_period)->format('m.d').'～'.Carbon::parse($vehicle->discussion_period_to)->format('m.d') : '' }}</span>
                                        </i>
                                    @elseif($vehicle->vehicle_info_basic->sale_status >= config('const.vehicle_sale_status_code.finish_sale') && !empty($vehicle->vehicle_info_basic->finish_sale_date))
                                        <i class="sold">売約済</i><span class="gray_out"></span>
                                    @elseif($vehicle->vehicle_hp_publish->ujweb_publish == config('const.hp_publish_code.publish') && !empty($vehicle->vehicle_hp_publish->ujweb_publish_date) && Carbon::parse($vehicle->vehicle_hp_publish->ujweb_publish_date)->diffInDays(Carbon::now()) <= 7)
                                        <i class="new">NEW</i>
                                    @elseif($vehicle->vehicle_hp_publish->ujweb_publish == config('const.hp_publish_code.expected'))
                                        <i class="expected">入庫予定</i>
                                    @endif

                                    @if(!empty($vehicle->getDefaultImage()) && Storage::disk('vehicle_image')->has($vehicle->id.'/'.$vehicle->getDefaultImage()))
                                        <img src="{{ asset("assets/frontend/{$_fb_department}/img/common/loading.gif") }}" data-original="{{ asset('storage/vehicle/images/').'/'.$vehicle->id }}/{{ $vehicle->getDefaultImage() }}" class="lazy">
                                    @else
                                        <img src="{{ asset("assets/frontend/{$_fb_department}/img/common/loading.gif") }}" data-original="{{ asset("assets/frontend/{$_fb_department}/img/pic/i_thumbnail.jpg") }}" class="lazy">
                                    @endif
                                    <ul class="icons">
                                        @if($vehicle->vehicle_check_van->van_02_kind_id == config('const.vehicle_icon_type.power_gate') ||
                                            $vehicle->vehicle_check_van->van_03_kind_id == config('const.vehicle_icon_type.power_gate'))
                                            <li>ゲート付</li>
                                        @endif
                                        {{--
                                        @if($vehicle->van_02_kind_id == config('const.vehicle_icon_type.refrigerator') && ($vehicle->van_02_kind_sub_id == config('const.vehicle_icon_type.directly_connect') || $vehicle->van_02_kind_sub_id == config('const.vehicle_icon_type.directly_connect_stand_by')))
                                            <li>直結</li>
                                        @endif
                                        --}}
                                        @if(($vehicle->vehicle_check_van->van_02_kind_id == config('const.vehicle_icon_type.refrigerator') && ($vehicle->vehicle_check_van->van_02_kind_sub_id == config('const.vehicle_icon_type.sub_engine') || $vehicle->vehicle_check_van->van_02_kind_sub_id == config('const.vehicle_icon_type.sub_engine_stand_by'))) ||
                                            ($vehicle->vehicle_check_van->van_03_kind_id == config('const.vehicle_icon_type.refrigerator') && ($vehicle->vehicle_check_van->van_03_kind_sub_id == config('const.vehicle_icon_type.sub_engine') || $vehicle->vehicle_check_van->van_03_kind_sub_id == config('const.vehicle_icon_type.sub_engine_stand_by'))))
                                            <li>サブエンジン</li>
                                        @endif
                                        @if(($vehicle->vehicle_check_van->van_02_kind_id == config('const.vehicle_icon_type.refrigerator') && ($vehicle->vehicle_check_van->van_02_kind_sub_id == config('const.vehicle_icon_type.directly_connect_stand_by') || $vehicle->vehicle_check_van->van_02_kind_sub_id == config('const.vehicle_icon_type.sub_engine_stand_by'))) ||
                                            ($vehicle->vehicle_check_van->van_03_kind_id == config('const.vehicle_icon_type.refrigerator') && ($vehicle->vehicle_check_van->van_03_kind_sub_id == config('const.vehicle_icon_type.directly_connect_stand_by') || $vehicle->vehicle_check_van->van_03_kind_sub_id == config('const.vehicle_icon_type.sub_engine_stand_by'))))
                                            <li>スタンバイ</li>
                                        @endif
                                        @if($vehicle->vehicle_check_cabin->cabin_shape_id == config('const.vehicle_icon_type.wide'))
                                            <li>ワイド</li>
                                        @endif
                                        {{--
                                        @if($vehicle->cabin_shape_id == config('const.vehicle_icon_type.standard'))
                                            <li>標準</li>
                                        @endif
                                        --}}
                                    </ul>
                                </div>
                                <div class="txt">
                                    <h2>{{ isset($vehicle->vehicle_info_basic->vehicle_comment) ? $vehicle->vehicle_info_basic->vehicle_comment : '' }}</h2>
                                    <ul class="car-detail">
                                        <li>
                                            <dl class="year box">
                                                <dt>初年度登録</dt>
                                                <dd>{{ \App\Helper\SystemHelper::convertGtJDate($vehicle->vehicle_info_basic->year_type_y)."({$vehicle->vehicle_info_basic->year_type_y}年){$vehicle->vehicle_info_basic->year_type_m}月" }}</dd>
                                            </dl>
                                            {{--                                        @if (isset($is_for_outside) && $is_for_outside)--}}
                                            {{--                                        <dl class="price box">--}}
                                            {{--                                            <dt>価格</dt>--}}
                                            {{--                                            <dd>{{ is_null($vehicle->customer_price) ? '' : '￥'.number_format($vehicle->customer_price + round($vehicle->customer_price/10)).'（税込）' }}</dd>--}}
                                            {{--                                        </dl>--}}
                                            {{--                                    @endif--}}

                                            <dl class="maker box">
                                                <dt>メーカー</dt>
                                                <dd>{{ $vehicle->vehicleMakerName() }}</dd>
                                            </dl>
                                            <dl class="capacity box">
                                                <dt>積載量</dt>
                                                <dd>{{ (!empty($vehicle->vehicle_info_basic->load_capacity)) ? number_format($vehicle->vehicle_info_basic->load_capacity).'kg' : '' }}</dd>
                                            </dl>


                                        </li>
                                        <li>
                                            <dl class="model box">
                                                <dt>型式</dt>
                                                <dd>{{ $vehicle->vehicleModel() }}</dd>
                                            </dl>

                                            <dl class="distance box">
                                                <dt>走行距離</dt>
                                                <dd>{{ $vehicle->getTravelDistance()  }}</dd>
                                            </dl>
                                            <dl class="expire box">
                                                <dt>車検期限</dt>

                                                <dd>{{ config('const.vehicle_inspection_status.'.$vehicle->vehicle_info_basic->inspection_status) }}
                                                    @switch ($vehicle->vehicle_info_basic->inspection_status)
                                                        @case (config('const.vehicle_inspection_status_code.temp_cancel'))
                                                        @break
                                                        @case (config('const.vehicle_inspection_status_code.exist'))
                                                        ({{ \App\Helper\SystemHelper::convertSymbolGtJDate($vehicle->vehicle_info_basic->inspection_valid_date_y) . '/' .$vehicle->vehicle_info_basic->inspection_valid_date_m }})
                                                        @break
                                                        @case (config('const.vehicle_inspection_status_code.limited'))
                                                        ({{ \App\Helper\SystemHelper::convertSymbolGtJDate($vehicle->vehicle_info_basic->inspection_limited_date_y) .'/' .$vehicle->vehicle_info_basic->inspection_limited_date_m }})
                                                        @break
                                                        @case (config('const.vehicle_inspection_status_code.precheck'))
                                                        ({{ \App\Helper\SystemHelper::convertSymbolGtJDate($vehicle->vehicle_info_basic->inspection_precheck_date_y) .'/' .$vehicle->vehicle_info_basic->inspection_precheck_date_m }})
                                                        @break

                                                    @endswitch
                                                </dd>
                                            </dl>

                                        </li>
                                        <li>
                                            <dl class="figure box">
                                                <dt>形状</dt>
                                                <dd>{{ $vehicle->vehicleBodyCategoryName() }}</dd>
                                            </dl>
                                            <dl class="body box">
                                                <dt>ボディ内寸</dt>
                                                <dd>
                                                    <p>{{ (!empty($vehicle->vehicle_check_van->body_dimension)) ? "長 ".((is_numeric($vehicle->vehicle_check_van->body_dimension) && strpos($vehicle->vehicle_check_van->body_dimension, '.')===false) ? number_format($vehicle->vehicle_check_van->body_dimension) : $vehicle->vehicle_check_van->body_dimension)."mm " : '' }}</p>
                                                    <p>{{ (!empty($vehicle->vehicle_check_van->body_width)) ? "幅 ".((is_numeric($vehicle->vehicle_check_van->body_width) && strpos($vehicle->vehicle_check_van->body_width, '.')===false) ? number_format($vehicle->vehicle_check_van->body_width) : $vehicle->vehicle_check_van->body_width)."mm " : '' }}</p>
                                                    <p>{{ (!empty($vehicle->vehicle_check_van->body_height)) ? "高 ".((is_numeric($vehicle->vehicle_check_van->body_height) && strpos($vehicle->vehicle_check_van->body_height, '.')===false) ? number_format($vehicle->vehicle_check_van->body_height) : $vehicle->vehicle_check_van->body_height)."mm" : '' }}</p>
                                                </dd>
                                            </dl>
                                        </li>
                                    </ul>
                                </div>
                            </a> </div>
                    @endforeach
                @else
                    データが存在しません。
                @endif
            </div>
            <!-- 検索結果 -->
            <div class="search-bar">
                {{ $vehicles->appends(['search_params'=>$search_params, 'm'=>$view_mode, 's'=>$sort_mode])->links('vendor.pagination.user-vehicle-pagination') }}
            </div>
        </article>
    </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;
        }*/

        .bg-pink {
            display: block;
            max-width: 1200px;
            margin: 0 auto 10px auto;
            background-size: cover;
            text-align: center;
            color: #FFF;
            font-weight: bold;
            padding: 70px 0;
            font-size: 1.2rem;
            background: url(../assets/frontend/rental/img/pic/limit_car.jpg?20221027) center 50% no-repeat;
        }

        #outra:before {
            content: none !important;
        }
        h2.title3:after {
            content: none !important;
        }
        .limit_car_description {
            max-width: 1200px;
            margin: 0 auto;
        }
        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;
        }
        #outra {
            text-align: center;
        }
        #outra h2.title3 {
            display: inline-block;
        }
        .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;
        }

        .limit_car_description {
            padding: 10px;
        }
        @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;
            }
        }

        @media only screen and (max-width:736px) {
            input[type=date], #search-box ul li dl dt, #search-box .select-box select {
                font-size: 0.9rem;
            }
            input[type=date] {
                height: 36px;
            }
            input[type=date] {
                background: #EEE url(../img/icon/calender-scope.png) no-repeat 95% 50%;
                background-size: 20px;
            }
        }

        #search-box input[type=date] {
            width: 100%;
            position: relative;
            background: #EEE url(../img/icon/calender-scope.png) no-repeat 92% 50%;
            background-size: 20px;
            border: none;
            padding: 5px;
            box-sizing: border-box;
            border-radius: 50px;
        }
        #search-box input[type=date]::-webkit-inner-spin-button {
            -webkit-appearance: none;
        }
        #search-box input[type=date]::-webkit-clear-button {
            -webkit-appearance: none;
        }
        #search-box input[type=date]::-webkit-calendar-picker-indicator {
            opacity: 0;
            position: absolute;
            width: 100%;
            height: 100%;
        }
        .select-box label {
            position: relative;
        }
        .select-box label:after {
            display: block;
            content: " >";
            position: absolute;
            top: 50%;
            right: 20px;
            margin-top: -10px;
            pointer-events: none;
            transform: scale(1, 0.7) rotate(90deg);
            color: #EB1B23;
            font-weight: bold;
            z-index: 99;
        }
        #search-box .select-box select {
            position: relative;
            width: 100%;
            padding: 10px;
            -webkit-appearance: none;
            -moz-appearance: none;
            appearance: none;
            background: #eee;
            border-radius: 50px;
        }
        #search-box .w40per.select-box select {
            width: 100px !important;
        }
        ul#other_search_box {
            margin-top: 10px;
        }


        ul#other_search_box li {
            width: 49%;
        }
        ul#other_search_box li:nth-child(2) {
            width: 45%;
        }
        @media only screen and (max-width:736px) {
            #search-box input[type=date], #search-box ul li dl dt,#search-box  .select-box select {
                font-size: 0.9rem;
                border-radius: 5px;
            }
            #search-box input[type=date] {
                height: 36px;
            }
            #search-box input[type=date] {
                background: #EEE url(../img/icon/calender-scope.png) no-repeat 95% 50%;
                background-size: 20px;
            }
            ul#other_search_box li {
                width: 100%;
            }
            ul#other_search_box li:nth-child(2) {
                width: 100%;
            }
            ul#other_search_box li div.select-box select {
                width: 200px !important;
            }
        }
    </style>
@endsection

@section('page_js')
    <script>

        var view_mode = "{{ $view_mode }}";
        getStyle(view_mode); //customize.js

        $(function () {
            $(document).ready(function () {
                if($('.keyword_history').length == 0){
                    $("#output-wrap").hide();
                } else {
                    $("#output-wrap").show();
                }

                $('input[name="search_params[body_category]"]').click(function () {
                    showSubCategory();
                    $("#search_form").submit();
                });
                if(view_mode == 'square'){
                    $(".pic .discussion_period").css('top', '10px');
                    $(".pic .discussion_period").css('left', '55px');
                    $('.txt h2').hide();
                } else {
                    $(".pic .discussion_period").css('top', '0px');
                    $(".pic .discussion_period").css('left', '45px');
                    $(".numberandshop li:nth-child(1)").css('font-size', '14px');
                    $(".numberandshop li:nth-child(2)").css('font-size', '15px');
                    $('.txt h2').show();
                }
                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