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

@section('title', '価格表')

@section('content')
    <main>
        <div id="mv" class="sell">
            <h1>価格表</h1>
            <p>レンタル料金の一覧です。</p>
        </div>
        <article>
            <div class="w1200">
                <div class="text-top">
                    <div class="scroll-t">
                        <table class="sticky_table">
                            <thead>
                            <tr>
                                <td class="price-title" colspan="10">全国対応可能！料金表に無い車種もご準備しております。お気軽にお問い合わせください。</td>
                            </tr>
                            <tr>
                                <th class="first-th date-title diagonal-line" rowspan="2"></th>
                                <th class="date-title" rowspan="2"><p>日額</p>(円／税別)</th>
                                <th class="date-title" colspan="2"><p>1ヶ月</p></th>
                                <th class="date-title" colspan="2"><p>3ヶ月<span>(34％割引)</span></p></th>
                                <th class="date-title" colspan="2"><p>6ヶ月<span>(40％割引)</span></p></th>
                                <th class="last-th date-title" colspan="2"><p>12ヶ月<span>(50％割引)</span></p></th>
                            </tr>
                            <tr>
                                <th class="value-title middle-th"><p>月額</p>(円／税別)</th>
                                <th class="value-title"><p>距離縛り</p>(km)</th>
                                <th class="value-title middle-th"><p>月額</p>(円／税別)</th>
                                <th class="value-title"><p>距離縛り</p>(km)</th>
                                <th class="value-title middle-th"><p>月額</p>(円／税別)</th>
                                <th class="value-title"><p>距離縛り</p>(km)</th>
                                <th class="value-title middle-th"><p>月額</p>(円／税別)</th>
                                <th class="last-th value-title"><p>距離縛り</p>(km)</th>
                            </tr>
                            </thead>
                            <tbody>
                            @foreach($rental_prices as $rental_price)
                                <tr>
                                    <th class="first-th">{{ $rental_price->name }}</th>
                                    <td>{{ $rental_price->day_price == (string)intval($rental_price->day_price) ? number_format(intval($rental_price->day_price)) : $rental_price->day_price }}</td>
                                    <td class="middle-td">{{ $rental_price->month_price == (string)intval($rental_price->month_price) ? number_format(intval($rental_price->month_price)) : $rental_price->month_price }}</td>
                                    <td>{{ empty($rental_price->month_destination_rule ) ? '無し' : ($rental_price->month_destination_rule == (string)intval($rental_price->month_destination_rule) ? number_format(intval($rental_price->month_destination_rule)) : $rental_price->month_destination_rule) }}</td>
                                    <td class="middle-td">{{ $rental_price->three_month_price == (string)intval($rental_price->three_month_price) ? number_format(intval($rental_price->three_month_price)) : $rental_price->three_month_price }}</td>
                                    <td>{{ empty($rental_price->three_month_destination_rule ) ? '無し' : ($rental_price->three_month_destination_rule == (string)intval($rental_price->three_month_destination_rule) ? number_format(intval($rental_price->three_month_destination_rule)) : $rental_price->three_month_destination_rule) }}</td>
                                    <td class="middle-td">{{ $rental_price->half_year_price == (string)intval($rental_price->half_year_price) ? number_format(intval($rental_price->half_year_price)) : $rental_price->half_year_price }}</td>
                                    <td>{{ empty($rental_price->half_year_destination_rule ) ? '無し' : ($rental_price->half_year_destination_rule == (string)intval($rental_price->half_year_destination_rule) ? number_format(intval($rental_price->half_year_destination_rule)) : $rental_price->half_year_destination_rule) }}</td>
                                    <td class="middle-td">{{ $rental_price->year_price == (string)intval($rental_price->year_price) ? number_format(intval($rental_price->year_price)) : $rental_price->year_price }}</td>
                                    <td class="last-td">{{ empty($rental_price->year_destination_rule ) ? '無し' : ($rental_price->year_destination_rule == (string)intval($rental_price->year_destination_rule) ? number_format(intval($rental_price->year_destination_rule)) : $rental_price->year_destination_rule) }}</td>
                                </tr>
                            @endforeach
                            </tbody>
                        </table>
                    </div>
                    <section>
                        <h2 class="subtitle">オプション料金</h2>
                        <div>
                            <p>営業ナンバー名義変更　50,000円　
                                ※1ヶ月以上のレンタルの場合ご利用いただけます。

                                使用開始場所までの陸送　
                                ※別途お見積りいたします。
                            </p>
                        </div>
                    </section>
                    <section>
                        <h2 class="subtitle">注意事項</h2>
                        <div>
                            <p>
                                3ヶ月超のレンタルは法定点検の為、3ヶ月毎に当社指定工場での点検を受けて頂くため、数日お時間を頂きます。尚法定点検に伴う費用は発生致しません。<br/>
                                設定距離を超過した場合には、月額×契約月数／設定距離を1kmあたりの単価として超過走行距離×単価をご請求致します。
                            </p>
                            <p>
                                <small>・記載の料金には、消費税は含まれておりません。<br>
                                    ・本料金表は2019年6月1日現在のものです。</small>
                            </p>
                        </div>
                    </section>
                </div>
            </div>
        </article>
    </main>
@endsection

@section('page_css')
    <link rel="stylesheet" href="{{ asset("assets/frontend/{$_fb_department}/css/under.css") }}">
    <style>
        table.sticky_table {
            color: #231f20;
            border-collapse: separate;
        }

        table.sticky_table th p {
            color: #231f20;
        }
        .sticky_table tr, .sticky_table th, .sticky_table td {
            border: 1px solid #231f20;
        }

        td.price-title {
            border: solid 2px #231f20;
            border-bottom: none;
            border-top-left-radius: 10px;
            border-top-right-radius: 10px;
            background: #231f20;
            color: #FFF;
            font-weight: bold;
            font-size: 18px;
            letter-spacing: 4px;
        }

        table.sticky_table thead th {
            font-weight: bold;
        }
        th.diagonal-line {
            background-image: linear-gradient(to right top, transparent calc(50% - 0.5px), #231f20 50%, #231f20 calc(50% + 0.5px), transparent calc(50% + 1px))
        }

        .sticky_table tbody tr:nth-child(odd) th, .sticky_table tbody tr:nth-child(odd) td{
            background: #FFF;
        }
        .sticky_table tbody tr:nth-child(even) th, .sticky_table tbody tr:nth-child(even) td{
            background: #eff1f1;
        }
        .date-title {
            background: #e5e4d7;
            font-weight: normal !important;
            font-size: 13px;
        }

        .date-title p {
            font-weight: bold;
            font-size: 16px;
        }

        .date-title p span {
            font-size: 14px;
            color: #231f20;
        }
        .value-title{
            background: #d4d3c8;
            font-weight: normal !important;
            font-size: 13px;
        }
        .value-title p {
            font-weight: bold;
            font-size: 16px;
        }

        .sticky_table th.first-th {
            border-left: solid 2px #231f20;
        }
        .sticky_table th.last-th, .sticky_table td.last-td {
           border-right: solid 2px #231f20;
        }

        .sticky_table th.middle-th, td.middle-td {
            border-right: 1px;
        }

        .sticky_table tbody tr th, .sticky_table tbody tr td {
            border-bottom: 1px;
        }

        .sticky_table tr:last-child th.first-th, .sticky_table tr:last-child td {
            border-bottom: solid 2px #231f20;
        }

    </style>
@endsection