<?php
$GetWhatsappUrl = Zend_Controller_Action_HelperBroker::getStaticHelper('GetWhatsappUrl')->GetWhatsappUrl();
$baseUrl = $this->baseUrl;
$mydevice = Zend_Controller_Action_HelperBroker::getStaticHelper('General')->getDevice();
//$secureCode = Zend_Controller_Action_HelperBroker::getStaticHelper('SecureCode')->secureCode(trim($this->searchParams['TPSysId']), 1);
?>


<style>
    .progress {
        display: block;
        text-align: center;
        width: 0;
        height: 3px;
        background: red;
        transition: width .3s;
    }

    .comision_checkbox {
        height: 20px;
        padding-left: 30px;
        position: relative;
        cursor: pointer;
        user-select: none;
        color: #2C3E50;
        float: none;
        font-size: 9px;
        margin: 0;
    }

    .comision_checkbox input {
        display: none;
    }

    .comision_checkbox .checkmark {
        display: inline-block;
        background: white;
        position: absolute;
        left: 0;
        border-radius: 0px;
    }

    .SelectHotelsShare input {
        position: absolute;
        z-index: 2;
        opacity: 0;
        top: 0;
        bottom: 0;
        left: 50%;
        transform: translate(-50%, 0);
        height: 25px;
        width: 25px;
        margin: 0;
        cursor: pointer;
    }

    .selectarrow2 {
        top: 0px !important;
        width: 25px !important;
        height: 25px !important;
        border: 0px solid #7f8c8d !important;
        background-color: transparent !important;
        display: inline-block;
    }

    .selectarrow2:after {
        content: "";
        width: 25px !important;
        height: 25px !important;
        background: url(<?php echo $this->baseUrl('public/assets/images/flightshare.svg'); ?>) no-repeat right;
        top: 0;
    }

    .SelectHotelsShare input:checked+.selectarrow2:after {
        background: url(<?php echo $this->baseUrl('public/assets/images/flightshare1_after.svg'); ?>) no-repeat right;
    }

    .comision_checkbox input:checked+.checkmark:after {
        content: "";
        position: absolute;
        top: 45%;
        left: 50%;
    }

    .selectarrow2:after {
        content: "";
        width: 25px !important;
        height: 25px !important;
        right: 0px;
        display: inline-block;
        border-left: 0px solid white !important;
        border-bottom: 0px solid white !important;
    }

    .stick {
        margin-top: 0 !important;
        position: fixed;
        top: 0;
        z-index: 99;
        width: 91%;
        border-radius: 0 0 0.5em 0.5em;
    }

    .cart-btn {
        margin-bottom: 0.5rem;
        padding: 0.9rem;
    }

    .borderbottom {
        border-bottom: 2px solid #FFFFFF !important;
    }

    @keyframes placeHolderShimmer {
        0% {
            background-position: -468px 0
        }

        100% {
            background-position: 468px 0
        }
    }

    .HotelImageLogo {
        animation-duration: 1s;
        animation-fill-mode: forwards;
        animation-iteration-count: infinite;
        animation-name: placeHolderShimmer;
        animation-timing-function: linear;
        background: #f6f7f8;
        background: linear-gradient(to right, #eeeeee 8%, #dddddd 18%, #eeeeee 33%);
        background-size: 1000px 104px;
        height: 94px;
        position: relative;
        overflow: hidden;
        width: 100%;
        margin: auto;
        display: block;
    }

    .hotelName {
        animation-duration: 1s;
        animation-fill-mode: forwards;
        animation-iteration-count: infinite;
        animation-name: placeHolderShimmer;
        animation-timing-function: linear;
        background: #f6f7f8;
        background: linear-gradient(to right, #eeeeee 8%, #dddddd 18%, #eeeeee 33%);
        background-size: 1000px 104px;
        height: 15px;
        position: relative;
        overflow: hidden;
        width: 70%;
        display: block;
    }

    .hotelPrice {
        animation-duration: 1s;
        animation-fill-mode: forwards;
        animation-iteration-count: infinite;
        animation-name: placeHolderShimmer;
        animation-timing-function: linear;
        background: #f6f7f8;
        background: linear-gradient(to right, #eeeeee 8%, #dddddd 18%, #eeeeee 33%);
        background-size: 1000px 104px;
        height: 15px;
        position: relative;
        overflow: hidden;
        width: 90%;
        display: block;
        margin: auto;
    }

    .hotelbook {
        animation-duration: 1s;
        animation-fill-mode: forwards;
        animation-iteration-count: infinite;
        animation-name: placeHolderShimmer;
        animation-timing-function: linear;
        background: #f6f7f8;
        background: linear-gradient(to right, #eeeeee 8%, #dddddd 18%, #eeeeee 33%);
        background-size: 1000px 104px;
        height: 50px;
        position: relative;
        overflow: hidden;
        width: 90%;
        display: block;
        margin: auto;
    }

    .hotelAddress {
        animation-duration: 1s;
        animation-fill-mode: forwards;
        animation-iteration-count: infinite;
        animation-name: placeHolderShimmer;
        animation-timing-function: linear;
        background: #f6f7f8;
        background: linear-gradient(to right, #eeeeee 8%, #dddddd 18%, #eeeeee 33%);
        background-size: 1000px 104px;
        height: 11px;
        position: relative;
        overflow: hidden;
        width: 100%;
        margin: auto;
        display: block;
    }

    .hotelstar {
        animation-duration: 1s;
        animation-fill-mode: forwards;
        animation-iteration-count: infinite;
        animation-name: placeHolderShimmer;
        animation-timing-function: linear;
        background: #f6f7f8;
        background: linear-gradient(to right, #eeeeee 8%, #dddddd 18%, #eeeeee 33%);
        background-size: 1000px 104px;
        height: 10px;
        position: relative;
        overflow: hidden;
        width: 40%;
        display: block;
    }

    .free-cancellation span {
        color: #04a74c !important;
    }
</style>

<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;
    }

    .hotel-details-block,
    .fare-summay-block {
        border-radius: 5px;
        box-shadow: 0 0 10px #ccc;
        padding: 10px 16px;
        background: #ffffff;
    }

    .hotel-details-block .hotel-name {
        font-size: 1rem;
        font-weight: 600;
        margin-bottom: 5px;
    }

    .hotel-details-block .star-rating {
        margin-bottom: 5px;
    }

    .hotel-details-block .address {
        margin-bottom: 10px;
    }

    .hotel-details-block .cancellation-date {
        margin-bottom: 10px;
        font-weight: 600;
    }

    .hotel-details-block .more-detail-container {
        border: 1px dashed #8a8a8a;
        margin-bottom: 25px;
    }

    .hotel-details-block .more-detail-container .more-details {
        padding: 10px 15px;
        flex: 1 1 auto;
        background: #f1f9ff;
        font-weight: 600;
        display: grid;
        gap: 3px;
    }

    .hotel-details-block .more-detail-container .more-details:not(:last-child) {
        border-right: 1px dashed #8a8a8a;
    }

    .hotel-details-block .form-block .inner-block:not(:last-child) {
        border-bottom: 1px dashed #8a8a8a;
        margin-bottom: 20px;
    }

    .hotel-details-block .form-block .head-element {
        font-size: 1.2rem;
        font-weight: 500;
        margin-bottom: 6px;
    }

    .hotel-details-block .form-block .sub-head {
        color: #fb714a;
        font-size: 0.8rem;
        margin-bottom: 2px;
    }

    .hotel-details-block .form-block .form-group {
        min-height: 34px !important;
    }

    .fare-summay-block .head-element {
        text-transform: uppercase;
        font-weight: 600;
        font-size: 0.8rem;
        margin-bottom: 30px;
    }

    .fare-summay-block .summary-grid {
        display: grid;
        gap: 20px;
    }

    .fare-summay-block .summary-grid .summary-block:not(:last-child) {
        border-bottom: 1px solid #808080;
        padding-bottom: 10px;
    }

    .fare-summay-block .summary-grid .summary-block {
        display: grid;
        gap: 5px;
    }

    .fare-summay-block .summary-grid .summary-block>div {
        display: flex;
        justify-content: space-between;
        gap: 10px;
        align-items: center;
    }

    .fare-summay-block .summary-grid .summary-block .fare-desc {
        color: #808080;
        font-size: 0.7rem;
    }

    @keyframes placeHolderShimmer {
        0% {
            background-position: -800px 0
        }

        100% {
            background-position: 800px 0
        }
    }

    .animated-background {
        animation-duration: 2s;
        animation-fill-mode: forwards;
        animation-iteration-count: infinite;
        animation-name: placeHolderShimmer;
        animation-timing-function: linear;
        background-color: #f6f7f8;
        background: linear-gradient(to right, #eeeeee 8%, #bbbbbb 18%, #eeeeee 33%);
        background-size: 800px 104px;
        height: 70px;
        position: relative;
    }

    .animated-background-pax {
        animation-duration: 2s;
        animation-fill-mode: forwards;
        animation-iteration-count: infinite;
        animation-name: placeHolderShimmer;
        animation-timing-function: linear;
        background-color: #f6f7f8;
        background: linear-gradient(to right, #eeeeee 8%, #bbbbbb 18%, #eeeeee 33%);
        background-size: 800px 104px;
        height: 50px;
        position: relative;
    }

    .animated-background-name {
        animation-duration: 2s;
        animation-fill-mode: forwards;
        animation-iteration-count: infinite;
        animation-name: placeHolderShimmer;
        animation-timing-function: linear;
        background-color: #f6f7f8;
        background: linear-gradient(to right, #eeeeee 8%, #bbbbbb 18%, #eeeeee 33%);
        background-size: 800px 104px;
        height: 20px;
        position: relative;
        width: 50%;
    }

    .animated-background-guest {
        animation-duration: 2s;
        animation-fill-mode: forwards;
        animation-iteration-count: infinite;
        animation-name: placeHolderShimmer;
        animation-timing-function: linear;
        background-color: #f6f7f8;
        background: linear-gradient(to right, #eeeeee 8%, #bbbbbb 18%, #eeeeee 33%);
        background-size: 800px 104px;
        height: 50px;
        position: relative;
        width: 90%;
    }

    .animated-background-rooms {
        animation-duration: 2s;
        animation-fill-mode: forwards;
        animation-iteration-count: infinite;
        animation-name: placeHolderShimmer;
        animation-timing-function: linear;
        background-color: #f6f7f8;
        background: linear-gradient(to right, #eeeeee 8%, #bbbbbb 18%, #eeeeee 33%);
        background-size: 800px 104px;
        height: 30px;
        position: relative;
        width: 100%;
    }

    .animated-background-star {
        animation-duration: 2s;
        animation-fill-mode: forwards;
        animation-iteration-count: infinite;
        animation-name: placeHolderShimmer;
        animation-timing-function: linear;
        background-color: #f6f7f8;
        background: linear-gradient(to right, #eeeeee 8%, #bbbbbb 18%, #eeeeee 33%);
        background-size: 800px 104px;
        height: 20px;
        position: relative;
        width: 30%;
    }

    .main-item {
        padding: 2px;
    }
</style>


<?php
echo $this->partial(
    'hotel-proposal/proposal-header.phtml',
    array(
        'arrAgencyDetails' => $this->arrAgencyDetails,
        'SourceAirport' => $this->SourceAirport,
        'DestinationAirport' => $this->DestinationAirport
    )
);
?>

<div class="container-fluid" ng-controller="HotelReviewController">

    <!-- Main Content Element  Start-->
    <div class="row" id="ngHotelList">



        <input type="hidden" id="searchID" value="<?= $this->searchID ?>">
        <input type="hidden" id="IsProposal" value="1">
        <input type="hidden" id="ActionName" value="review">
        <input type="hidden" id="AgencySysId" value='<?= ($this->AgencySysId) ?>'>
        <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">
                    <div class="icon-element"><i class="fa fa-file-text-o"></i></div>
                    <div>
                        <div><small>Second Step</small></div>
                        <div><strong>Review</strong></div>
                    </div>
                </div>
                <div class="line"></div>
                <div>
                    <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-lg-8" ng-if="loadingHotel">
            <div class="hotel-details-block">
                <div class="hotel-name">
                    <div class="animated-background-name"></div>
                </div>
                <div class="star-rating">
                    <div class="animated-background-star"></div>
                </div>
                <div class="address">
                    <div class="animated-background-star"></div>
                </div>
                <div class="cancellation-date text-primary">
                    <div class="animated-background-name"></div>
                </div>
                <div class="d-flex more-detail-container">
                    <div class="animated-background-rooms"></div>
                </div>

                <div class="form-block">
                    <div class="inner-block">
                        <div class="head-element">Guest Details</div>
                        <div class="sub-head">
                            <div class="animated-background-guest"></div>
                        </div>
                        <div class="sub-head">
                            <div class="animated-background-guest"></div>
                        </div>
                    </div>

                    <div class="inner-block">
                        <div class="head-element">Contact Details</div>
                        <div class="row">
                            <div class="col-lg-8">
                                <div class="animated-background-guest"></div>
                            </div>
                        </div>
                        <hr>
                        <div class="row">
                            <div class="col-lg-8">
                                <div class="animated-background-guest"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>


        <div class="col-lg-8" style="display: none;" id="HotelDetails">
            <div class="hotel-details-block">
                <div class="hotel-name">{{HotelData.hotelName}}</div>
                <div class="star-rating">
                    <i class="fa fa-star " ng-class="{'text-warning': HotelData.Stars >= 1}"></i>
                    <i class="fa fa-star " ng-class="{'text-warning': HotelData.Stars >= 2}"></i>
                    <i class="fa fa-star " ng-class="{'text-warning': HotelData.Stars >= 3}"></i>
                    <i class="fa fa-star " ng-class="{'text-warning': HotelData.Stars >= 4}"></i>
                    <i class="fa fa-star " ng-class="{'text-warning': HotelData.Stars >= 5}"></i>
                </div>
                <div class="address">
                    <div><small class="text-muted">{{HotelData.hotelAddress}}</small></div>
                    <div><small class="text-muted">{{HotelData.hotelCityTitle}} ,{{HotelData.Country}} Postal Code: {{HotelData.PinCode}}</small></div>
                    <div><small class="text-muted">Phone No: {{HotelData.hotelPrimaryContact}}</small></div>
                </div>
                <div class="cancellation-date text-primary">Last Cancellation Date :{{RoomInfo[0].LastCancellationDate | date : "dd MMM yyyy HH:mm"}}</div>
                <div class="d-flex more-detail-container">
                    <div class="more-details">
                        <div class="text-primary"><small>Check In</small></div>
                        <div>{{HotelData.CheckInDate | date : "dd/MM/yyyy"}}</div>
                    </div>
                    <div class="more-details">
                        <div class="text-primary"><small>Check Out</small></div>
                        <div>{{HotelData.CheckOutDate | date : "dd/MM/yyyy"}}</div>
                    </div>
                    <div class="more-details">
                        <div class="text-primary"><small>Total Rooms</small></div>
                        <div>{{RoomInfo.length}}</div>
                    </div>
                    <div class="more-details">
                        <div class="text-primary"><small>Total Stay</small></div>
                        <div>{{HotelData.TotalNights}} Nights(s)</div>
                    </div>
                </div>
                <div class="form-block">
                    <div class="inner-block" ng-repeat="(key, item) in RoomInfo">
                        <div class="head-element" ng-if="key == 0">Guest Details</div>
                        <div class="sub-head">For {{item.RoomTypeName}} ({{item.MealPlanType}})</div>
                        <div class="row">
                            <div class="col-lg-6" ng-repeat="(keys, items) in item.customer">
                                <div class="form-group">
                                    <label for="title-{{key}}-{{keys}}">{{items.Salutation}}. {{items.FirstName}} {{items.LastName}} ({{items.paxtypeName}})</label>

                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="inner-block">
                        <div class="head-element">Contact Details</div>
                        <div class="row">
                            <div class="col-lg-6">
                                <label>Email : {{CustomerDetails.EmailId}}</label>
                            </div>
                            <div class="col-lg-6">
                                <label>Mobile : +{{CustomerDetails.countrycode}}{{CustomerDetails.Contacts}}</label>
                            </div>
                        </div>
                    </div>
                    <div class="inner-block">
                        <div class="head-element">Cancellation Policy</div>
                        <table class="table tablestyle ">
                            <tr class="alert alert-graylight">
                                <th>Cancellation on or After</th>
                                <th>Cancellation on or Before</th>
                                <th>Cancellation Charges/Comments</th>
                            </tr>

                            <tr ng-if="cancellation.length > 0" ng-repeat="(keycancel, cancel) in cancellation">
                                <td>{{cancel.fromdate | date : "dd MMM yyyy HH:mm"}}</td>
                                <td>{{cancel.todate | date : "dd MMM yyyy HH:mm"}}</td>
                                <td>{{cancel.Currency}} {{cancel.amount + cancel.servicefee}}</td>
                            </tr>

                            <tr>
                                <td colspan="3">
                                    No Show will attract full cancellation charge unless otherwise specified.
                                </td>
                            </tr>
                            <tr>
                                <td colspan="3">
                                    Early check out will attract full cancellation charge unless otherwise specified.
                                </td>
                            </tr>
                        </table>
                    </div>
                    <div class="inner-block">
                        <div class="head-element">Booking Notes</div>
                        <table class="table tablestyle ">
                            <tr ng-if="instruction.length > 0" ng-repeat="(key, value) in instruction">
                                <td><strong>{{value.types}}</strong> <br> {{value.description}}</td>
                            </tr>
                        </table>
                    </div>
                </div>

                <div class="form-block">

                    <div class="row">
                        <div class="col-lg-12 col-sm-12 col-md-12 col-xs-12">

                            <div class="panel panel-primary">
                                <div class="panel-heading">
                                    <h3 class="panel-title">Terms &amp; Condition</h3>
                                </div>
                                <div class="panel-body mt_topbtm0">
                                    <label class="checkbox_popup">
                                        <input type="checkbox" id="agreeTerms" value="option1">
                                        I have reviewed and agreed on the rates and commission offered for this booking.
                                        <span class="checkmark"></span>
                                    </label>
                                </div>
                            </div>
                            <div class="clearfix"></div>
                        </div>

                        <div class="col-lg-12 col-sm-12 col-md-12 col-xs-12">
                            <div class="panel panel-primary">
                                <div class="panel-heading">
                                    <h3 class="panel-title">Payment Mode</h3>
                                </div>
                                <div class="panel-body mt_topbtm0">
                                    <div class="form-group form-group1 mobileflight_txtcenter2 mobile-hide" style="margin-bottom: 45px;">

                                        <span style="float: left;">
                                            <!-- <input type="radio" name="paymentModebyUser" id="radioRedCheckbox4_2" value="1" <?= ($this->IsB2BCustomer == '0' && $this->IsEnabledWallet == 0) ? 'disabled' : ' checked' ?>>
                                            <label for="radioRedCheckbox4_2" class="packageshow">
                                                <strong> Credit Balance: </strong> <?= $this->CurrencyTitle ?>
                                                <?= $this->walletBalanceAmount ?>
                                            </label> -->

                                            <input type="radio" name="paymentModebyUser" id="radioRedCheckbox4_22" checked value="2">
                                            <label for="radioRedCheckbox4_22" class="packageshow">
                                                <strong> Pay Online </strong>
                                            </label>
                                        </span>

                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
                <div style=padding-top:10px;>
                    <button type="button" class="btn btn-primary continue_btnddonsreview reviewbtn paynowbtn22" onclick="return payNow();" id="proceed">Pay Now</button>
                    <!-- <button type="button" class="btn btn-primary" ng-click="PayNow()" id="proceed">Issue Voucher</button> -->
                </div>
            </div>
        </div>
        <div class="col-lg-4">
            <?php
            echo $this->partial('buyhotel/sale-summary.phtml', array());
            ?>
        </div>
    </div>


    <form id="paynow" method="post" name="paynow" action="<?php echo $this->strPayWithPaymentGatewayUrl; ?>">
        <input name="guid" value="<?php echo $this->guid; ?>" type="hidden">
        <input name="securecode" value="<?php echo $this->walletCode; ?>" type="hidden">
        <input name="Firstname" value="<?php echo isset($this->HotelData['FirstName']) ? trim($this->HotelData['FirstName']) : ''; ?>" type="hidden">
        <input name="email" value="<?php echo isset($this->HotelData['EmailId']) ? trim($this->HotelData['EmailId']) : ''; ?>" type="hidden">
        <input name="phone" value="<?php echo isset($this->HotelData['Contacts']) ? trim($this->HotelData['Contacts']) : ''; ?>" type="hidden">
        <input id="premium_val" name="amount" value="<?php echo $this->intPublishFare; ?>" type="hidden">
        <input name="AgencyUserSysId" value="<?php echo $this->intLoggedinUserAgencySysId; ?>" type="hidden">
        <input name="AgencySysId" value="<?php echo $this->intLoggedinAgencySysId; ?>" type="hidden">
        <input name="TrxType" value="<?php echo $this->strTrxType; ?>" type="hidden">
        <input name="PlanType" value="<?php echo $this->intPlanType; ?>" type="hidden">
        <input name="TPSysId" value="<?php echo $this->TPSysId; ?>" type="hidden">
        <input name="IsCardChrgToCustomer" value="<?php echo $this->IsCardChrgToCustomer; ?>" type="hidden">
        <input name="CustomerSysId" value="<?php echo isset($this->HotelData['CustomerSysId']) ? trim($this->HotelData['CustomerSysId']) : ''; ?>" type="hidden">
        <input name="returnURL" value="<?php echo $this->strReturnURL; ?>" type="hidden">
        <input type="hidden" name="stringData" value='<?php echo $this->stringData; ?>'>
        <input name="errorURL" value="<?php echo $this->strErrorURL; ?>" type="hidden">
        <input name="IsProposalPayment" value="1" type="hidden">
        <input name="razorCurrency" value="<?php echo trim($this->Symbol); ?>" type="hidden">
    </form>


    <div class="modal fade" id="OTPVerifying" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-keyboard="false" data-backdrop="static">
        <div class="modal-dialog modal-sm" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title" style="color:red; font-size: 18px;">OTP Verify</h4>
                </div>
                <div class="modal-body">
                    <div class="view_deatils_wrapper">
                        <div class="row" style="text-align: center;">

                            <div class="col-md-12">
                                <p style="line-height: 25px;margin: 5px 0;">We have sent otp to <span id="PhoneNumberDigit"></span></p>
                                <div class="form-group">
                                    <input type="number" max="6" id="OTPNumber" name="OTPNumber" placeholder="Enter OTP" value="" class="form-control">
                                </div>
                            </div>
                            <div class="col-md-12">
                                <a href="javascript:void(0)" class="btn btn-danger btn-sm btn-small-1 ContinueAccept" onclick="return verifying();">Continue Booking</a>
                                <a href="javascript:void(0)" class="resend" onclick="return payNow();">Resend</a>
                            </div>

                        </div>
                    </div>
                </div> <!-- modal-body -->
            </div> <!-- modal-content -->
        </div> <!-- modal-dialog -->
    </div>

    <!-- Loding Ajax Process Modals & Ajax Process Bar  -->
    <div class="col-md-12" id="progress-bar" style="display:none;">
        <div class="progress progress-striped active" style="height:20px; border-radius:10px;">
            <!-- aria-valuetransitiongoal="95" aria-valuenow="95" -->
            <div id="progress-bar" class="progress-bar progress-bar-warning six-sec-ease-in-out" style="width: 100%;">
                <span id="percent_complete"> </span>
            </div>
        </div>
    </div>

</div>

<script src="https://checkout.razorpay.com/v1/checkout.js"></script>

<?php if ($this->getPaymentCompanyName == 8) { ?>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
    <script src="https://checkout.stripe.com/checkout.js"></script>
<?php } else if ($this->getPaymentCompanyName == 2) { ?>
    <form name='razorpayform' action="<?php echo $this->baseUrl("payment/razor-pay/success/"); ?>" method="POST">
        <input type="hidden" name="razorpay_order_id" id="razorpay_order_id">
        <input type="hidden" name="razorpay_payment_id" id="razorpay_payment_id">
        <input type="hidden" name="razorpay_signature" id="razorpay_signature">
    </form>
<?php } ?>
<script>
    var SITEURL = "<?php echo $baseUrl; ?>/";
</script>
<!--Layout Script start -->


<!--Advance Radio and checkbox demo start-->
<link rel="stylesheet" href="<?php echo $this->baseUrl('public/assets/css/plugins/jquery.toolbars.css'); ?>">
<script src="<?php echo $this->baseUrl('public/js/buyhotel/buyhotel.js'); ?>" type="text/javascript"></script>
<script src="<?php echo $this->baseUrl('public/assets/js/jquery.toolbar.min.js'); ?>"></script>
<script src="<?php echo $this->baseUrl('public/assets/js/bootstrap3-typeahead.js'); ?>"></script>
<script type="text/javascript" src="<?php echo $this->baseUrl('public/assets/js/jquery.validate.min.js'); ?>"></script>

<script>
    function payNow() {
        var checked = $("#agreeTerms").is(":checked");
        if (!checked) {
            alert('Please check the terms & conditions.');
            return false;
        }
        var confrm = confirm("Are you sure ? You want to pay the amount <?php echo trim($this->Symbol); ?> <?php echo number_format($this->intPublishFare, 2); ?> .");
        if (confrm) {
            $.ajax({
                url: '/hotel-proposal/verifyingbooking',
                type: 'post',
                data: {
                    data: "<?= $this->searchID ?>",
                    code: "<?= $this->secureCode ?>",
                    AgencySysId: "<?php echo $this->intLoggedinUserAgencySysId; ?>"
                },
                dataType: 'json',
                beforeSend: function() {
                    $('.paynowbtn22').html('Please wait..');
                    $('.paynowbtn22').attr("disabled", true);
                },
                success: function(response) {
                    if (response.success) {
                        if (response.checkOTP) {
                            $("#OTPVerifying").modal();
                            $("#PhoneNumberDigit").html(response.PhoneNumberDigit);
                            return false;
                        }
                        $('.paynowbtn22').html('Pay Now');
                        $('.paynowbtn22').attr("disabled", false);
                    } else {
                        alert(response.msg);
                        $('.paynowbtn22').html('Pay Now');
                        $('.paynowbtn22').attr("disabled", false);
                        return false;
                    }
                }
            });
        }
    }

    function verifying() {
        $.ajax({
            url: '<?php echo $this->baseUrl('hotel-proposal/verifyingbooking'); ?>',
            type: 'post',
            data: {
                data: "<?= $this->searchID ?>",
                code: "<?= $this->secureCode ?>",
                AgencySysId: "<?php echo $this->intLoggedinUserAgencySysId; ?>",
                verifying: true,
                OTPNumber: $('#OTPNumber').val(),
            },
            dataType: 'json',
            beforeSend: function() {
                $('.paynowbtn22').html('Please wait..');
                $('.paynowbtn22').attr("disabled", true);
            },
            success: function(response) {
                if (response.success) {
                    <?php if ($this->getPaymentCompanyName == 2) { ?>
                        $.ajax({
                            url: '/payment/razor-pay',
                            type: 'post',
                            data: $("form#paynow").serialize(),
                            dataType: 'json',
                            success: function(response) {
                                if (response.razor) {
                                    var options = response.razorData;
                                    options.handler = function(response) {
                                        document.getElementById('razorpay_payment_id').value = response.razorpay_payment_id;
                                        document.getElementById('razorpay_signature').value = response.razorpay_signature;
                                        document.getElementById('razorpay_order_id').value = response.razorpay_order_id;
                                        document.razorpayform.submit();
                                    };
                                    options.theme.image_padding = false;
                                    var rzp = new Razorpay(response.razorData);
                                    rzp.open();
                                    e.preventDefault();
                                }
                            }
                        });
                    <?php } else if ($this->getPaymentCompanyName == 8) { ?>
                        payStrip();
                    <?php } else { ?>

                        $.ajax({
                            url: '/hotel-proposal/validate-payment/',
                            type: 'POST',
                            data: {
                                intPublishFare: "<?= $this->intPublishFare ?>",
                                AgencySysId: "<?php echo $this->AgencySysId; ?>"
                            },
                            dataType: 'json',
                            beforeSend: function() {
                                $('.saveaction').html('Please wait..');
                                $('.saveaction').attr("disabled", true);
                            },
                            success: function(result) {
                                if (result.success) {
                                    $("#paynow").submit();
                                    $('.saveaction').html('Pay from Net Banking');
                                    $('.saveaction').removeAttr("disabled");
                                    //$('a[pages="hotelcontact"]').trigger('click');
                                } else {
                                    $('.saveaction').html('Pay from Net Banking');
                                    $('.saveaction').removeAttr("disabled");
                                    alert(result.message);
                                }
                            },
                            error: function() {
                                $('.saveaction').html('Pay from Net Banking');
                                $('.saveaction').removeAttr("disabled");
                                alert('Oops payment error try again');
                            }

                        });
                    <?php } ?>
                    $('.paynowbtn22').html('Pay Now');
                    $('.paynowbtn22').attr("disabled", false);
                } else {
                    alert(response.msg);
                    $('.paynowbtn22').html('Pay Now');
                    $('.paynowbtn22').attr("disabled", false);
                    return false;
                }
            }
        });
    }

    function payStrip() {
        var data = $("form#paynow").serialize();
        var amount = $('#premium_val').val();
        $('#Inprocess').hide();
        var handler = StripeCheckout.configure({
            key: '<?php echo isset($this->PaymentMerchantId) ? $this->PaymentMerchantId : ''; ?>',
            locale: 'auto',
            token: function(token) {
                $.ajax({
                    url: "/payment/stripe-pay",
                    method: 'post',
                    data: data + '&tokenId=' + token.id,
                    dataType: "json",
                    success: function(response) {
                        window.location = response.redirect_url;
                    }
                })
            }
        });
        handler.open({
            name: '<?php echo trim($this->arrAgencyDetails['Title']); ?>',
            email: '<?php echo trim($this->leadCustEmailIdSelf); ?>',
            description: '<?php echo trim($this->flexiPackageList['Title']); ?>',
            currency: '<?php echo trim($this->Symbol); ?>',
            amount: amount * 100
        });
    }
</script>


</body>

</html>