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

@section('title', 'TOP')

@section('content')
    <main>
        <section id="news"  class="box">
            <h2>新着情報</h2>
            <p class="all"><a href="{{ route("frontend.{$_fb_department}.news.index") }}">All</a></p>
            <ul>
                @if($news->count() > 0)
                    @foreach($news as $key => $item)
                        <li>
                            <dl>
                                <dt>{{ Carbon::parse($item->updated_at)->format('Y/m/d') }}</dt>
                                <dd>{{$item->title }}</dd>
                            </dl>
                        </li>
                    @endforeach
                @else
                    <li>
                        <dl>新着情報が存在しません。</dl>
                    </li>
                @endif
            </ul>

        </section>
        <div id="slider-wrap">
            <ul class="slider pc">
                <li><img src="{{ asset("assets/frontend/{$_fb_department}/img/slider/s1.jpg") }}" alt=""></li>
                <li><img src="{{ asset("assets/frontend/{$_fb_department}/img/slider/s2.jpg") }}" alt=""></li>
            </ul>
            <ul class="slider sp">
                <li><img src="{{ asset("assets/frontend/{$_fb_department}/img/slider/s1-sp.jpg") }}" alt=""></li>
                <li><img src="{{ asset("assets/frontend/{$_fb_department}/img/slider/s2-sp.jpg") }}" alt=""></li>
            </ul>
            <div id="top-search">
                <div class="top-search-inside">
                    <h2>レンタカー予約（空車照会）</h2>
                    {{ Form::open(["route"=>"frontend.{$_fb_department}.car_search.index", "method"=>"get"]) }}

                    @php
                        $c_start = Carbon::now()->format("H") > config('const.rental_contract_hour_limit')  ? Carbon::now()->addDay() : Carbon::now();
                        $c_end = Carbon::now()->format("H") > config('const.rental_contract_hour_limit') ?  Carbon::now()->addDays(2) : Carbon::now()->addDay();
                    @endphp
                    <ul>
                        <li>
                            <dl>
                                <dt>出発</dt>
                                <dd class="company">
                                    <div class="w60per">
                                        <input type="date" id="loan_date" data-date="{{ $c_start->format("Y-m-d") }}" name="search_params[loan_date]" min="{{ $c_start->format("Y-m-d") }}" value="{{ $c_start->format("Y-m-d") }}">
                                    </div>
                                    <div class="w40per select-box">
                                        <label>
                                            <select name="search_params[loan_time]" id="loan_time">
                                                <option value="">--</option>
                                                @foreach (config('const.rental_contract_time_search') as $time)
                                                    <option value="{{ $time }}" class="{{ Carbon::now()->format("Y-m-d H:i") > Carbon::parse($c_start->format('Y-m-d ') . $time)->format("Y-m-d H:i") ? 'be_disable hide': '' }}">{{ $time }}</option>
                                                @endforeach
                                            </select>
                                        </label>
                                    </div>
                                </dd>
                            </dl>
                        </li>

                        <li>
                            <dl>
                                <dt>返却</dt>
                                <dd class="company">
                                    <div class="w60per">
                                        <input type="date" id="return_date" name="search_params[return_date]" min="{{ $c_end->format("Y-m-d") }}" value="{{ $c_end->format("Y-m-d") }}">
                                    </div>
                                                  <div class="w40per select-box">
                                        <label>
                                            <select name="search_params[return_time]">
                                                <option value="">--</option>
                                                @foreach (config('const.rental_contract_time_search') as $time)
                                                    <option value="{{ $time }}">{{ $time }}</option>
                                                @endforeach
                                            </select>
                                        </label>
                                    </div>
                                </dd>
                            </dl>
                        </li>
                        <li>
                            <div class="select-box">
                                <label>
                                    <select name="search_params[plan_shed_id]">
                                        <option value="">拠点を選ぶ</option>
                                        @foreach(config('const.rental_front_shed_list') as $key => $shed_name)
                                            <option value="{{ $key }}" >{{ $shed_name }}</option>
                                        @endforeach
                                    </select>
                                </label>
                            </div>
                        </li>
                        <li>
                            <div class="select-box">
                                <label>
                                    <select name="search_params[contact_search_type]">
                                        <option value="">車種を選ぶ</option>
                                        @foreach(config('const.rental_car_search_type') as $key => $category)
                                            <option value="{{ $key }}">{{ $category }}</option>
                                        @endforeach
                                            <option value="{{ config('const.option_other_value') }}">その他</option>
                                    </select>
                                </label>
                            </div>
                        </li>
                        <li>
                            <input type="submit" value="検索">
                        </li>
                    </ul>
                    {{ Form::close() }}
                    <p><a data-target="must-read" class="modal-open">必ずお読みください</a></p>
                </div>
            </div>
        </div>
        <article>
            <section>
                <h2 class="title">車種から探す</h2>
                <ul class="four-list slide pic80" id="rental_vehicle_type_list">
                    @foreach(config('const.contact_search_type') as $key=>$type)
                        <li> <a href="{{ route("frontend.{$_fb_department}.car_search.index", ['search_params[contact_search_type]' => $key]) }}">
                                <div class="pic"><img src="{{ \App\Service\Rental\RentalCarTypeService::getImgURLbyID($key) }}" alt="{{ $type }}"></div>
                                <div class="text">
                                    <h3>{{ $type }}</h3>
                                </div>
                            </a> </li>
                    @endforeach
                </ul>
            </section>
            <div id="limited" class="gray-bk">
                <section>
                    <a href="{{ route("frontend.{$_fb_department}.car_search.index", ['search_params[contact_search_type]' => 8]) }}">
                    <div class="bg-pink">

                      {{--  <h2 class="title">期間限定車とは</h2>
                        <div class="limit_car_description">
                            <p>・ウシトラ車両在庫300台から厳選したトラック！</p>
                            <p>・豊富な車種をご用意しておりますので必ずお探しの車両が見つかります！</p>
                            <p>・毎日入替が発生しておりますので掲載の無いお車もお問合せ下さい。</p>
                            --}}{{--                        <p>期間限定車貸出条件</p>--}}{{--
                            --}}{{--                        <p>最短レンタル期間：車検付2週間～、車検無し1ヶ月～</p>--}}{{--
                            --}}{{--                        <p>お車の準備に3日～10日ほどお時間を頂く場合がございます。</p>--}}{{--
                            --}}{{--                        <p>※車検・整備・名義変更等</p>--}}{{--
                            --}}{{--                        <p>レンタル料は車両・期間によって異なりますのでメールかお電話でお問合せ下さい。</p>--}}{{--
                        </div>--}}
                    </div>
                    </a>
                </section>
                <div class="limited-cars">
                    <div class="car-sliders">
                        @if($limited_vehicles->count() > 0)
                            <ul class="{{ $limited_vehicles->count() > 5 ? 'slider2' : 'limit_car_slider'}} slide" id="limited_car_box">
                                @foreach($limited_vehicles as $vehicle)
                                    @if($loop->index < 10)
                                        <li>
                                            <a href="{{ route("frontend.{$_fb_department}.car_search.detail", ["vehicle"=>$vehicle->id, 'is_limit_car'=>1, 'search_params[contact_search_type]' => config('const.contact_search_type_code.etc')]) }}">
                                                <div class="pic">
                                                    @if(!empty($vehicle->getDefaultImage()) && Storage::disk('vehicle_image')->has($vehicle->id.'/'.$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") }}" alt="">
                                                    @endif
                                                </div>
                                            </a>
                                        </li>
                                    @endif
                                @endforeach
                            </ul>
                        @else
                            <ul>
                                <li class="text-center">
                                    期間限定車両が存在しません。
                                </li>
                            </ul>
                        @endif
                    </div>
                </div>

                    <p class="viewall">
                        <a href="{{ route("frontend.{$_fb_department}.car_search.index", ['search_params[contact_search_type]' => config('const.contact_search_type_code.etc')]) }}">すべて見る</a>
                        <span class="pl5">該当車種<span class="red bold">{{ $limited_vehicles->count() }}</span>件！！</span>
                    </p>

                <section>
                    <p id="contract_search_link"><a href="{{ route("frontend.{$_fb_department}.contact.index") }}">&nbsp;</a></p>
                </section>
            </div>
            {{--
            <section>
                <h2 class="title">キャンペーン・お得なプラン情報</h2>
                <ul class="four-list slide">
                    <li><a href="">
                            <div class="pic"><img src="{{ asset("assets/frontend/{$_fb_department}/img/pic/sample2.jpg") }}" alt=""></div>
                            <div class="text">
                                <p>テキストが入りますテキストが入ります
                                    テキストが入りますテキストが入ります </p>
                            </div>
                        </a></li>
                    <li><a href="">
                            <div class="pic"><img src="{{ asset("assets/frontend/{$_fb_department}/img/pic/sample2.jpg") }}" alt=""></div>
                            <div class="text">
                                <p>テキストが入りますテキストが入ります
                                    テキストが入りますテキストが入ります </p>
                            </div>
                        </a></li>
                    <li><a href="">
                            <div class="pic"><img src="{{ asset("assets/frontend/{$_fb_department}/img/pic/sample2.jpg") }}" alt=""></div>
                            <div class="text">
                                <p>テキストが入りますテキストが入ります
                                    テキストが入りますテキストが入ります </p>
                            </div>
                        </a></li>
                    <li><a href="">
                            <div class="pic"><img src="{{ asset("assets/frontend/{$_fb_department}/img/pic/sample2.jpg") }}" alt=""></div>
                            <div class="text">
                                <p>テキストが入りますテキストが入ります
                                    テキストが入りますテキストが入ります </p>
                            </div>
                        </a></li>
                </ul>
                <p class="viewall"><a href="">すべて見る</a></p>
            </section>
            --}}
            <section id="point_section">
                <h2 class="title">UJレンタル 4つのポイント</h2>
                <ul class="four-list point">
                    <li><a href="#point_section">
                            <div class="pic"><i>Point<span>1</span></i><img src="{{ asset("assets/frontend/{$_fb_department}/img/icon/point-ver1.png") }}" alt="イメージ"></div>
                            <div class="text">
                                <h3>全台高年式車確約</h3>
                                <p class="">車両は全て高年式・低走行距離車両。 <br>
                                    全台ETC完備・平ボディ以外バックカメラ搭載。 <br>
                                    ピカピカに清掃して貸出し致します。 </p>
                            </div>
                        </a></li>
                    <li><a href="#point_section">
                            <div class="pic"><i>Point<span>2</span></i><img src="{{ asset("assets/frontend/{$_fb_department}/img/icon/point-ver2.png") }}" alt="イメージ"></div>
                            <div class="text">
                                <h3>営業ナンバーOK <small>※１ヵ月超のレンタルの場合</small></h3>
                                <p class="">最短2週間のレンタルで営業ナンバーへの変更OK <br>
                                    名義変更手続きは全て弊社へお任せ。<br>
                                    <small>※増車申請を除く</small> </p>
                            </div>
                        </a></li>
                    <li><a href="#point_section">
                            <div class="pic"><i>Point<span>3</span></i><img src="{{ asset("assets/frontend/{$_fb_department}/img/icon/point-ver3.png") }}?20201223" alt="イメージ"></div>
                            <div class="text">
                                <h3>小型・大型・特殊車まで対応</h3>
                                <p class="">レギュラー車両に加え、グループ保有在庫常時300台以上から<br>
                                    お客様にピッタリなトラックをお探し致します！ </p>
                            </div>
                        </a></li>
                    <li><a href="#point_section">
                            <div class="pic"><i>Point<span>4</span></i><img src="{{ asset("assets/frontend/{$_fb_department}/img/icon/point-ver4.png") }}" alt="イメージ"></div>
                            <div class="text">
                                <h3>ハイシーズンの増料金なし!!</h3>
                                <p class="">ハイシーズン割増料金無し、更に保険費用等の追加料金無し。<br>
                                    <small>※事故・破損・汚れ等は別途請求があります。 </small> </p>
                            </div>
                        </a></li>
                </ul>
{{--                <p class="viewall"><a href="#point_section" id="view_all_point">すべて見る</a></p>--}}
            </section>
            <div id="point" class="gray-bk">
                <section>
                    <h2 class="title">レンタルの流れ</h2>
                    <ul class="four-list flow">
                        <li>
                            <div class="pic"><i>Step<span>1</span></i><img src="{{ asset("assets/frontend/{$_fb_department}/img/top/flow1.jpg") }}" alt=""></div>
                            <div class="text">
                                <p>お探しの車種をサイトで検索。<br>
                                    ピッタリのものが見つからない場合もお探しします！<a href="">こちら</a>からお問い合わせください。</p>
                            </div>
                        </li>
                        <li>
                            <div class="pic"><i>Step<span>2</span></i><img src="{{ asset("assets/frontend/{$_fb_department}/img/top/flow2.jpg") }}" alt=""></div>
                            <div class="text">
                                <p>ご希望車種が見つかったら、お問い合わせのフォームをご入力いただきお送りください。お電話でも可能です！</p>
                            </div>
                        </li>
                        <li>
                            <div class="pic"><i>Step<span>3</span></i><img src="{{ asset("assets/frontend/{$_fb_department}/img/top/flow3.jpg") }}" alt=""></div>
                            <div class="text">
                                <p>当社担当より、詳細についてのご連絡をいたします。</p>
                            </div>
                        </li>
                        <li>
                            <div class="pic"><i>Step<span>4</span></i><img src="{{ asset("assets/frontend/{$_fb_department}/img/top/flow4.jpg") }}" alt=""></div>
                            <div class="text">
                                <p>車両のお渡しです。お客様のお車をお預かりすることも可能です。 </p>
                            </div>
                        </li>
                    </ul>
                    <p class="viewall"><a href="{{ route("frontend.rental.visitor.index") }}">すべて見る</a></p>
                </section>
            </div>
            <section>
                <h2 class="title">よくあるご質問</h2>
                <ul class="faq-list">
                    <li>
                        <dl>
                            <dt><span>Q.</span>予約の方法を教えてください</dt>
                            <dd><span>A.</span>ご利用日の前日までに当サイトの画面上部の「予約する」ボタンからか、TOPページもしくは「拠点一覧」ページより拠点をお選びいただき、お電話にてご予約下さい。</dd>
                        </dl>
                    </li>
                    <li>
                        <dl>
                            <dt><span>Q.</span>予約の時間に遅れそうな場合はどうすればいいですか</dt>
                            <dd><span>A.</span>万一遅れそうな場合は、ご利用予定の拠点へ必ずご連絡ください。<br>
                                出発予定時刻を過ぎてもご来店いただけない場合、拠点よりご確認のお電話を差し上げる場合がございます。<br>ご連絡がない場合、キャンセル扱いとさせて頂きます。
                            </dd>
                        </dl>
                    </li>
                    <li>
                        <dl>
                            <dt><span>Q.</span>予約成立後のキャンセルや変更はどうすればいいですか</dt>
                            <dd><span>A.</span>ご利用拠点まで必ずお電話にてご連絡ください。
{{--                                取消料の詳細は「<a href="/rental/cancel-policy">キャンセルポリシー</a>」のページをご覧ください。</dd>--}}
                        </dl>
                    </li>
                </ul>
                <p class="viewall"><a href="{{ route('frontend.rental.faq.index') }}">すべて見る</a></p>
            </section>
        </article>
        <article>
            <div id="other">
                <ul>
                    <li><a href="{{ route('frontend.rental.price.index') }}">価格表</a></li>
                    <li><a href="{{ route('frontend.rental.payment.index') }}">お支払い方法</a></li>
                    <li><a href="{{ route('frontend.rental.visitor.index') }}">はじめての方へ</a></li>
                    <li><a href="{{ route('frontend.rental.insurance.index') }}">保険・補償について</a></li>
                </ul>
            </div>
        </article>
    </main>

    <div id="must-read" class="modal-content">
        <div class="textarea">
            <div class="must-read-wrap">
                <h3>レンタル前にご確認をお願いいたします。</h3>
                <h4>免許証分類</h4>
                <h5>平成１９年６月１日までに取得</h5>
                <table>
                    <tr>
                        <th>区分</th>
                        <th>普通免許</th>
                        <th colspan="2">大型免許</th>
                    </tr>
                    <tr>
                        <td>受験資格</td>
                        <td>18歳以上</td>
                        <td>20歳以上、免許期間2年以上</td>
                        <td>21歳以上、免許期間3年以上</td>
                    </tr>
                    <tr>
                        <td>自動車の種類 </td>
                        <td>普通自動車 </td>
                        <td>大型自動車 </td>
                        <td>特定大型自動車 </td>
                    </tr>
                    <tr>
                        <td>車両総重量 </td>
                        <td>8トン未満 </td>
                        <td>8トン以上11トン未満 </td>
                        <td>11トン以上 </td>
                    </tr>
                    <tr>
                        <td>最大積載量 </td>
                        <td>5トン未満 </td>
                        <td>5トン以上6.5トン未満 </td>
                        <td>6.5トン以上 </td>
                    </tr>
                    <tr>
                        <td>乗車定員 </td>
                        <td>10人以下 </td>
                        <td>11人以上29人以下 </td>
                        <td>30人以上 </td>
                    </tr>
                </table>
                <h5>平成19年6月2日以降に取得</h5>
                <table>
                    <tr>
                        <th>区分</th>
                        <th>普通免許</th>
                        <th>中型免許</th>
                        <th>大型免許</th>
                    </tr>
                    <tr>
                        <td>受験資格</td>
                        <td>18歳以上</td>
                        <td>20歳以上、免許期間2年以上</td>
                        <td>21歳以上、免許期間3年以上</td>
                    </tr>
                    <tr>
                        <td>自動車の種類 </td>
                        <td>普通自動車 </td>
                        <td>中型自動車 </td>
                        <td>大型自動車 </td>
                    </tr>
                    <tr>
                        <td>車両総重量 </td>
                        <td>5トン未満 </td>
                        <td>5トン以上11トン未満 </td>
                        <td>11トン以上 </td>
                    </tr>
                    <tr>
                        <td>最大積載量 </td>
                        <td>3トン未満 </td>
                        <td>3トン以上6.5トン未満 </td>
                        <td>6.5トン以上 </td>
                    </tr>
                    <tr>
                        <td>乗車定員 </td>
                        <td>10人以下 </td>
                        <td>11人以上29人以下 </td>
                        <td>30人以上 </td>
                    </tr>
                </table>
                <h5>平成29年3月12日以降に取得</h5>
                <table>
                    <tr>
                        <th>区分</th>
                        <th>普通免許</th>
                        <th>準中型免許</th>
                        <th>中型免許</th>
                        <th>大型免許</th>
                    </tr>
                    <tr>
                        <td>受験資格</td>
                        <td>18歳以上</td>
                        <td>18歳以上</td>
                        <td>20歳以上、免許期間2年以上</td>
                        <td>21歳以上、免許期間3年以上</td>
                    </tr>
                    <tr>
                        <td>自動車の種類 </td>
                        <td>普通自動車 </td>
                        <td>準中型自動車 </td>
                        <td>中型自動車 </td>
                        <td>大型自動車 </td>
                    </tr>
                    <tr>
                        <td>車両総重量 </td>
                        <td>3.5トン未満 </td>
                        <td>3.5トン以上7.5トン未満 </td>
                        <td>7.5トン以上11トン未満 </td>
                        <td>11トン以上 </td>
                    </tr>
                    <tr>
                        <td>最大積載量 </td>
                        <td>2トン未満 </td>
                        <td>4.5トン未満 </td>
                        <td>6.5トン未満 </td>
                        <td>6.5トン以上</td>
                    </tr>
                    <tr>
                        <td>乗車定員 </td>
                        <td>10人以下 </td>
                        <td>10人以下</td>
                        <td>29人以下 </td>
                        <td>30人以上</td>
                    </tr>
                </table>
                <h4>免責事項</h4>
                <p>対物：５万円</p>
                <p>対人： 無制限</p>
                <p>車両：１０万円</p>

            </div>
        </div>
        <p class="closemodal"><a class="modal-close">×</a></p>
    </div>

@endsection

@section('page_css')
    <link rel="stylesheet" href="{{ asset("assets/frontend/{$_fb_department}/css/top.css") }}?{{ Carbon::now()->format('YmdHis') }}">
    <style>
        .text-center {
            text-align: center;
        }
        #rental_vehicle_type_list a {
            border-radius: 10px;
        }
        #rental_vehicle_type_list a:hover {
            background-color: rgba(235, 27, 35, 0.6);
        }

        div.limited-cars {
            background: rgba(232, 0, 0, .1);
            padding: 25px 0 15px 0;
            margin: 0;
            position: relative;
            overflow: hidden;
        }

        div.limited-cars .car-sliders {
            max-width: 1200px;
            margin: 0 auto;
        }

        div.limited-cars:before {
            content: "LIMITED!! LIMITED!! LIMITED!! LIMITED!! LIMITED!! LIMITED!! LIMITED!! LIMITED!! LIMITED!! LIMITED!! LIMITED!! LIMITED!! LIMITED!! ";
            font-style: italic;
            white-space: nowrap;
            font-size: 165px;
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            left: 0;
            color: #FFF;
            font-weight: bold;
        }


        .limit_car_slider li {
            position: relative !important;
            padding: 0 3px;
        }
        .point_description {
            display: none;
        }
        .company div:first-child {
            padding-right: 10px !important;
        }
        .limit_car_description {
            margin-top: -20px;
            margin-bottom: 20px;
        }
        .mb10 {
            margin-bottom: 10px;
        }
        .mb20 {
            margin-bottom: 20px;
        }
        .limit_car_description p{
            text-align: center;
        }

        #news ul {
            padding-right: 30px;
        }
        #news ul li:last-child {
            border-bottom: none;
        }
        #news ul li {
            border-bottom: 1px dashed #bbb;
        }
        @media only screen and (max-width: 736px) {
            .limit_car_slider li {
                padding: 0 10px;
            }
            .limit_car_description {
                padding: 0 10px;
            }

            div.limited-cars {
                margin-bottom: 10px;
            }

            div.limited-cars:before {
                text-align: center;
                font-size: 40px;
                transform: translate(0,0);
                white-space: normal;
                top: 20px;
                left: auto;
                line-height: 1.5;
            }
        }
    </style>
@endsection

@section('page_js')
    <script>

        $(function () {
            $(document).ready(function () {
                $("#view_all_point").click(function (event) {
                    event.preventDefault();
                    $(".point_description").show(500);
                });
                $(".four-list.point a, .four-list.point").click(function () {
                    $(".point_description").hide(500);
                });

                $("#loan_date").change(function (event) {
                    let start_date = $(this).data('date');
                    let loan_date = $(this).val();
                    if(start_date == loan_date) {
                        $('#loan_time option.be_disable').addClass('hide');
                    } else {
                        $('#loan_time option.be_disable').removeClass('hide');
                    }
                });

                @if(is_object($limited_vehicles) && $limited_vehicles->count() <= 5 && $limited_vehicles->count() > 0)
                    $("#limited_car_box li").css('display', 'inline-block');
                    $("#limited_car_box li").css('width', '15%');

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

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