@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}.truck_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
                    <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}.truck_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>
                            <li>
                                <dl>
                                    <dt>メーカー</dt>
                                    <dd>
                                        <ul class="maker">
                                            <li>
                                                <input type="checkbox" name="search_params[vehicle_maker_id][]" value="1" id="1" {{ (isset($search_params['vehicle_maker_id']) ? in_array('1', $search_params['vehicle_maker_id']) : false) !== false ? 'checked' : '' }}>
                                                <label for="1">日野</label>
                                            </li>
                                            <li>
                                                <input type="checkbox" name="search_params[vehicle_maker_id][]" value="2" id="2" {{ (isset($search_params['vehicle_maker_id']) ? in_array('2', $search_params['vehicle_maker_id']) : false) !== false ? 'checked' : '' }}>
                                                <label for="2">いすゞ</label>
                                            </li>
                                            <li>
                                                <input type="checkbox" name="search_params[vehicle_maker_id][]" value="3" id="3" {{ (isset($search_params['vehicle_maker_id']) ? in_array('3', $search_params['vehicle_maker_id']) : false) !== false ? 'checked' : '' }}>
                                                <label for="3">三菱ふそう</label>
                                            </li>
                                            <li>
                                                <input type="checkbox" name="search_params[vehicle_maker_id][]" value="4" id="4" {{ (isset($search_params['vehicle_maker_id']) ? in_array('4', $search_params['vehicle_maker_id']) : false) !== false ? 'checked' : '' }}>
                                                <label for="4">UDトラックス</label>
                                            </li>
                                            <li>
                                                <input type="checkbox" name="search_params[vehicle_maker_id][]" value="5" id="5" {{ (isset($search_params['vehicle_maker_id']) ? in_array('5', $search_params['vehicle_maker_id']) : false) !== false ? 'checked' : '' }}>
                                                <label for="5">トヨタ</label>
                                            </li>
                                            <li>
                                                <input type="checkbox" name="search_params[vehicle_maker_id][]" value="8" id="8" {{ (isset($search_params['vehicle_maker_id']) ? in_array('8', $search_params['vehicle_maker_id']) : false) !== false ? 'checked' : '' }}>
                                                <label for="8">マツダ</label>
                                            </li>
                                            <li>
                                                <input type="checkbox" name="search_params[vehicle_maker_id][]" value="6" id="6" {{ (isset($search_params['vehicle_maker_id']) ? in_array('6', $search_params['vehicle_maker_id']) : false) !== false ? 'checked' : '' }}>
                                                <label for="6">日産</label>
                                            </li>
                                            <li>
                                                <input type="checkbox" name="search_params[vehicle_maker_id][]" value="etc" id="9" {{ (isset($search_params['vehicle_maker_id']) ? in_array('etc', $search_params['vehicle_maker_id']) : false) !== false ? 'checked' : '' }}>
                                                <label for="9">その他</label>
                                            </li>
                                        </ul>
                                    </dd>
                                </dl>
                            </li>
                            <li id="other_search_info">
                                @if(isset($search_params['body_category']) && !empty($search_params['body_category']))
                                <dl id="body_sub_category_box">
                                    <dt class="wire_title">サブカテゴリ</dt>
                                    <dd>
                                        <select name="search_params[vehicle_sub_category]">
                                            <option value="">指定なし</option>
                                            @if($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($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>
                                    </dd>
                                </dl>
                                @endif
                                <dl>
                                    <dt>拠点</dt>
                                    <dd>
                                        <select name="search_params[plan_shed_id]">
                                            <option value="">指定なし</option>
                                            @foreach(\App\Service\Masters\VehicleShedService::getStockVehicleSheds() as $key => $shed_name)
                                                <option value="{{ $key }}" {{ (isset($search_params['plan_shed_id']) ? $search_params['plan_shed_id'] : '') == $key ? 'selected' : '' }}>{{ $shed_name }}</option>
                                            @endforeach
                                            <option value="99" {{ (isset($search_params['plan_shed_id']) ? $search_params['plan_shed_id'] : '') == 99  ? 'selected' : '' }}>その他</option>
                                        </select>
                                    </dd>
                                </dl>
                                <dl>
                                    <dt>サイズ</dt>
                                    <dd>
                                        <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>
                                    </dd>
                                </dl>
                                <dl>
                                    <dt class="wire_title">管理番号</dt>
                                    <dd>
                                        <input type="text" name="search_params[manage_no]" id="manage_no" value="{{ isset($search_params['manage_no']) ? $search_params['manage_no'] : '' }}">
                                    </dd>
                                </dl>
                            </li>
                    </ul>
                    <div class="centre">
                        <input type="submit" value="検索" id="btn_search">
                        <input type="button" value="クリア" onclick="location.href='{{ route('frontend.truck.truck_search.index') }}';">
                    </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>
                <!-- <p><a href="#search-box">再検索</a></p> -->
            </div>
        </div>
        @endif

        @if( !(isset($search_params['manage_no']) && $search_params['manage_no']))
        <article>
            <div id="outra">
                <section>
                    <h2 class="title3"><span>アウトレットトラック</span></h2>
                    <ul class="{{ $outlet_vehicles->count() > 5 ? 'slider2' : 'outlet_slider'}}" id="outlet_vehicle_box">
                        @if(isset($outlet_vehicles) && $outlet_vehicles->count() > 0)
                            @if($outlet_vehicles->count() > 5)
                                @foreach($outlet_vehicles as $key => $vehicle)
                                    <li>
                                        <a href="{{ route("frontend.{$_fb_department}.outlet.detail", ['vehicle'=>$vehicle->id]) }}">
                                            @if(!empty($vehicle->getDefaultImage()))
                                                <img src="{{ asset('storage/vehicle/images/').'/'.$vehicle->id }}/{{ $vehicle->getDefaultImage() }}" class="lazy">
                                            @else
                                                <img src="{{ $vehicle->getEmptyThumbnail($_fb_department) }}" alt=""  class="lazy">
                                            @endif
                                            <div class="outlet_icon">
                                                @if($vehicle->support_status == config('const.vehicle_enquiry_status.during_talking'))
                                                    <div class="pic-icon">
                                                        <i class="talk">商談中</i>
                                                        <p class="talk-period">{{ (!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日') : '' }}</p>
                                                    </div>
                                                @elseif(isset($vehicle->vehicle_info_basic->sale_status) && $vehicle->vehicle_info_basic->sale_status >= config('const.vehicle_sale_status_code.finish_sale'))
                                                    <i class="sold">売約済</i>
                                                @endif
                                                <span>
                                                {{ (isset($vehicle->vehicle_sprice->outlet_customer_price) && !empty($vehicle->vehicle_sprice->outlet_customer_price)) ? (sprintf('%s万円(税別)', number_format($vehicle->vehicle_sprice->outlet_customer_price))) : '' }}
                                                </span>
                                            </div>
                                        </a>
                                    </li>
                                @endforeach
                            @else
                                @foreach($outlet_vehicles as $key => $vehicle)
                                    <li>
                                        <a href="{{ route("frontend.{$_fb_department}.truck_search.detail", ['vehicle'=>$vehicle->id]) }}">

                                            @if(!empty($vehicle->getDefaultImage()))
                                                <img src="{{ asset('storage/vehicle/images/').'/'.$vehicle->id }}/{{ $vehicle->getDefaultImage() }}" class="lazy">
                                            @else
                                                <img src="{{ $vehicle->getEmptyThumbnail($_fb_department) }}" alt="" class="lazy">
                                            @endif
                                            <div class="outlet_icon">
                                                @if($vehicle->support_status == config('const.vehicle_enquiry_status.during_talking'))
                                                    <div class="pic-icon">
                                                        <i class="talk">商談中</i>
                                                        <p class="talk-period">{{ (!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日') : '' }}</p>
                                                    </div>
                                                @elseif(isset($vehicle->vehicle_info_basic->sale_status) && $vehicle->vehicle_info_basic->sale_status >= config('const.vehicle_sale_status_code.finish_sale'))
                                                    <i class="sold">売約済</i>
                                                @endif
                                                <span>
                                                    {{ (isset($vehicle->vehicle_sprice->outlet_customer_price) && !empty($vehicle->vehicle_sprice->outlet_customer_price)) ? (sprintf('%s万円(税別)', number_format($vehicle->vehicle_sprice->outlet_customer_price))) : '' }}
                                                </span>
                                            </div>
                                        </a>
                                    </li>
                                @endforeach
                            @endif
                        @else
                            <div id="empty_column">
                                アウトレットの車輛はございません。
                            </div>
                        @endif
                    </ul>
                </section>
            </div>
        </article>
        @endif

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

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

    </main>

@endsection

@section('page_css')
    <link rel="stylesheet" href="{{ asset("assets/frontend/{$_fb_department}/css/under.css") }}?20201207">
    <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;

        }

        .slick-initialized {
            visibility: visible;
        }

        #outra {
            display: none;
        }

        .pic .talk span,
        .outlet_icon .talk span {
            margin: 0 0 0 8px;
        }
        .outlet_icon .talk {
            background: #FBB040;
            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;
        }
        .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;
        }

        .outlet_slider .slick-list{
            overflow: visible !important;
        }

        .discussion_date_sp {
            display: none;
        }
        .discussion_date {
            display: inline-block;
        }
        #empty_column {
            margin: 8% 0;
            text-align: center;
            position: relative;
        }

        .slick-list {
            overflow: hidden !important;
        }

        ul.outlet_slider .slick-track {
            transform: none !important;
        }

        ul.outlet_slider .slick-track {
            transform: translate3d(0,0,0)!important;
        }

        @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;
            }

            .pic .talk {
                /*line-height: unset !important;
                padding: 5px 0 !important;*/
            }

            .pic .talk-period {
                line-height: 20px;
                margin-left: 40px;
                width: calc(100% - 60px);
            }
            #outra ul li .outlet_icon .pic-icon p {
                width: calc(100% - 95px);
            }

            #other_search_info dl .wire_title {
                width: 100% !important;
            }
            .outlet_icon .sold {
                left: 15px !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();
                }

                $('#btn_search').click(function () {
                    var manage_no = $('#manage_no').val();
                    if(manage_no) {
                        $('#manage_no').val(toHalfWidth(manage_no));
                    }

                    $("#search_form").submit();
                });

                $('input[name="search_params[body_category]"]').click(function () {
                   showSubCategory();
                   location.href=$(this).data('url');
                });
                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();
                }

                function toHalfWidth(str) {
                    // 全角英数字を半角に変換
                    str = str.replace(/[Ａ-Ｚａ-ｚ０-９]/g, function(s) {
                        return String.fromCharCode(s.charCodeAt(0) - 0xFEE0);
                    });
                    str = str.replace('　', ' ');
                    return str;
                }

                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');
                });
                @if(is_object($outlet_vehicles) && $outlet_vehicles->count() <= 5 && $outlet_vehicles->count() > 0)

                    $('.outlet_slider').on('init', function (event, slick) {
                        $('#outra').css('display', 'block');
                    });

                    $('.outlet_slider').on('lazyLoaded', function (event, slick) {
                        $('.slick-track').css('transform', 'unset !important');
                        $("ul.outlet_slider li").css('display', 'inline-block');
                        $("ul.outlet_slider li").css('position', 'relative !important');
                        $("ul.outlet_slider .slick-list").css('overflow', 'visible !important');
                    });

                    $('.outlet_slider').slick({
                        dots:false,
                        speed: 1000,
                        fade:false,
                        slidesToShow:5,
                        slidesToScroll: 1,
                        arrows: false,
                        autoplay:false,
                        autoplaySpeed:2000,
                        pauseOnHover: false,
                        centerMode: true,
                        centerPadding: '0', //両サイドの見えている部分のサイズ
                        responsive: [
                            {
                                breakpoint: 736,
                                settings: {
                                    centerMode: true, //要素を中央寄せ
                                    centerPadding: '18%', //両サイドの見えている部分のサイズ
                                    slidesToShow: 1,
                                    slidesToScroll: 1,
                                    arrows: true,
                                    autoplay:true,
                                }
                            }
                        ]
                    });
                @endif

            });
        });
    </script>
@endsection