@section('title', 'お問い合わせ')

@section('content')
    <main>
        <div id="mv" class="sell">
            <h1>お問い合わせ</h1>
        </div>
        <article id="privacy">
            <div class="w1200">
                <div class="text-top">
                    @if($_fb_department == 'truck')
                        <p class="contact-search"><a href="{{ route('frontend.truck.custom_search.index') }}"><img src="{{ asset("assets/frontend/{$_fb_department}/img/pic/contact/search.jpg") }}" alt="ご希望の車輛をお探しします！サイトで見つからない方は、こちらからお問合せください。"></a></p>
                    @endif
                    <div class="contact_flow">
                        <ul>
                            <li class="active"><span>Step.1</span>お問い合わせ内容の入力</li>
                            <li><span>Step.2</span>入力内容のご確認</li>
                            <li><span>Step.3</span>送信完了</li>
                        </ul>
                    </div>
                    {{ Form::open(["route"=>"frontend.{$_fb_department}.contact.check", "method"=>"post"]) }}
                        <table class="contact-table">
                            @if(is_object($obj_about))
                            <tr>
                                <th>管理番号</th>
                                <td>
                                    @switch(class_basename($obj_about))
                                        @case('Vehicle')
                                            <p>{{ is_object($obj_about->vehicle_hp_publish) ? $obj_about->getManageNoForFront() : '' }}</p>
                                            <input type="hidden" name="manage_no" value="{{ is_object($obj_about->vehicle_hp_publish) ? $obj_about->getManageNoForFront() : '' }}">
                                            @break
                                        @case('Parts')
                                            <p>{{ str_replace('OP', '', $obj_about->parts_code) }}</p>
                                            <input type="hidden" name="manage_no" value="{{ $obj_about->parts_code }}">
                                            @break
                                    @endswitch
                                    <input type="hidden" name="id" value="{{ $obj_about->id }}">
                                    <input type="hidden" name="class_name" value="{{ class_basename($obj_about) }}">
                                </td>
                            </tr>
                            @endif
                            <tr>
                                <th> お問い合わせ種別<span class="req">必須</span></th>
                                <td>
                                    <div class="radiobtn-wrap">
                                        @foreach( config("const.contact_type_{$_fb_department}") as $key => $val )
                                            @if($key == config('const.contact_type_code.search_question'))
                                                @continue
                                            @endif
                                            <input type="radio" name="category_id" id="radio{{ $key }}"
                                                   value="{{ $key }}" {{ old('category_id', isset($contact['category_id']) ? $contact['category_id'] : '' ) == $key ? 'checked' : '' }} >
                                            <label for="radio{{ $key }}">{{ $val }}</label>
                                            <br>
                                        @endforeach
                                    </div>
                                    @error('category_id')
                                    <br/><span class="must_contact">{{ $message }}</span>
                                    @enderror
                                </td>
                            </tr>
                            <tr>
                                <th>個人/法人<span class="req">必須</span></th>
                                <td>
                                    <div class="radiobtn-wrap">
                                        @foreach(config('const.contact_client_type') as $key => $value)
                                            <input type="radio" name="client_type" value="{{ $key }}" id="client_type{{ $key }}" {{ old('client_type', isset($contact['client_type']) ? $contact['client_type'] : '' ) == $key ? 'checked' : '' }}>
                                            <label for="client_type{{ $key }}">{{ $value }}</label>
                                        @endforeach
                                    </div>
                                    @error('client_type')
                                        <br/><span class="must_contact">{{ $message }}</span>
                                    @enderror
                                </td>
                            </tr>
                            <tr>
                                <th>(法人の場合)会社名<span class="req company_require">必須</span></th>
                                <td>
                                    <input type="text" name="company_name" value="{{ old('company_name', isset($contact['company_name']) ? $contact['company_name'] : '' ) }}" placeholder="">
                                    @error('company_name')
                                    <br/><span class="must_contact">{{ $message }}</span>
                                    @enderror
                                </td>
                            </tr>
                            <tr>
                                <th>(法人の場合)部署名<span class="req company_require">必須</span></th>
                                <td>
                                    <input type="text" name="department" value="{{ old('department', isset($contact['department']) ? $contact['department'] : '' ) }}" placeholder="">
                                    @error('department')
                                    <br/><span class="must_contact">{{ $message }}</span>
                                    @enderror
                                </td>
                            </tr>
                            <tr>
                                <th>業種</th>
                                <td>
                                    <input type="text" name="job" value="{{ old('job', isset($contact['job']) ? $contact['job'] : '' ) }}" placeholder="">
                                    @error('job')
                                        <br/><span class="must_contact">{{ $message }}</span>
                                    @enderror
                                </td>
                            </tr>
                            <tr>
                                <th>お名前<span class="req">必須</span></th>
                                <td>
                                    <input type="text" id="name" name="name" value="{{ old('name', isset($contact['name']) ? $contact['name'] : '' ) }}" placeholder="">
                                    @error('name')
                                    <br/><span class="must_contact">{{ $message }}</span>
                                    @enderror
                                </td>
                            </tr>
                            <tr>
                                <th>お名前(カナ)<span class="req">必須</span></th>
                                <td>
                                    <input type="text" id="name_kana" name="name_kana" value="{{ old('name_kana', isset($contact['name_kana']) ? $contact['name_kana'] : '' ) }}" placeholder="スペースなし">
                                    @error('name_kana')
                                    <br/><span class="must_contact">{{ $message }}</span>
                                    @enderror
                                </td>
                            </tr>
                            <tr>
                                <th>メールアドレス<span class="req">必須</span></th>
                                <td>
                                    <input type="text" name="email" value="{{ old('email', isset($contact['email']) ? $contact['email'] : '' ) }}" placeholder="">
                                    @error('email')
                                    <br/><span class="must_contact">{{ $message }}</span>
                                    @enderror
                                </td>
                            </tr>
                            <tr>
                                <th>確認用メールアドレス<span class="req">必須</span></th>
                                <td>
                                    <input type="text" name="email_confirmation" value="{{ old('email_confirmation', isset($contact['email_confirmation']) ? $contact['email_confirmation'] : '' ) }}" placeholder="">
                                </td>
                            </tr>
                            <tr>
                                <th>住所</th>
                                <td><!--span class="redlob">資料請求の方は必須です</span-->
                                    <div class="mb10"> 〒
                                        <input type="text" maxlength="8" id="zip_code" name="zip_code" style="ime-mode:disabled" value="{{ old('zip_code', isset($contact['zip_code']) ? $contact['zip_code'] : '' ) }}" onKeyUp="AjaxZip3.zip2addr(this, '','prefecture', 'address1');" placeholder="ハイフンなし半角" class="half"/>
                                    </div>
                                    <div class="mb10">
                                        <select name="prefecture" type="list" style="ime-mode:active">
                                            <option value="">--</option>
                                            @foreach(\App\Service\Masters\PrefectureService::getAllPrefectures() as $key=>$val)
                                                <option value="{{ $key }}" {{ old('prefecture', isset($contact['prefecture']) ? $contact['prefecture'] : '' ) == $key ? 'selected' : '' }}>{{ $val }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                    <div class="mb10">
                                        <input type="text" name="address1" style="ime-mode:active" value="{{ old('address1', isset($contact['address1']) ? $contact['address1'] : '' ) }}" placeholder="市区町村番地"/>
                                    </div>
                                    <div>
                                        <input type="text" name="address2" style="ime-mode:active" value="{{ old('address2', isset($contact['address2']) ? $contact['address2'] : '' ) }}" placeholder="建物名・部屋番号"/>
                                    </div>
                                    @error('zip_code')
                                        <br/><span class="must_contact">{{ $message }}</span>
                                    @enderror
                                </td>
                            </tr>
                            <tr>
                                <th>電話番号<span class="req">必須</span></th>
                                <td>
                                    <input type="text" id="tel" name="tel" value="{{ old('tel', isset($contact['tel']) ? $contact['tel'] : '' ) }}" placeholder="ハイフンなし">
                                    @error('tel')
                                    <br/><span class="must_contact">{{ $message }}</span>
                                    @enderror
                                </td>
                            </tr>
                            <tr>
                                <th>FAX番号</th>
                                <td>
                                    <input type="text" id="fax" name="fax" value="{{ old('fax', isset($contact['fax']) ? $contact['fax'] : '' ) }}" placeholder="ハイフンなし">
                                    @error('fax')
                                    <br/><span class="must_contact">{{ $message }}</span>
                                    @enderror
                                </td>
                            </tr>
                                @if($_fb_department == 'parts')
                                    <tr>
                                        <th>部品名（正式名称）</th>
                                        <td>
                                            <input type="text" id="parts_name" name="parts_name" value="{{ old('parts_name', isset($contact['parts_name']) ? $contact['parts_name'] : '' ) }}" placeholder="">
                                            @error('parts_name')
                                            <br/><span class="must_contact">{{ $message }}</span>
                                            @enderror
                                        </td>
                                    </tr>
                                    <tr>
                                        <th>品番</th>
                                        <td>
                                            <input type="text" id="genuine" name="genuine" value="{{ old('genuine', isset($contact['genuine']) ? $contact['genuine'] : '' ) }}" placeholder="">
                                            @error('genuine')
                                            <br/><span class="must_contact">{{ $message }}</span>
                                            @enderror
                                        </td>
                                    </tr>

                                    <tr>
                                        <th>お見積り書を希望する</th>
                                        <td>
                                            <div class="checkbtn-wrap">
                                                <input type="checkbox" name="is_want_request" id="is_want_request" value="1" {{ old('is_want_request', isset($contact['is_want_request']) ? $contact['is_want_request'] : '' ) == 1 ? 'checked' : '' }}>
                                                <label for="is_want_request" class="check_label"></label>
                                            </div>
                                        </td>
                                    </tr>
                                @endif
                            <tr>
                                <th class="last">お問い合わせ内容</th>
                                <td class="last">
                                    <textarea name="content" placeholder="">{!! old('content', isset($contact['content']) ? $contact['content'] : '' ) !!} </textarea>
                                    @error('content')
                                    <br/><span class="must_contact">{{ $message }}</span>
                                    @enderror
                                </td>
                            </tr>
                        </table>
                        <div class="submit_btn">
                            <label class="" for="">
                                <input type="submit" id="submit_button" name="" value="入力内容を確認する" class="gradation">
                            </label>
                        </div>
                        <input type="hidden" name="m" id="m" value="con"/>
                    {{ Form::close() }}
                </div>
            </div>
        </article>
    </main>
@endsection

<style>
    #addition_file_img {
        width: 100px;
        vertical-align: middle;
    }
    .company {
        display: table;
        width: auto;
    }
    .company>div {
        display: table-cell;
        padding: 5px 0px 0px 0px;
        width: auto;
        vertical-align: middle;
    }
    .company .select-wrap label {
        width:90% !important;
    }
    input[type=checkbox] {
        display: none;
        /* checkboxを非表示にする */
    }
    .check_label {
        position: relative;
        /* ボックスの位置を指定する */

        padding: 0px 10px 0 26px;
        /* ボックス内側の余白を指定する */

        line-height: 200%;
    }
    .check_label:after {
        position: absolute;
        /* ボックスの位置を指定する */

        content: "";
        /* ボックスのコンテンツ */

        display: block;
        /* ブロックレベル要素化する */

        top: 50%;
        /* 上部から配置の基準位置を決める */

        left: 0px;
        /* 左から配置の基準位置を決める */

        margin-top: -10px;
        /* チェック枠の位置 */

        width: 20px;
        /* ボックスの横幅を指定する */

        height: 15px;
        /* ボックスの高さを指定する */

        border: 2px solid #aaaaaa;
        /* ボックスの境界線を実線で指定する */

        border-radius: 3px;
        /* ボックスの角丸を指定する */
    }
    .check_label:hover:after {
        border-color: #0171bd;
        /* ボックスの境界線を実線で指定する */
    }
    .check_label:after,
    .check_label:before {
        position: absolute;
        /* ボックスの位置を指定する */

        content: "";
        /* ボックスのコンテンツ */

        display: block;
        /* ブロックレベル要素化する */

        top: 50%;
        /* 上部から配置の基準位置を決める */
    }
    .check_label:after {
        left: 0px;
        /* 左から配置の基準位置を決める */

        margin-top: -10px;
        /* チェック枠の位置 */

        width: 15px;
        /* ボックスの横幅を指定する */

        height: 15px;
        /* ボックスの高さを指定する */

        border: 2px solid #ccc;
        /* ボックスの境界線を実線で指定する */

        border-radius: 3px;
        /* ボックスの角丸を指定する */
    }
    .check_label:before {
        left: 5px;
        /* 左から配置の基準位置を決める */

        margin-top: -7px;
        /* チェックマークの位置 */

        width: 5px;
        /* ボックスの横幅を指定する */

        height: 9px;
        /* ボックスの高さを指定する */

        border-right: 3px solid #0171bd;
        /* 境界線（右）のスタイルを指定する */

        border-bottom: 3px solid #0171bd;
        /* 境界線（下）のスタイルを指定する */

        transform: rotate(45deg);
        /* 要素を回転させる */

        opacity: 0;
        /* 要素を透過指定する */
    }
    input[type=checkbox]:checked+.check_label:before {
        opacity: 1;
        /* 要素を表示する */
    }
    .file-wrap label {
        border: 1px solid #888888;
        padding: 5px;
        color: #888888;
        display: inline-block;
        border-radius: 5px;
        cursor: pointer;
        font-size: 12px;
        min-width: 76px;
    }
    .file-wrap label.minus {
        text-align: center !important;
        min-width: 50px !important;
    }
    .dropzone {
        border: none !important;
        min-height: 0 !important;
        padding: 0 !important;
    }
    .dropzone .dz-message {
        display: none !important;
    }
    .dz-drag-hover {
        background-color: #b2b2b2 !important;
    }
    .file-box {
        display: inline-flex;
    }
    .w100per {
        width: 100% !important;
    }
    .w80per {
        width: 80% !important;
    }
    .w10per {
        width: 10% !important;
    }
    .w60per {
        width: 60% !important;
    }
    .w50per {
        width: 50% !important;
    }
    .w40per {
        width: 40% !important;
    }
    .w30per {
        width: 30% !important;
    }
</style>

@section('page_js')
    <script src="{{ asset('assets/frontend/truck/js/autokana.js') }}"></script>
    <script src="https://ajaxzip3.github.io/ajaxzip3.js" charset="UTF-8"></script>

    <script>
        $(function () {
            $.fn.autoKana('#name', '#name_kana', {katakana: true});

            if($('input[name="client_type"]:checked').val() == "{{ config('const.contact_client_type_code.company') }}"){
                $(".company_require").show();
            } else {
                $(".company_require").hide();
            }
            $(document).ready(function () {
                $('input[name="client_type"]').click(function () {
                    if($('input[name="client_type"]:checked').val() == "{{ config('const.contact_client_type_code.company') }}"){
                        $(".company_require").show();
                    } else {
                        $(".company_require").hide();
                    }
                });
            });
        });
        // 不要文字列削除 [かな]
        $(document).on('blur change focus keyup keypress', '#name_kana', function (e) {
            if ($('#name_kana').val() != "") {
                var value = $('#name_kana').val();
                $('#name_kana').val(
                    value.replace(" ", "")
                        .replace("　", "")
                        .replace("-", "")
                        .replace("ー", "")
                );
            } else {
                $('#name_kana').val('');
            }
        });
        // 不要文字列削除 [電話番号]
        $(document).on('blur change focus keyup keypress', '#tel', function (e) {
            var value = $('#tel').val();
            $('#tel').val(
                value.replace(" ", "")
                    .replace("　", "")
                    .replace("-", "")
                    .replace("ー", "")
            );
        });

        $(document).on('blur change focus keyup keypress', '#zip', function (e) {
            var value = $('#zip').val();
            $('#zip').val(
                value.replace(" ", "")
                    .replace("　", "")
                    .replace("-", "")
                    .replace("ー", "")
            );
        });
    </script>
@endsection