let html = '';
html+=`<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" crossorigin="anonymous">`;
html+=`<style>
    .before-booking .input_cheack {
        height: 25px;
        position: relative;
        width: 25%;
        float: left;
    }
    .before-booking .card-option {
        background: #fdfdfd;
        border: solid 2px #d0cbbf;
        cursor: pointer;
        margin-bottom: 15px;
    }
    .before-booking .card-option input {
        position: absolute;
        opacity: 0;
        cursor: pointer;
    }
    .before-booking .card-option input:checked ~ .checkmark {
        background-color: #ffffff;
    }
    .before-booking .card-option input:checked ~ .checkmark:after {
        display: block;
    }
    .before-booking .checkmark {
        top: 0;
        margin: auto;
        display: block;
        height: 26px;
        width: 26px;
        background-color: #fff;
        border-radius: 50%;
        border: solid 2px #c12620;
    }
    .before-booking .card-option .checkmark:after {
        top: 9px;
        left: 9px;
        width: 12px;
        height: 13px;
        border-radius: 50%;
        background: #c12620;
    }
    .before-booking label.form-check-label {
        width: 100%;
        text-align: left;
        padding: 20px 10px;
        font-weight: 600;
    }
    .before-booking .card-option {
        background: #fdfdfd;
        border: solid 2px #d0cbbf;
        cursor: pointer;
        margin-bottom: 15px;
    }
    .main-book-fom .fs-title {
        font-size: 20px;
        color: #9c0000;
        margin-bottom: 15px;
    }
    .main-book-fom .card {
        z-index: 0;
        border: none;
        position: relative;
    }
    .section-button .btn {
        background-color: brown;
        color: #fff;
        font-weight: 600;
        font-size: 12px;
        letter-spacing: 1px;
        height: 50px;
        display: inline-flex;
        justify-content: center;
        align-items: center;
        min-width: 315px;
        padding-left: 20px;
        padding-right: 20px;
        text-transform: uppercase;
    }
    .before-booking .card-option input:checked ~ .checkmark:after {
        display: block;
    }
    .before-booking .checkmark:after {
        content: "";
        display: none;
        margin-left: 5px;
        margin-top: 5px;
    }
</style>`;
html+=`<div class="row justify-content-center">
    <div class="col-md-11 col-sm-12 mx-auto main-book-fom">
        <div class="card mt-3 mb-3 p-3 p-md-4">
            <h3 class="fs-title fw600 text-center">Select Your Train</h3>
            <form class="before-booking" onSubmit="return redirect_to_web()" data-gtm-form-interact-id="0">
                <div class="row gx-2">
                    <div class="col-lg-3 col-md-6 col-sm-6 col-6 pb-2 pb-lg-0">
                        <div class="card-option h-100">
                            <label class="form-check-label">
                                <div style="text-align: center;"> <img src="https://travelogyoffice.com/public/assets/images/pow-logo.png" class="img-fluid" data-loaded="true"> </div>
                                <div class="input_cheack">
                                    <input class="checkbox" type="radio" id="payment" name="train_id" value="1" required="" data-gtm-form-interact-field-id="0">
                                    <span class="checkmark"></span>
                                </div>
                                Palace On Wheels
                            </label>
                        </div>
                    </div>
                    <div class="col-lg-3 col-md-6 col-sm-6 col-6 pb-2 pb-lg-0">
                        <div class="card-option h-100">
                            <label class="form-check-label">
                                <div style="text-align: center;"> <img src="https://travelogyoffice.com/public/assets/images/me-logo.png" class="img-fluid" data-loaded="true"> </div>
                                <div class="input_cheack">
                                    <input class="checkbox" type="radio" id="payment" name="train_id" value="2" required="">
                                    <span class="checkmark"></span>
                                </div>
                                Maharajas Express
                            </label>
                        </div>
                    </div>
                    <div class="col-lg-3 col-md-6 col-sm-6 col-6 pb-2 pb-lg-0">
                        <div class="card-option h-100">
                            <label class="form-check-label">
                                <div style="text-align: center;"> <img src="https://travelogyoffice.com/public/assets/images/gc-logo.png" class="img-fluid" data-loaded="true"> </div>
                                <div class="input_cheack">
                                    <input class="checkbox" type="radio" id="payment" name="train_id" value="3" required="">
                                    <span class="checkmark"></span>
                                </div>
                                Golden Chariot
                            </label>
                        </div>
                    </div>
                    <div class="col-lg-3 col-md-6 col-sm-6 col-6 pb-2 pb-lg-0">
                        <div class="card-option h-100">
                            <label class="form-check-label">
                                <div style="text-align: center;"> <img src="https://travelogyoffice.com/public/assets/images/dc-logo.png" class="img-fluid" style="width: 70px;" data-loaded="true"> </div>
                                <div class="input_cheack">
                                    <input class="checkbox" type="radio" id="payment" name="train_id" value="4" required="">
                                    <span class="checkmark"></span>
                                </div>
                                Deccan Odyssey
                            </label>
                        </div>
                    </div>
                    <div class="section-button py-4 text-center">
                        <input type="submit" class="next action-button btn btn-prime btn-lg text-uppercase" value="Next">
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>`;
html+=`<script>
    function redirect_to_web() {
        let train_id = document.querySelector('input[name="train_id"]:checked').value;
        if (train_id == 1) {
                        window.location = 'https://www.travelogyindia.com/luxury-train/palace-on-wheels/booking.html';
                    } else if (train_id == 2) {
                        window.location = 'https://www.travelogyindia.com/luxury-train/maharajas-express/booking.html';
                    } else if (train_id == 3) {
                        window.location = 'https://www.travelogyindia.com/luxury-train/the-golden-chariot/booking.html';
                    } else if (train_id == 4) {
                        window.location = 'https://www.travelogyindia.com/luxury-train/deccan-odyssey/booking.html';
                    }
        return false;
    }
</script>`;
document.write(html);