@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">
                    {{--
                    <h2 class="title2">検索部品：<span>{{ config('const.search_parts_category_type.'.(isset($search_params['parts_category']) ? $search_params['parts_category'] : '')) }}</span></h2>
                    --}}
                    {{ 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')]) }}"' >
                                            <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')]) }}"' >
                                            <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>
                    <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="6" {{ (isset($search_params['vehicle_maker_id']) ? in_array('8', $search_params['vehicle_maker_id']) : false) !== false ? 'checked' : '' }}>
                                            <label for="6">マツダ</label>
                                        </li>
                                        <li>
                                            <input type="checkbox" name="search_params[vehicle_maker_id][]" value="7" id="7" {{ (isset($search_params['vehicle_maker_id']) ? in_array('7', $search_params['vehicle_maker_id']) : false) !== false ? 'checked' : '' }}>
                                            <label for="7">日産</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>
                            <dl>
                                <dt>サイズ</dt>
                                <dd>
                                    <select name="search_params[vehicle_size]">
                                        <option value="">指定なし</option>
                                        @foreach(config('const.parts_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>
                            <div id="search_parts_category">
                                <dl id="sub_category_wrap" class="search_parts_category">
                                    <dt class="wire_title">部品名</dt>
                                    <dd>
                                        <select name="search_params[parts_sub_category]" id="search_parts_sub_category">
                                            <option value="">指定なし</option>
                                        </select>
                                    </dd>
                                </dl>
                                <dl id="etc_category_wrap" class="search_parts_category">
                                    <dt class="wire_title"></dt>
                                    <dd>
                                        <select name="search_params[parts_etc_category]" id="search_parts_etc_category">
                                            <option value="">指定なし</option>
                                        </select>
                                    </dd>
                                </dl>
                            </div>
                            <dl>
                                <dt>その他</dt>
                                <dd><input type="text" name="search_params[etc]" class="input-half" placeholder="型式、品番などを半角で入力" value="{{(isset($search_params['etc']) ? $search_params['etc'] : '')}}"></dd>
                            </dl>


                        </li>
                    </ul>
                    <div class="centre">
                        <input type="submit" value="検索"><!--詳細条件変更-->
                        <input type="button" value="クリア" onclick="location.href='{{ route('frontend.parts.parts_search.index') }}';">
                    </div>
                    {{ Form::close() }}
                </section>
            </div>
        </article>
        <article id="result">
            <div class="search-bar topver">
                <div class="left-box">
                    <ul>
                        <li class="amount">
                            <p>該当<strong>{{ $parts->total() }}</strong>件</p>
                        </li>
                    </ul>
                </div>
                {{ $parts->appends(['search_params'=>$search_params, 'm'=>$view_mode, 's'=>$sort_mode, 'y_d'=>$year_dir])->links('vendor.pagination.user-vehicle-pagination') }}
                <div class="right-box parts_list">
                    <ul>
                        <li>
                            <button class="{{ $sort_mode == 'year_type' ? 'on' : '' }} {{ $year_dir."_arrow" }}" onclick='location.href="{{ route("frontend.{$_fb_department}.parts_search.index", ["search_params"=>$search_params, "m"=>$view_mode, "s"=>'year_type',"y_d"=>($year_dir == 'desc' ? 'asc' : 'desc'), "page"=>$page]) }}"'>年式が若い順</button>
                        </li>
                        <li>
                            <button class="{{ $sort_mode == 'updated_at' ? 'on' : '' }} {{ $update_dir."_arrow" }}" onclick='location.href="{{ route("frontend.{$_fb_department}.parts_search.index", ["search_params"=>$search_params, "m"=>$view_mode, "s"=>'updated_at',"u_d"=>($update_dir == 'desc' ? 'asc' : 'desc'),  "page"=>$page]) }}"'>新しく追加された順</button>
                        </li>
                    </ul>
                </div>
            </div>
            <!--結果-->
            <div id="result-car">
                <!-- -->
                @foreach($arr_parts as $part)

                    <div class="car"> <a href="{{ route("frontend.parts.parts_search.detail", ['id'=>$part['parts_id']]) }}">
                            <ul class="numberandshop">
                                <li>管理番号：<span>{{ $part['parts_code'] }}</span></li>
                            </ul>
                            <div class="pic">
                                @if($part['support_status'] == config('const.vehicle_enquiry_status.during_talking') )
                                    <i class="talk">
                                        <span>商談中</span>
                                        <span class="discussion_date">{{ (!empty($part['discussion_period']) && !empty($part['discussion_period_to'])) ? Carbon::parse($part['discussion_period'])->format('m月d日').'～'.Carbon::parse($part['discussion_period_to'])->format('m月d日') : '' }}</span>
                                        <span class="discussion_date_sp">{{ (!empty($part['discussion_period']) && !empty($part['discussion_period_to'])) ? Carbon::parse($part['discussion_period'])->format('m.d').'～'.Carbon::parse($part['discussion_period_to'])->format('m.d') : '' }}</span>
                                    </i>
                                @elseif($part['sale_status'] == config('const.parts_sale_status_code.finish_sale'))
                                    <i class="sold">売約済</i>
                                @elseif(($part['hp_publish'] == config('const.parts_public_status_code.public')) && !empty($part['hp_publish_date']) && Carbon::parse($part['hp_publish_date'])->diffInDays(Carbon::now()) <= 7)
                                    <i class="new">NEW</i>
                                @elseif($part['hp_publish'] == config('const.parts_public_status_code.expected') || $part['sale_status'] == config('const.parts_sale_status_code.before_sale'))
                                    <i class="expected">入庫予定</i>
                                @endif
                                @php
                                    $ob_parts = \App\Models\Parts\Parts::find($part['parts_id'])
                                @endphp
                                @if(is_object($ob_parts->getDefaultImage()))
                                    <img src="{{ asset("assets/frontend/{$_fb_department}/img/common/loading.gif") }}" data-original="{{ asset("storage/parts/") }}/{{ $part['parts_id'] }}/{{ $ob_parts->getDefaultImage()->file_path }}" 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
                            </div>
                            <div class="txt">
                                <h2><p>{{ $part['parts_name'] }}</p>{{ $part['addition_parts_name'] }}</h2>
                                <ul class="car-detail">
                                    <li>
                                        @if(isset($items[$part['parts_id']]) && is_array($items[$part['parts_id']]) && count($items[$part['parts_id']]))
                                            @foreach($items[$part['parts_id']] as $key => $item)
                                                @if($item == 'parts_code')
                                                    @continue
                                                @endif
                                                <dl class="category box">
                                                    <dt>{{ config('const.parts_item_list.'.$item) }}</dt>
                                                    <dd>@php echo (isset($part[$item]) ? htmlspecialchars_decode($part[$item]) : '') @endphp</dd>
                                                </dl>
                                            @endforeach
                                        @else
                                            <dl class="category box">
                                                <dt>カテゴリ</dt>
                                                <dd>{{ $part['parts_sub_category_name'] }}</dd>
                                            </dl>
                                            <dl class="parts_year box">
                                                <dt>部品年式</dt>
                                                <dd>{{ $part['parts_year_type'] }}</dd>
                                            </dl>
                                            <dl class="model box">
                                                <dt>車輛型式</dt>
                                                <dd>{{ $part['vehicle_model'] }}</dd>
                                            </dl>
                                        @endif
                                    </li>
                                </ul>
                            </div>
                        </a>
                    </div>
                @endforeach

            </div>

            <div class="search-bar bottomver">
                {{ $parts->appends(['search_params'=>$search_params, 'm'=>$view_mode, 's'=>$sort_mode, 'y_d'=>$year_dir])->links('vendor.pagination.user-vehicle-pagination') }}
            </div>
        </article>
        <div class="seisanmae"><p><a href="{{ route("frontend.{$_fb_department}.truck_search.index", ['b_class_status'=>config('const.b_class_status_code.dismantling')]) }}"><img src="{{ asset("assets/frontend/{$_fb_department}/img/pic/seisanmae.jpg") }}" alt="生産前トラックを探す"></a></p></div>
        <article>
            <div id="kaitai">
                <section>
                    <h2 class="title3">生産前トラック</h2>
                    <ul class="slider2">
                        @foreach($b_dismantle_vehicles as $key => $vehicle)
                            <li><a href="{{ route('frontend.truck.truck_search.detail', ['vehicle'=>$vehicle->id]) }}">
                                    @if(!empty($vehicle->getDefaultImage()))
                                        <img src="{{ asset("storage/vehicle/images/") }}/{{ $vehicle->id }}/{{ $vehicle->getDefaultImage() }}" alt="">
                                    @else
                                        <img src="{{ asset("assets/frontend/{$_fb_department}/img/pic/i_thumbnail.jpg") }}" >
                                    @endif
                                    <p>{{ (isset($vehicle->vehicle_sprice->outlet_customer_price) ? number_format($vehicle->vehicle_sprice->outlet_customer_price) : '') }}<span>万円(税別)</span></p>
                                </a>
                            </li>
                        @endforeach
                    </ul>
                </section>
            </div>
        </article>
        @include("frontend.{$_fb_department}.layouts.partials.search_parts_list")
    </main>
@endsection

@section('page_css')
    <link rel="stylesheet" href="{{ asset("assets/frontend/{$_fb_department}/css/under.css") }}?{{ Carbon::now()->format("YmdHis") }}">
    <style>
        #result-car {
            display: flex;
            flex-wrap: wrap;
        }
        #result-car .car {
            box-sizing: border-box;
            position: relative;
        }

        .desc_arrow:after {
            transform: rotate(90deg) !important;
        }
        .asc_arrow:after {
            transform: rotate(-90deg) !important;
        }
        .hidden {
            display: none !important;
        }
        li.li-parts-category {
            width: 100% !important;
        }
        #search-box ul:last-child{
            margin: 20px auto 0 auto;
        }
        #search-box ul li dl dt.category-label {
            width: 110px;
            margin-right: 10px;
        }
        #search-box ul.category {
            overflow: hidden;
            clear: both;
            display: flex;
            flex-wrap: wrap;
            margin: 0;
            width: 920px !important;
        }

        dl#sub_category_wrap dt.wire_title {
            font-size: 14px;
            font-weight: bold;
        }

        #search-box ul.category li {
            float: left;
            box-sizing: border-box;
            text-align: center;
            margin: 0 1.25% 1.25% 0;
            width: 12.9%;
        }
        #search-box ul.category li:nth-child(1),
        #search-box ul.category li:nth-child(2),
        #search-box ul.category li:nth-child(3),
        #search-box ul.category li:nth-child(4),
        #search-box ul.category li:nth-child(5),
        #search-box ul.category li:nth-child(6) {
        }

        li.amount strong {
            font-weight: bold;
            font-size: 16px;
            color: #005BAC;
        }

        #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 label:hover {
            background: rgba(0,91,172,.8);
        }
        #search-box ul.category li label:hover {
            color: #FFF;
        }

        #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%;
        }
        #search-box ul li ul.category li label:after {
            content: "";
            width: 85px;
            height: 35px;
            display: block;
            padding-top: 20px;
        }
        .car .txt h2 {
            word-break: break-all !important;
        }
        #search-box input[type=button],
        #search-box input[type=submit] {
            background: #005BAC;
            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 {
            opacity: 0.5;
        }

        .search_parts_category {
            margin-bottom: 5px !important;
        }
        #search_parts_category {
            margin-bottom: 20px !important;
        }
        .discussion_date_sp {
            display: none;
        }
        .discussion_date {
            display: inline-block;
        }
        .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 {
            margin: 0 0 0 8px;
        }
        .car .pic i.talk {
            top: 0px !important;
        }
        .car .txt h2 {
            min-height: 50px;
            vertical-align: middle;
            font-size: 12px;
        }
        @media only screen and (max-width: 736px){
            #search-box ul.category li {
                width: 32%;
                margin-right: 2%;
                margin-bottom: 2%;
            }
            #search-box input[type=button] {
                width: 100%;
                box-sizing: border-box;
                display: block;
            }

            #search-box ul.category li:nth-child(3n) {
                margin-right: 0 !important;
            }

            #search-box ul.category li:last-child {
                /*width: 100%;
                margin-right: 0 !important;*/
            }

            #search-box ul li ul.category li label:after {
                content: "";
                width: 50%;
                display: block;
                padding-top: 20px;
            }

            #search-box ul.category li:last-child label:after {
                /*display: none;*/
            }

            #search-box ul li ul.category li label {
                font-size: 12px !important;
                padding-bottom: 10px;
            }

            #search-box ul.category {
                width: unset !important;
            }
            #search-box ul li:nth-child(2) dl dt {
                width: 100% !important;
            }
            .pic .talk {
                line-height: unset !important;
                padding: 5px 0 !important;
            }

            .car .pic i.talk {
                top: 0 !important;
            }
            .car .pic i.talk span {
                margin: 0 0 0 3px !important;
            }
            .discussion_date_sp {
                display: inline-block !important;
            }
            .discussion_date {
                display: none !important;
            }
            #search-box ul.category li:last-child label:after {
                display: none;
            }
            #search-box ul.category li:last-child {
                width: 100%;
                margin-right: 0 !important;
            }
        }
    </style>
@endsection

@section('page_js')
    <script>
        $(function () {
            let main_category = parseInt("{{ isset($search_params['parts_category']) ? $search_params['parts_category'] : 0 }}");
            let second_category = parseInt("{{ isset($search_params['parts_second_category']) ? $search_params['parts_second_category'] : 0 }}");
            let sub_category = ("{{ isset($search_params['parts_sub_category']) ? $search_params['parts_sub_category'] : '' }}");
            let etc_category = ("{{ isset($search_params['parts_etc_category']) ? $search_params['parts_etc_category'] : '' }}");
            $(document).ready(function () {
                if(main_category) {
                    getSubCategory(main_category);
                } else {
                    $("#second_category_wrap").hide();
                    $("#search_parts_second_category").empty();
                    $("#sub_category_wrap").hide();
                    $("#search_parts_sub_category").empty();
                    $("#etc_category_wrap").hide();
                    $("#search_parts_etc_category").empty();
                }
                $('input[name="search_params[parts_category]"]').click(function () {
                    $("#search_submit").submit();
                });
                $("#search_parts_sub_category").change(function () {
                    sub_category = $(this).val();
                    etc_category = 0;
                    if($("#search_parts_sub_category option:selected").data('other')){
                        getSubCategory(main_category, $("#search_parts_sub_category option:selected").data('other'));
                    } else {
                        $("#etc_category_wrap").hide();
                        $("#search_parts_etc_category").empty();
                    }
                });

                function getSubCategory(category_id, third_id = 0) {

                    $.ajax({
                        type: "post",
                        url: " {{ route("frontend.{$_fb_department}.ajax.get_sub_category") }}",
                        data: {
                            category_id: category_id,
                            sub_category:$("#search_parts_sub_category option:selected").data('other'),
                            _token: "{{ csrf_token() }}"
                        },
                        datatype: 'json',
                        success: function(result) {
                            console.log(sub_category);
                            if($("#search_parts_sub_category option:selected").data('other')){
                                $("#etc_category_wrap").show();
                                $("#search_parts_etc_category").empty().html(result.content);
                                $("#search_parts_etc_category").val(etc_category);
                            } else {
                                $("#sub_category_wrap").show();
                                $("#search_parts_sub_category").empty().html(result.content);
                                $("#search_parts_sub_category").val(sub_category);
                                $("#etc_category_wrap").hide();
                                $("#search_parts_etc_category").empty();
                                if($("#search_parts_sub_category option:selected").data('other')){
                                    getSubCategory(main_category, $("#search_parts_sub_category option:selected").data('other'));
                                }
                            }
                        }
                    });
                }
            });
        });
    </script>
@endsection