<?php
$GetWhatsappUrl = Zend_Controller_Action_HelperBroker::getStaticHelper('GetWhatsappUrl')->GetWhatsappUrl();
$baseUrl = $this->baseUrl;
$mydevice = Zend_Controller_Action_HelperBroker::getStaticHelper('General')->getDevice();
$ARR_SALUTION_TJ = unserialize(ARR_SALUTION_TJ);
//$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;
    }

    .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>




<section id="min-wrapper" class="active" ng-app="GTXHotels">
    <div id="main-content" ng-controller="HotelReviewController">
        <form name="passenger-details" id="passenger-details" method="POST">
            <input type="hidden" id="ActionName" value="<?= $this->ActionName ?>">
            <input type="hidden" id="searchID" value="<?= $this->searchID ?>">
            <input type="hidden" id="MasterTPSysId" value="<?= $this->MasterTPSysId ?>">
            <input type="hidden" id="mobile_number" value="<?= $this->Contacts ?>">
            <input type="hidden" id="email_id" value="<?= $this->EmailId ?>">
            <input type="hidden" id="TPIntSysId" value="<?= $this->TPIntSysId ?>">
            <input type="hidden" id="AgencySysId" value="<?= $this->intLoggedinUserAgencySysId ?>">
            <input type="hidden" id="accom_room">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-md-12">
                        <!--Top header start-->
                        <h3 class="ls-top-header">Hotel Search Result</h3>
                        <!--Top header end -->

                        <!--Top breadcrumb start -->
                        <ol class="breadcrumb col-md-9 no-padding">
                            <li><a href="#"><i class="fa fa-home"></i></a></li>
                            <li>Hotel</li>
                            <li class="active">Review</li>
                        </ol>

                    </div>

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


                    <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">
                                        <div class="row" style="display: flex; align-items: center; margin-bottom: 20px;">
                                            <div class="col-md-4">
                                                <h2 style="margin: 0;">Guest Details </h2>
                                            </div>
                                            <div class="col-md-8">
                                                <div>
                                                    <!-- 
                                                <select class="form-control" ng-change="roomOptionChanged(selectedIndex)" style="width: 100%;border:none !important;border-bottom:1px dotted !important;border-radius:0 !important;padding-left:0 !important">
                                                    <option ng-repeat="(keys, items) in RoomOptionArray" value="{{keys}}">{{items}}</option>
                                                </select> -->
                                                    <select class="form-control" ng-model="selectedIndex" ng-change="roomOptionChanged(selectedIndex)">
                                                        <?php foreach ($this->RoomOptionArray as $key => $value) { ?>
                                                            <option value="<?php echo $key; ?>"><?php echo $value; ?></option>
                                                        <?php } ?>
                                                    </select>
                                                </div>
                                            </div>


                                        </div>
                                        <div class="row" style="display: flex; align-items: center; ">
                                            <div class="col-md-6">
                                                <div class="form-group">
                                                    <label>Supplier <span class="red">*</span></label>
                                                    <input <?php echo ($AgencyType == 2) ? 'readonly' : '' ?>
                                                        class="form-control whbg AutoSave" type="text" id="supplier" name="supplier"
                                                        value="<?php echo (isset($this->supplier_name) && isset($this->supplier_name) && $this->supplier_name != '') ? $this->supplier_name : (!empty($SupplierTitle) ? $SupplierTitle : @$this->param['supplier']); ?>">
                                                    <input class="form-control whbg" type="hidden" id="supplier_id"
                                                        name="supplier_id"
                                                        value="<?php echo (isset($this->supplier_id) && isset($this->supplier_id) && $this->supplier_id != '') ? $this->supplier_id : (!empty($SupplierSysId) ? $SupplierSysId : @$this->param['supplier_id']); ?>">

                                                </div>
                                            </div>
                                            <div class="col-md-6">
                                                <div class="form-group">
                                                    <label for="select-currency">Currency <span class="red">*</span></label>
                                                    <select name="currency" id="select-currency" class="demo-default AutoSave"
                                                        placeholder="Currency...">
                                                        <?php foreach ($this->Currency as $key => $val) { ?>
                                                            <option CurrencyType="<?php echo $val['CurrencyType']; ?>"
                                                                value="<?php echo trim($val['Symbol']); ?>"
                                                                <?php if ($this->TrxCurrency == trim($val['CurrencyType'])) {
                                                                    echo 'selected';
                                                                } ?>>
                                                                <?php echo $val['Symbol']; ?></option>
                                                        <?php } ?>
                                                    </select>
                                                </div>
                                            </div>

                                        </div>

                                        <div class="row" style="display: flex; align-items: center; margin-bottom: 20px;">
                                            <div class="col-md-6">
                                                <div class="form-group active">
                                                    <label for="select-currency">Booking ID <span class="red">*</span></label>
                                                    <input type="text" id="APIBookingid" readonly name="APIBookingid" class="form-control" value="{{HotelData.APIBookingid}}" />
                                                </div>
                                            </div>
                                            <div class="col-md-6">
                                                <div class="form-group active">
                                                    <label for="select-currency">Confirmation No <span class="red">*</span></label>
                                                    <input type="text" id="ConfirmationNo" name="ConfirmationNo" class="form-control" value="{{HotelData.ConfirmationNo}}" />
                                                </div>
                                            </div>
                                        </div>


                                    </div>
                                    <div class="sub-head" style="margin-bottom: 18px;">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 class="row" ng-repeat="(keys, items) in item.customer">
                                        <div class="col-lg-2">
                                            <div class="form-group active">
                                                <label for="title-{{key}}-{{keys}}">Salutation <span style="color:red">*</span></label>
                                                <input class="form-control whbg" type="hidden" value="{{items.TPPaxSysId}}" id="TPPaxSysId" name="TPPaxSysId-{{key}}-{{keys}}">
                                                <select class="form-control AutoSave" ng-model="items.Salutation" ng-if="items.paxType == 1" id="title-{{key}}-{{keys}}" name="title-{{key}}-{{keys}}">
                                                    <option value="">select</option>
                                                    <?php foreach ($ARR_SALUTION_TJ as $key => $value) {
                                                        $selected = ($strTitle == $value) ? 'selected' : ''; ?>
                                                        <option value="<?php echo $value; ?>" <?= $selected ?>><?php echo $value; ?></option>
                                                    <?php } ?>
                                                </select>
                                                <select ng-if="items.paxType != 1" ng-model="items.Salutation" id="title-{{key}}-{{keys}}" name="title-{{key}}-{{keys}}" class="form-control AutoSave">
                                                    <option value="">select</option>
                                                    <option value="Miss">Miss</option>
                                                    <option value="Mstr">Master</option>
                                                </select>
                                            </div>
                                        </div>
                                        <div class="col-lg-5">
                                            <div class="form-group active">
                                                <label for="fname-{{key}}-{{keys}}">First Name <span style="color:red">*</span></label>
                                                <input type="text" id="fname-{{key}}-{{keys}}" index="{{key}}-{{keys}}" PaxType="{{items.paxType}}" name="fname-{{key}}-{{keys}}" class="form-control AutoSave NameAutosuggest" placeholder="{{items.pax}} {{items.PaxCount}}" value="{{items.FirstName}}" />
                                            </div>
                                        </div>

                                        <div class="col-lg-5">
                                            <div class="form-group active">
                                                <label for="lname-{{key}}-{{keys}}">Last Name <span style="color:red">*</span></label>
                                                <input type="text" id="lname-{{key}}-{{keys}}" name="lname-{{key}}-{{keys}}" class="form-control AutoSave" placeholder="{{items.pax}} {{items.PaxCount}}" value="{{items.LastName}}" />
                                            </div>
                                        </div>
                                        <!-- <div class="col-lg-5">
                                        <div class="form-group active">
                                            <label for="dob-{{key}}-{{keys}}">Date Of Birth </label>
                                            <input type="text" id="dob-{{key}}-{{keys}}" name="dob-{{key}}-{{keys}}" class="form-control" placeholder="{{items.pax}} {{items.PaxCount}}" />
                                        </div>
                                    </div> -->
                                        <div class="col-lg-5">
                                            <div class="form-group active">
                                                <label for="panno-{{key}}-{{keys}}">PAN No. </label>
                                                <input type="text" id="panno-{{key}}-{{keys}}" name="panno-{{key}}-{{keys}}" class="form-control AutoSave" placeholder="{{items.pax}} {{items.PaxCount}} eg. AFZPK7190K" value="{{items.panno}}" />
                                            </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;">

                                                    <?php if ($this->IsCheckWallet != 1) { ?>
                                                        <span style="float: left;"> <a href="javascript:void(0);" class="btn btn-primarygray pull-right mobile_rechargenow_flght" onclick="return rechargeNow();" style="margin-left:0px;padding: 8px 12px; font-size: 13px;">Recharge
                                                                Now</a></span>
                                                    <?php } ?>
                                                    <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>

                                                        <?php if ($this->intLoggedinUserAgencySysId) { ?>
                                                            <input type="radio" name="paymentModebyUser" id="radioRedCheckbox4_22" <?= ($this->IsB2BCustomer == '0') ? 'checked' : ' ' ?> value="2">
                                                            <label for="radioRedCheckbox4_22" class="packageshow">
                                                                <strong> Pay Later </strong>
                                                            </label>
                                                        <?php } ?>
                                                    </span>
                                                    <span style="float: right;">
                                                        <label class="checkbox_popup checkbox_popupwidth" style="top: 6px;left:2px; background:none;"> Voucher with price
                                                            <input type="checkbox" name="withprice" id="withprice" value="1">
                                                            <span class="checkmark"></span>
                                                        </label>
                                                    </span>
                                                    <?php if ($this->IsCheckWallet != 1) { ?>
                                                        <span style="float: right;line-height: 16px;margin-right: 10px;"><strong style="font-size: 12px;">Your Wallet Balance:</strong>
                                                            <?php echo number_format($this->walletBalanceAmount, 2); ?><br>
                                                            <strong style="font-size: 12px;">Your Deduction:</strong>
                                                            <?php echo number_format($this->intChargeFromWallet, 2); ?>
                                                        </span>
                                                    <?php } ?>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                            </div>
                            <?php if ($this->IsCheckWallet == 1) { ?>
                                <div style=padding-top:10px;>
                                    <!-- <button type="submit" class="btn btn-primary" id="proceed" ng-click="PayNow(1)">Issue Voucher ss</button> -->
                                    <button type="button" class="btn btn-primary AutoSave" paynow="1" id="proceed">Issue Voucher</button>
                                </div>
                            <?php } else { ?>
                                <div style=padding-top:10px;>
                                    <button type="button" class="btn btn-primary AutoSave" paynow="1" id="proceed">Issue Voucher</button>
                                </div>
                            <?php } ?>
                        </div>
                    </div>
                    <div class="col-lg-4">
                        <?php
                        echo $this->partial('buyhotel/sale-summary-offline.phtml', array());
                        ?>
                    </div>
                </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>
        </form>
        <!-- Main Content Element  End-->
        <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">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title" style="color:white; 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">
                                        <label for="OTPNumber">Enter OTP</label>
                                        <input type="number" max="6" id="OTPNumber" name="OTPNumber" 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" ng-click="verifying(1)">Continue Booking</a>
                                    <a href="javascript:void(0)" class="resend" ng-click="PayNow(1)">Resend</a>
                                </div>

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

        <!-- <form id="paynow" method="post" name="paynow" action="<?php echo $this->strPayWithWalletUrl; ?>">
            <input name="guid" value="<?php echo $this->guid; ?>" type="hidden">
            <input name="walletcode" value="<?php echo $this->walletCode; ?>" type="hidden">
            <input name="amount" id="amount" value="<?php echo $this->intChargeFromWallet; ?>" type="hidden">
            <input name="Firstname" value="<?php echo trim($this->customerDetsils['FirstName']); ?>" type="hidden">
            <input name="AgencyUserSysId" value="<?php echo $this->intLoggedinUserId; ?>" type="hidden">
            <input name="AgencySysId" value="<?php echo $this->intLoggedinUserAgencySysId; ?>" 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->intTpSysId; ?>" type="hidden">
            <input name="CustomerSysId" value="<?php echo $this->intCustomerSysId; ?>" type="hidden">
            <input name="returnURL" value="<?php echo $this->strReturnURL; ?>" type="hidden">
            <input name="errorURL" value="<?php echo $this->strErrorURL; ?>" type="hidden">
            <input name="stringData" value='<?php echo $this->stringData; ?>' type="hidden">
            <input name="IsB2BCustomer" value='<?php echo $this->IsB2BCustomer; ?>' type="hidden">
        </form> -->

        <form method="post" id="bookflight" name="bookflight" action="<?php echo $this->strReturnURL; ?>">
            <input name="status" id="trxstatushidden" value="" type="hidden">
            <input name="TrxSysId" value="0" type="hidden">
            <input name="TPSysId" value="<?php echo $this->TPSysId; ?>" type="hidden">
            <input name="guid" id="guidhidden" value="" type="hidden">
            <input type="hidden" value="<?= $this->searchID ?>" name="strUrlData">

        </form>
    </div>
    </div>
    <?php echo $this->render('copyrightfooter.phtml'); ?>

</section>
<?php echo $this->render('supplier/add.phtml'); ?>
<?php echo $this->render('newfooter.phtml'); ?>
<script>
    var SITEURL = "<?php echo $baseUrl; ?>/";
</script>

<script src="<?php echo $this->baseUrl('public/assets/js/jquery-ui.js'); ?>"></script>

<script src="<?php echo $baseUrl; ?>/public/js/ng/angular.min.js"></script>
<script src="<?php echo $baseUrl; ?>/public/js/ng/angular-route.min.js"></script>
<script src="<?php echo $baseUrl; ?>/public/js/ng/app.js"></script>


<script type="text/javascript">
    $('#isgstapply').on("click", function() {
        var isgstapply = $("input[name='isgstapply']:checked").length;
        if (isgstapply) {
            $('.gstdiv').show();
        } else {
            $('.gstdiv').hide();
        }
    });

    var DefaultCity;
    var email_id = $("#email_id").val();
    var mobile_number = $("#mobile_number").val();
    var AgencySysId = $("#AgencySysId").val();
    $.getJSON("/flight-new/memberguestdetail?email_id=" + email_id + '&mobile_number=' + mobile_number + '&AgencySysId=' + AgencySysId + '&PlanType=1', function(source) {
        DefaultCity = source;
    });

    $("body").on("focus", ".NameAutosuggest", function(e) {
        $(this).val("");
        let PaxType = $(this).attr("PaxType");
        var nameArr = [];
        $(".NameAutosuggest").each(function(e) {
            var Fname = $(this).val();
            if (Fname) {
                nameArr.push(Fname);
            }
        });
        let DefaultCityFilter = [];
        let DefaultCityFull = DefaultCity;
        if (nameArr.length) {
            DefaultCityFilter = DefaultCityFull.filter(f => f.paxType == PaxType && !nameArr.includes(f.FirstName))
        } else {
            DefaultCityFilter = DefaultCity.filter(f => f.paxType == PaxType);
        }
        var index = $(this).attr('index');
        console.log(index)
        console.log(DefaultCityFilter)
        $(this).autocomplete({
                source: function(request, response) {
                    if (request.term.replace(/ /g, "").length > 2) {
                        var term = $.ui.autocomplete.escapeRegex(request.term),
                            startsWithMatcher = new RegExp("^" + term, "i"),
                            startsWith = $.grep(DefaultCityFilter, function(value) {
                                return startsWithMatcher.test(
                                    value.FirstName || value.value || value
                                );
                            }),
                            containsMatcher = new RegExp(term, "i"),
                            contains = $.grep(DefaultCityFilter, function(value) {
                                return (
                                    $.inArray(value, startsWith) < 0 &&
                                    containsMatcher.test(
                                        value.label || value.value || value
                                    )
                                );
                            });
                        response(startsWith.concat(contains).slice(0, 15));
                    } else {
                        var query = "d";
                        var term = $.ui.autocomplete.escapeRegex(query),
                            startsWithMatcher = new RegExp("^" + term, "i"),
                            startsWith = $.grep(DefaultCityFilter, function(value) {
                                return startsWithMatcher.test(
                                    value.FirstName || value.value || value
                                );
                            }),
                            containsMatcher = new RegExp(term, "i"),
                            contains = $.grep(DefaultCityFilter, function(value) {
                                return (
                                    $.inArray(value, startsWith) < 0 &&
                                    containsMatcher.test(
                                        value.label || value.value || value
                                    )
                                );
                            });
                        response(startsWith.concat(contains).slice(0, 15));
                    }
                },
                create: function(ul, item) {
                    $(this).data("ui-autocomplete")._renderItem = function(ul, item) {

                        //if (existName !== 0) {
                        var disCode = item.label;
                        return $('<li class="ui-menu-item">')
                            .append(
                                `<div id="ui-id-16" tabindex="-1" class="ui-menu-item-wrapper">` +
                                disCode +
                                `</div>`
                            ).append("</li>").appendTo(ul); // customize your HTML
                        //}
                    };
                },
                minLength: 0,
                autoFocus: true,
                select: function(event, ui) {
                    ui.item.value = ui.item.FirstName;
                    $("#title-" + index).val(ui.item.CustomerTitle);
                    $("#fname-" + index).val(ui.item.FirstName);
                    $("#lname-" + index).val(ui.item.LastName);
                    $("#panno-" + index).val(ui.item.PanCard);
                    $(".NameAutosuggest").trigger("change");
                },
            })
            .focus(function() {
                $(this).autocomplete("search");
            });
    });

    $("body").on("click", ".AutoSave", function(e) {
        var paynow = $(this).attr('paynow');
        console.log(paynow);

        $("#proceed").html("Please Wait ...");
        $("#proceed").attr('disabled', 'disabled');
        setTimeout(function() {
            var supplier_id = $('#supplier_id').val();
            var currencytype = $('#select-currency').find('option:selected').attr('currencytype');
            var accom_room = $('#accom_room').val();
            var searchID = $('#searchID').val();
            var TPIntSysId = $('#TPIntSysId').val();
            var mobile_number = $('#mobile_number').val();
            var email_id = $('#email_id').val();
            var MasterTPSysId = $('#MasterTPSysId').val();
            var data = ($('#passenger-details').serialize());
            $.ajax({
                url: '/buyhotel/save-passenger',
                data: 'data=' + data + '&accom_room=' + accom_room + '&searchID=' + searchID + '&MasterTPSysId=' + MasterTPSysId + '&email_id=' + email_id + '&mobile_number=' + mobile_number + '&supplier_id=' + supplier_id + '&currencytype=' + currencytype + '&TPIntSysId=' + TPIntSysId + '&paynow=' + paynow,
                type: 'POST',
                dataType: 'json',
                success: function(response) {
                    if (paynow == 1) {
                        if (response.success) {
                            $("#proceed").html("Issue Voucher");
                            $("#proceed").removeAttr('disabled', 'disabled');
                            angular.element(document.getElementById('ngHotelList')).scope().PayNow(1);
                        } else {
                            var elementId = response.index;
                            $("#" + elementId).focus();
                            $("#proceed").html("Issue Voucher");
                            $("#proceed").removeAttr('disabled', 'disabled');
                            alert(response.message);
                        }
                    } else {
                        $("#proceed").html("Issue Voucher");
                        $("#proceed").removeAttr('disabled', 'disabled');
                    }
                }
            });
        }, 500);
    });
    $("body").on("keypress", "#supplier", function(e) {

        $(this).autocomplete({
            source: '/flight/get-supplier-auto-search',
            minLength: 2,
            select: function(event, ui) {

                var SupplierSysId = ui.item.SupplierSysId;
                if (SupplierSysId == 0) {
                    $("#supplier_id").val(SupplierSysId);
                    $("#supplier").val('');
                    addNewSupplierPopup();
                } else {
                    $("#supplier_id").val(SupplierSysId);
                }
            }
        });
    });
</script>

<script src="<?php echo $baseUrl; ?>/public/js/ng/hotel_review.js"></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 type="text/javascript" src="<?php echo $this->baseUrl('public/assets/js/customer.js'); ?>"></script>


<script type="application/x-javascript">

</script>


</body>

</html>