<?php error_reporting(0); ?>
<style>
    .filterByContainer {
        border-radius: 5px;
        box-shadow: 0 0 10px #ccc;
        padding: 10px 16px;
        gap: 20px;
        align-items: center;
    }

    .filterByContainer .line {
        flex: 1 1 auto;
        background: #515151;
        height: 2px;
    }

    .filterByContainer>div {
        display: flex;
        gap: 10px;
        color: #898989;
    }

    .filterByContainer>div.active {
        color: #212121;
    }

    .filterByContainer .icon-element {
        aspect-ratio: 1/1;
        border-radius: 100%;
        width: 32px;
        background: #898989;
        color: #ffffff;
        display: grid;
        place-items: center;
    }

    .filterByContainer .active .icon-element {
        background: #212121;
    }

    .filterByContainer .success-step .icon-element {
        background: #306a9e;
    }

    .filterByContainer .success-step {
        color: #306a9e !important;
    }
</style>
<!--Page main section start-->
<section id="min-wrapper" class="active">
    <div id="main-content">
        <div class="container-fluid">
            <div class="row">
                <div class="col-md-12">
                    <!--Top header start-->
                    <h3 class="ls-top-header">Booking</h3>
                    <!--Top header end -->
                    <!--Top breadcrumb start -->
                    <ol class="breadcrumb">
                        <li><a href="#"><i class="fa fa-home"></i></a></li>
                        <li class="">Hotel</li>
                        <li class="active">Book Now</li>
                    </ol>
                    <!--Top breadcrumb start -->
                </div>
            </div>
            <!-- Main Content Element  Start-->
            <div class="row">

                <div class="col-md-12">
                    <div class="filterByContainer d-flex align-items-center" id="sticky">
                        <div class="active success-step">
                            <div class="icon-element"><i class="fa fa-check"></i></div>
                            <div>
                                <div><small>First Step</small></div>
                                <div><strong>Traveller Details</strong></div>
                            </div>
                        </div>
                        <div class="line"></div>
                        <div class="active  success-step">
                            <div class="icon-element"><i class="fa fa-check"></i></div>
                            <div>
                                <div><small>Second Step</small></div>
                                <div><strong>Review</strong></div>
                            </div>
                        </div>
                        <div class="line"></div>
                        <div class="active">
                            <div class="icon-element"><i class="fa fa-credit-card"></i></div>
                            <div>
                                <div><small>Third Step</small></div>
                                <div><strong>Payments</strong></div>
                            </div>
                        </div>
                        <div class="line"></div>
                        <div class="">
                            <div class="icon-element"><i class="fa fa-check"></i></div>
                            <div>
                                <div><small>Finish</small></div>
                                <div><strong>Confirmed</strong></div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-md-12">
                    <div class="col-md-12 no-padding">
                        <div style="text-align: center; padding: 30px;">
                            <h2 class="BookingConfirm" style="text-align: center; font-size:18px; color:green;"></h2>
                            <h2 class="Pleasewaitmesg">[ Please do not refresh or press back button, We are Processing Your Booking... ]</h2>
                            <img src="<?php echo $this->baseUrl('public/assets/images/loader.gif'); ?>">
                        </div>

                    </div>
                    <div class="clear"></div>
                </div>
            </div>

            <!-- Main Content Element  End-->
        </div>
    </div>

    <form name="frm" id="frm" action="" method="post">
        <input type="thidden" name="data" id="data" value="" />
    </form>



    <script src="<?php echo $this->baseUrl('public/js/flight/flight.js'); ?>"></script>
    <?php echo $this->render("newfooter.phtml"); ?>

    <?php echo $this->render('copyrightfooter.phtml'); ?>
</section>
<!--Page main section end -->
<form name="paymentresponse" id="paymentresponse" action="" method="post">
    <input type="hidden" name="trxstatus" id="trxstatus" value="<?php echo $this->status; ?>" />
    <input type="hidden" name="strUrlData" id="strUrlData" value="<?php echo $this->strUrlData; ?>" />
    <input type="hidden" name="TrxSysId" id="TrxSysId" value="<?php echo $this->TrxSysId; ?>" />
    <input type="hidden" name="TPSysId" id="TPSysId" value="<?php echo $this->TPSysId; ?>" />
    <input type="hidden" name="guid" id="guid" value="<?php echo $this->guid; ?>" />
    <input type="hidden" name="IsOffline" id="IsOffline" value="<?php echo $this->IsOffline; ?>" />
</form>

<script type="text/javascript">
    function processBooking() {
        var paymentresponse = $("#paymentresponse").serialize();
        $.ajax({
            url: '/buyhotel/book-hotel',
            data: paymentresponse,
            dataType: 'json',
            type: 'POST',
            error: function() {

            },
            beforeSend: function() {},
            success: function(response) {
                var TrackId = response.TrackId;
                if (response.success) {
                    window.location.href = '/buyhotel/booking-confirmation-new/data/' + TrackId + '?status=true';
                } else {
                    alert(response.msg);
                    window.location.href = '/buyhotel/booking-confirmation-new/data/' + TrackId + '';
                    // var urlData = response.urlData;
                    // var formAction = response.formAction;
                    // $("#frm").attr("action", formAction);
                    // $("#data").val(urlData);
                    // setTimeout(function() {
                    //     $("#frm").submit();
                    // }, 3000);
                }

            }

        });

    }
    processBooking();
</script>