CONTACT ARYAN CHAUHAN JI<!-- <div class="hide" style="display: none;"> -->

<!-- </div> -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<form method="post" enctype="multipart/form-data">
    <div class="main_div">
        <div class="container">
            <div class="row">
                <div class="col-12 mt-2 text-center">
                    <p class="form_head">HELLO INDO TRAVEL</p>
                </div>
                <div class="col-12 mt-2 text-center">
                    <p class="form_sub_head">ツアーお申込書</p>
                </div>
            </div>
        </div>
        <div class="container">
            <div class="row">
                <div class="col-12 mt-2 text-center">
                    <p class="submission_date">記入日: </p>
                </div>
            </div>
        </div>
        <div class="container">
            <div class="row">
                <div class="col-12 mt-2 text-center">
                    <p class="form-note">※氏名は漢字、ローマ字のどちらもご記入ください。</p>
                    <p class="form-note">※ローマ字は、パスポートと同じローマ字でご記入ください。</p>
                </div>
            </div>
        </div>
        <div class="container">
            <div class="row">
                <div class="col-12 mt-2 text-center">
                    <p class="form_head">代表者情報</p>
                </div>
            </div>
        </div>
        <div class="container-custom">
            <div class="row">
                <div class="col-2 brdr_left">
                    <label class="form-label">代表者情報</label>
                </div>
                <div class="col-10">
                    <div class="row mb-3">
                        <div class="col-md-6">
                            <input type="text" value="" name="representative_name" placeholder="山田 太郎" / required>
                        </div>
                        <div class="col-md-6">
                            <input type="text" value="tour-confirmation-form" name="representative_name_roma" placeholder="Yamada Taro" / required>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col">
                            <input type="text" value="" name="representative_nationality" placeholder="国籍" / required>

                        </div>
                        <div class="col">
                            <select class="form-select" name="representative_gender" required>
                                <option value="">性別</option>
                                <option value="男性">男性</option>
                                <option value="女性">女性</option>
                            </select>
                        </div>
                        <div class="col">
                            <input class="form-date" type="date" placeholder="生年月日" name="representative_dob" id="dob" required>

                        </div>
                        <div class="col">
                            <input type="text" value="" name="representative_passport" placeholder="パスポート番号.">
                        </div>
                        <div class="col">
                            <input type="text" value="" name="representative_passport_exp" placeholder="パスポート有効期限">
                        </div>
                    </div>
                </div>
            </div>
        </div>
                <div class="container container-text">
            <div class="row">
                <div class="col-12 text-center">
                    <!-- <span class="add_btn">ADD+</span> --><br><br>
                    <p class="form-note">【パスポート未取得や申請中の方】</p>
                    <p class="form-note">・パスポート申請前の方は、パスポート申請時に記載するローマ字氏名を間違いないようご記入ください。</p>
                    <p class="form-note_yellow">・パスポート番号は取得後にメール等でお知らせください。</p><br>
                    <img class="img_center" src="https://helloindotravel.jp/wp-content/uploads/2025/09/Frame-125973.png" />
                </div>
            </div>
        </div>
        <div class="container">
            <div class="row">
                <div class="col-12 mt-2 text-center">
                    <p class="form_head">代表者氏名</p>
                </div>
            </div>
        </div>
        <div class="container-custom custom1">
            <div class="row">
                <div class="col-2 brdr_left">
                    <label class="form-label">代表者情報</label>
                </div>
                <div class="col-10">
                    <div class="row mb-3">
                        <div class="col-md-6">
                            <input type="text" value="" name="represent_info_name_roma" placeholder="Yamada Taro" />
                        </div>
                        <div class="col-md-6">
                            <input type="text" value="" name="represent_info_email" placeholder="メールアドレス" />
                        </div>
                    </div>
                    <div class="row mb-3">
                        <div class="col-md-6">
                            <input type="text" value="" name="represent_info_mobile" placeholder="携帯番号." />
                        </div>
                        <!-- <div class="col-md-4">
                            <input type="text" value="" name="represent_info_tel" placeholder="Representative Tel." />
                        </div> -->
                        <div class="col-md-6">
                            <input type="text" value="" name="represent_info_work_addr" placeholder="勤務先名" />
                            <!-- <textarea placeholder="勤務先名" name="represent_info_work_addr"></textarea> -->

                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-6">
                            <textarea placeholder="住所" name="represent_info_address"></textarea>
                        </div>
                        <div class="col-md-6">
                            <input type="text" value="" name="represent_info_work_tel" placeholder="勤務先電話番号." />

                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="container">
            <div class="row">
                <div class="col-12 mt-2 text-center">
                    <p class="form_head">緊急連絡先</p>
                </div>
            </div>
        </div>
        <div class="container-custom custom1">
            <div class="row">
                <div class="col-2 brdr_left">
                    <label class="form-label">緊急連絡先</label>
                </div>
                <div class="col-10">
                    <div class="row mb-3">
                        <div class="col-md-6">
                            <input type="text" value="" name="emergency_data_name_roma" placeholder="Yamada Taro " />
                        </div>
                        <div class="col-md-6">
                            <input type="text" value="" name="emergency_data_email" placeholder="メールアドレス " />
                        </div>
                    </div>
                    <div class="row mb-3">
                        <div class="col-md-6">
                            <input type="text" value="" name="emergency_data_mobile" placeholder="携帯番号 " />
                        </div>
                        <!--    <div class="col-md-6">
                            <input type="text" value="" name="emergency_data_tel" placeholder="Representative Tel." />
                        </div> -->
                        <div class="col-md-6">
                            <input type="text" value="" name="emergency_data_work_tel" placeholder="勤務先電話番号" />
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-6">
                            <textarea placeholder="住所" name="emergency_data_address"></textarea>
                        </div>
                        <div class="col-md-6">
                            <textarea placeholder="勤務先名" name="emergency_data_work_addr"></textarea>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="container container-text">
            <div class="row">
                <div class="col-12 text-center">
                    <!-- <p class="form-note_yellow">＊取得しました個人情報は、法令で定める場合を除き、明示した利用目的の範囲内でのみ利用します。</p><br> -->
                    <img class="img_center" src="https://helloindotravel.jp/wp-content/uploads/2025/09/Frame-125973.png" />
                </div>
            </div>
        </div>
        <div class="container">
            <div class="row">
                <div class="col-12 mt-2 text-center">
                    <p class="form_head">ツアー詳細</p>
                </div>
            </div>
        </div>
        <div class="container container-text">
            <div class="row">
                <div class="col-12 mt-2">
                    <table class="data_table_style">
                        <thead>
                            <tr>
                                <th style="width: 12%;">ツアーコード</th>
                                <th style="width: 42%;">ツアー名</th>
                                <th style="width: 20%;">ツアー開始日・終了日</th>
                                <th style="width: 10%;">参加人数</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td></td>
                                <td></td>
                                <td>1970/01/01-1970/01/01</td>
                                <td> 名様</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        <div class="container container-text">
            <div class="row">
                <div class="col-12">
                    <p class="form-note_yellow">※本ツアーは料金変動型のため、お申込書はお早めにご記入ください。</p>
                    <hr style="background: #D7D2B2;height: 2px;">
                    <p class="white_text" style="display: flex;">代表者氏名 <input type="text" value="" name="sign_name" class="line_text" required> </p>
                    <p class="white_text" style="display: flex;"><input type="checkbox" value="" name="" required> 上記内容に相違はございません。</p>
                </div>
            </div>
            <div class="row">
                <div class="col-12">
                    <input type="file" name="passport_image" value="Upload Passport" placeholder="Upload Passport" class="Submit_btn">
                </div>
                <div class="col-12">
                    <p class="normal_text">パスポート画像をアップロードしてください。<br>パスポートが未取得や期限切れ等の方は、マイナンバーカードまたは運転免許証の画像をアップロードください。</p>
                </div>
                <div class="col-12">
                    <p class="normal_text">最大ファイルサイズ：10MB<br>画像形式：JPEG、PNG</p>
                </div>
            </div>
        </div>
        <div class="container">
            <div class="row">
                <div class="col-md-12 text-center">
                    <input type="submit" name="submit" value="お申込内容を送信" class="Submit_btn">
                </div>
            </div>
        </div>
        <div class="container container-text">
            <div class="row">
                <div class="col-12">
                    <hr style="background: #D7D2B2;height: 2px;">
                    <h3 style="text-align:center;color:#fff">Hello Indo Travel</h3>
                </div>
            </div>
            <br><br>
            <div class="row text-center">
                <div class="col-4">
                    <p class="normal_text"> 5161-Krishna Market, Pahar Ganj, New Delhi-110055</p>
                </div>
                <div class="col-4">
                    <p class="normal_text">Tel: +91 11 4058 2484 | Fax: +91 11 2358 6301</p>
                </div>
                <div class="col-4">
                    <p class="normal_text"> E-mail: info@helloindotravel.jp</p>
                </div>
            </div>
        </div>
    </div>
</form>
<script src="https://code.jquery.com/jquery-3.7.1.js" integrity="sha256-eKhayi8LEQwp4NKxN+CfCh+3qOVUtJn3QNZ0TciWLP4=" crossorigin="anonymous"></script>
<script>
    jQuery(document).ready(function($) {
        console.log(1121212)


        $('.add_btn').click(function() {
            console.log(2123123);

            // Select the first div with class .user_Data_div
            var originalDiv = $('.user_Data_div').first();

            // Clone the div
            var clonedDiv = originalDiv.clone();

            // Clear all input values inside the cloned div
            clonedDiv.find('input, textarea, select').val('');

            // Append the cloned div after the original
            originalDiv.after(clonedDiv);
        });


        function getCustomMessage($field) {
            const name = $field.attr("name");
            switch (name) {
                default:
                    return "入力してください。" // fallback to browser message
            }
        }
        $("form").each(function() {
            const $form = $(this);
            $form.attr("novalidate", true);

            // Wrap each required field for relative positioning
            $form.find("input[required], select[required], textarea[required]").each(function() {
                const $el = $(this);
                if (!$el.parent().hasClass("nowrap-tooltip")) {
                    $el.wrap("<div class='nowrap-tooltip'></div>");
                }
            });

            $form.on("submit", function(e) {
                let firstInvalid = null;
                $form.find("input[required], select[required], textarea[required]").each(function() {
                    if (!this.checkValidity()) {
                        firstInvalid = $(this);
                        return false;
                    }
                });

                if (firstInvalid) {
                    e.preventDefault();
                    const customMessage = getCustomMessage(firstInvalid);
                    showTooltip(firstInvalid, customMessage);
                    firstInvalid.focus();
                }
            });

            function showTooltip($field, message) {
                $field.addClass("invalid-field");
                $field.siblings(".custom-error-tooltip").remove();

                $("<div class='custom-error-tooltip'></div>")
                    .text(message)
                    .insertAfter($field)
                    .fadeIn(200);

                // Remove after 2s
                setTimeout(() => {
                    $field.removeClass("invalid-field");
                    $field.siblings(".custom-error-tooltip").fadeOut(200, function() {
                        $(this).remove();
                    });
                }, 6000);
            }

            // Remove tooltip on input/change
            $form.on("input change", "input, select, textarea", function() {
                $(this).removeClass("invalid-field");
                $(this).siblings(".custom-error-tooltip").remove();
            });
        });
    });
</script>


<style>
    input[type="date"] {
        position: relative;
        color: transparent;
        /* hide date text until selected */
    }

    input[type="date"]::before {
        content: attr(placeholder);
        position: absolute;
        left: 12px;
        top: 50%;
        transform: translateY(-50%);
        color: #999;
        pointer-events: none;
    }

    /* When user selects a date → hide placeholder & show date */
    input[type="date"]:valid {
        color: #000 !important;
    }

    input[type="date"]:valid::before {
        content: "" !important;
    }

    /* When focused → hide placeholder */
    input[type="date"]:focus::before {
        content: "" !important;
    }

    .line_text {
        width: 150px;
        background: none !important;
        border: none;
        border-bottom: 1px dashed #fff;
        color: #fff !important;
    }

    .container-custom {
        background-image: url('https://helloindotravel.jp/wp-content/uploads/2025/06/Header-Cell-1.png');
        padding: 2rem 4rem;
        margin: 2rem auto;
        background-repeat: no-repeat;
        background-position: center;
        background-size: 100%;
        max-width: 1152px
    }

    .container-text {
        margin: 2rem auto;
        max-width: 1152px
    }

    .custom1 {
        background-image: url('https://helloindotravel.jp/wp-content/uploads/2025/06/Cell.png');
        background-size: 100% 100%;
    }

    .custom2 {
        background-image: url('https://helloindotravel.jp/wp-content/uploads/2025/06/Cell-1.png');
    }

    .container-custom p.form-label {
        color: #8E2828;
        font-size: 24px;
        font-weight: 600;
        font-family: "Poppins", Sans-serif;
        text-align: center;
    }

    .container-custom select.form-select {
        border-radius: 8px;
        height: 50px;
    }

    p.form-note {
        color: #fff;
        font-family: "Poppins", Sans-serif;
        font-size: 18px;
        font-weight: 400;
        text-align: left;
        margin: 0;
    }

    p.form-note_yellow {
        color: #EFDF27;
        font-family: "Poppins", Sans-serif;
        font-size: 18px;
        font-weight: 400;
        text-align: left;
        margin: 0;
    }

    p.form_head {
        color: #fff;
        font-family: "Poppins", Sans-serif;
        font-size: 36px;
        font-weight: 600;
        text-align: center;
        border-bottom: 2px solid #D7D2B2;
        display: inline;
    }

    p.form_sub_head {
        color: #fff;
        font-family: "Poppins", Sans-serif;
        font-size: 20px;
        font-weight: 600;
        text-align: center;
        border-bottom: 2px solid #D7D2B2;
        display: inline;
    }

    p.submission_date {
        color: #fff;
        font-family: "Poppins", Sans-serif;
        font-size: 24;
        font-weight: 400;
        text-align: right;
        /* display: inline; */
    }

    .container-custom label.form-label {
        color: #000;
        font-size: 20px;
        font-weight: 500;
        font-family: "Montserrat", Sans-serif;
        text-align: left;
    }

    .container-custom label.form-label span.required {
        color: #FF0000;
    }

    .brdr_left {
        border-right: 3px solid #8E2828;
    }

    .col-4.brdr_left {
        display: flex;
        align-items: center;
    }

    label.small_text {
        color: #8E2828;
        font-family: "Poppins", Sans-serif;
        font-size: 16px;
        font-weight: 500;
        display: block;
    }

    .radio_div {
        display: flex;
        align-items: center;
        margin: 10px 0;
    }

    .container-custom input[type='text'],
    .container-custom input[type='date'],
    .container-custom input[type='email'] {
        border-radius: 8px;
        height: 50px;
        border: none;
        padding: 20px;
        width: 100%
    }

    .container-custom textarea {
        border-radius: 8px;
        border: none;
        padding: 20px;
        width: 100%;
        height: 100px;
    }

    .radio_div label {
        color: #000;
        font-size: 16px;
        font-weight: 500;
        font-family: "Poppins", Sans-serif;
        margin: 0px 5px;
    }

    .custom2 .Input_btn {
        background: #8E2828;
        border-radius: 8px;
        font-size: 18px;
        font-weight: 600;
        height: 50px;
        font-family: "Montserrat", Sans-serif;
        padding: 10px;
        color: #fff;
        border: none;
        display: block;
        margin: 10px 0;
    }

    .container .Submit_btn {
        background: #FA6D01;
        border-radius: 8px;
        font-size: 18px;
        font-weight: 600;
        height: 50px;
        font-family: "Montserrat", Sans-serif;
        padding: 10px 20px;
        color: #fff;
        border: none;
        margin: 10px 0;
    }

    .container .add_btn {
        background: #D7D2B2;
        border-radius: 8px;
        font-size: 18px;
        font-weight: 600;
        height: 50px;
        font-family: "Montserrat", Sans-serif;
        padding: 10px 20px;
        color: #8E2828;
        border: none;
        margin: 10px 0 20px;
    }

    .img_center {
        margin: 20px 0;
        display: inline;
    }

    .main_div {
        background: #8E2828;
        padding: 3em 0;
    }

    .phone-input {
        display: flex;
        gap: 10px;
        align-items: center;
    }

    .country-code {
        display: flex;
        align-items: center;
        padding: 10px 15px;
        border: 1px solid #ddd;
        border-radius: 10px;
        background-color: #fff;
        justify-content: center;
    }

    .country-code img {
        width: 20px;
        height: 14px;
        margin-right: 8px;
        border-radius: 2px;
    }

    .step-container {
        display: flex;
        flex-wrap: wrap;
        gap: 30px;
        justify-content: center;
        margin-top: 30px;
    }

    .step-button {
        display: flex;
        align-items: center;
        gap: 10px;
        background-color: #fff;
        border-radius: 8px;
        padding: 12px 20px;
        color: #333;
        font-weight: 500;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
        cursor: default;
    }

    .step-button .number {
        background-color: #872b28;
        color: white;
        border-radius: 50%;
        width: 24px;
        height: 24px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 14px;
        font-weight: bold;
    }

    .data_table_style {
        width: 100%;
        text-align: center;

    }

    .data_table_style thead {
        background: #FFF5DC;
        color: #8E2828;
        text-align: center;
    }

    .data_table_style tbody {
        background: #fff;
        color: #8E2828;
    }

    .data_table_style thead th,
    .data_table_style tbody td {
        padding: 15px;
        border: 2px solid #8E2828;
    }

    p.white_text {
        color: #fff;
        font-size: 18px;
        font-weight: 600;
        font-family: "Poppins", Sans-serif;
    }

    p.normal_text {
        color: #fff;
        font-size: 14px;
        font-weight: 400;
        font-family: "Poppins", Sans-serif;
    }

    @media (max-width:768px) {

        .container-custom,
        .custom1,
        .custom2 {
            background-size: cover;
            padding: 1rem;
        }

        .brdr_left {
            border: none;
        }

        .container-custom label.form-label {
            font-size: 14px;
        }

        .container-custom p.form-label {
            font-size: 18px;
        }

        p.form-note {
            font-size: 20px;
        }

        .container-custom textarea {
            width: 100%;
        }
    }
</style>
<!-- <div class="hide" style="display: none;"> -->

<!-- </div> -->