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

if (isset($arrAgencyUserDetail) && !empty($arrAgencyUserDetail['ContactNo1'])) {
    $airlineNumber = trim($arrAgencyUserDetail['ContactNo1']);
} else {
    $airlineNumber = !empty($this->arrTrevllerDetails['Contacts']) ? trim($this->arrTrevllerDetails['Contacts']) : '';
}
if (isset($arrAgencyUserDetail) && !empty($arrAgencyUserDetail['EmailId'])) {
    $airlineEmail = trim($arrAgencyUserDetail['EmailId']);
} else {
    $airlineEmail = !empty($this->arrTrevllerDetails['EmailId']) ? trim($this->arrTrevllerDetails['EmailId']) : '';
}

$isgstapply = false;
?>


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

    .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: 20px;
    }

    .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: 30px;
    }

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

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

    .hotel-details-block .form-block .form-group {
        min-height: 60px !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>




<section id="min-wrapper" class="active" ng-app="GTXHotels">
    <div id="main-content" ng-controller="HotelReviewController">
        <input type="hidden" id="searchID" value="<?= $this->searchID ?>">
        <input type="hidden" id="AgencySysId" value='<?= ($this->AgencySysId) ?>'>
        <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>Hotel Search Result</li>
                        <li class="active">travellers</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">
                            <div class="icon-element"><i class="fa fa-bed"></i></div>
                            <div>
                                <div><small>First Step</small></div>
                                <div><strong>Traveller Details</strong></div>
                            </div>
                        </div>
                        <div class="line"></div>
                        <div>
                            <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">
                    <form name="passenger-details" id="passenger-details" method="POST" serializer="submit(data)">
                        <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.HotelStars >= 1}"></i>
                                <i class="fa fa-star " ng-class="{'text-warning': HotelData.HotelStars >= 2}"></i>
                                <i class="fa fa-star " ng-class="{'text-warning': HotelData.HotelStars >= 3}"></i>
                                <i class="fa fa-star " ng-class="{'text-warning': HotelData.HotelStars >= 4}"></i>
                                <i class="fa fa-star " ng-class="{'text-warning': HotelData.HotelStars >= 5}"></i>
                            </div>
                            <div class="address">
                                <div><small class="text-muted">{{HotelData.HotelAddress}}</small></div>
                                <div><small class="text-muted">{{HotelData.HotelCity}} ,{{HotelData.HotelCountry}} Postal Code: {{HotelData.postalCode}}</small></div>
                                <div><small class="text-muted">Phone No: {{HotelData.Hotelphone}}</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>{{SearchParams.hotelFromDateSession}}</div>
                                </div>
                                <div class="more-details">
                                    <div class="text-primary"><small>Check Out</small></div>
                                    <div>{{SearchParams.hotelToDateSession}}</div>
                                </div>
                                <div class="more-details">
                                    <div class="text-primary"><small>Total Rooms</small></div>
                                    <div>{{SearchParams.hotelTotalRooms}}</div>
                                </div>
                                <div class="more-details">
                                    <div class="text-primary"><small>Total Stay</small></div>
                                    <div>{{SearchParams.hotelTotalNights}} Nights(s)</div>
                                </div>
                            </div>
                            <div class="form-block">
                                <div class="inner-block" ng-repeat="(key, item) in travellers">
                                    <div class="head-element" ng-if="key == 0">Guest Details</div>
                                    <div class="sub-head">For {{item.RoomType.name}} ({{item.RoomType.MealBase}})</div>
                                    <div class="row" ng-repeat="(keys, items) in item.memberDetails">
                                        <div class="col-lg-2">
                                            <div class="form-group active">
                                                <label for="title-{{key}}-{{keys}}">Salutation <span style="color:red">*</span></label>
                                                <select class="form-control" 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" id="title-{{key}}-{{keys}}" name="title-{{key}}-{{keys}}" class="form-control">
                                                    <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}}" name="fname-{{key}}-{{keys}}" class="form-control NameAutosuggest" placeholder="{{items.pax}} {{items.PaxCount}}" PaxType="{{items.PaxType}}" />
                                            </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" placeholder="{{items.pax}} {{items.PaxCount}}" />
                                            </div>
                                        </div>
                                        <div class="col-lg-5" ng-if="items.isdobr">
                                            <div class="form-group active">
                                                <label for="dob-{{key}}-{{keys}}">Date Of Birth <span style="color:red">*</span></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" ng-if="items.IsPAN">
                                            <div class="form-group active">
                                                <label for="panno-{{key}}-{{keys}}">PAN No. <span style="color:red">*</span></label>
                                                <input type="text" id="panno-{{key}}-{{keys}}" name="panno-{{key}}-{{keys}}" class="form-control" placeholder="{{items.pax}} {{items.PaxCount}} eg. AFZPK7190K" />
                                            </div>
                                        </div>
                                        <div class="col-lg-5" ng-if="items.IsPassM">
                                            <div class="form-group active">
                                                <label for="passno-{{key}}-{{keys}}">Passport Number <span style="color:red">*</span></label>
                                                <input type="text" id="passno-{{key}}-{{keys}}" name="passno-{{key}}-{{keys}}" class="form-control" placeholder="{{items.pax}} {{items.PaxCount}} eg. A2096457" />
                                            </div>
                                        </div>
                                        <div class="col-lg-5" ng-if="items.IsPassM">
                                            <div class="form-group active">
                                                <label for="passisse-{{key}}-{{keys}}">Issue Date <span style="color:red">*</span></label>
                                                <input type="text" id="passisse-{{key}}-{{keys}}" readonly name="passisse-{{key}}-{{keys}}" index="{{key}}-{{keys}}" paxType="{{items.pax}}" class="form-control Datepick" placeholder="{{items.pax}} {{items.PaxCount}} DD/MM/YYYY" />
                                            </div>
                                        </div>
                                        <div class="col-lg-5" ng-if="items.IsPassM">
                                            <div class="form-group active">
                                                <label for="passexp-{{key}}-{{keys}}">Expiry Date <span style="color:red">*</span></label>
                                                <input type="text" id="passexp-{{key}}-{{keys}}" readonly name="passexp-{{key}}-{{keys}}" index="{{key}}-{{keys}}" paxType="{{items.pax}}" class="form-control Datepick" placeholder="{{items.pax}} {{items.PaxCount}} DD/MM/YYYY" />
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="inner-block">
                                    <div class="head-element">Contact Details</div>
                                    <div class="row">
                                        <div class="col-lg-6">
                                            <?php $countryshortcode = Zend_Controller_Action_HelperBroker::getStaticHelper('General')->countryshortcode(($this->arrTrevllerDetails['countrycode'] != null) ? str_replace('+', '', trim($this->arrTrevllerDetails['countrycode'])) : '91'); ?>
                                            <div class="form-group">
                                                <div class="txtfieldMain textfieldMain_mobile form-group" style="border: #0069ff 0px solid;">
                                                    <label for="mobilenum" class="mobilenumber_labelshow" style="color: #000; z-index: 999;">Mobile Number <span class="red">*</span></label>
                                                    <div class="country_details country_box_wrap1">
                                                        <div id="iti-flag_leadqp" class="iti-flag in"></div>
                                                        <div class="iti-arrow"></div>
                                                    </div>
                                                    <div class="country_dropdown">
                                                        <div class="search_country">
                                                            <input type="text" name="" class="txtfield form-control countries_list" placeholder="Search countries" id="countries_list">
                                                            <div class="search_icon"></div>
                                                        </div>
                                                        <ul class="allcountries"></ul>
                                                    </div>
                                                    <input type="text" class="txtfield country_code stdcode_padding country_box_wrap2" id="CountryCode" readonly="readonly" name="countrycode" value="<?php echo @trim($this->arrTrevllerDetails['countrycode']) ? trim($this->arrTrevllerDetails['countrycode']) : '+91' ?>">
                                                    <input type="text" name="mobile_number" id="mobile_number" readonly onblur="return getdetailfromemail('mobile_number');" maxlength="10" value="<?php echo !empty($this->arrTrevllerDetails['Contacts']) ? trim($this->arrTrevllerDetails['Contacts']) : ''; ?>" class="form-control whbg customerMobile" style="width: 77% !important; float: right; border-bottom:#0069ff 1px solid !important; ">
                                                    <input type="hidden" name="countryCodeISO" id="countryCodeISO" value="IN" class="code_icons">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-lg-5">
                                            <div class="form-group">
                                                <label>Email</label>
                                                <input type="text" name="email_id" id="email_id" class="form-control whbg" readonly value="<?php echo !empty($this->arrTrevllerDetails['EmailId']) ? trim($this->arrTrevllerDetails['EmailId']) : ''; ?>" maxlength="75">
                                            </div>
                                        </div>
                                        <div class="col-lg-5">
                                            <div class="form-group">
                                                <label>Send to Hotel - Number</label>
                                                <input type="text" name="airline_number" id="airline_number" style="text-align: left !important;" class="form-control whbg numberonly" value="<?php echo !empty($airlineNumber) ? trim($airlineNumber) : ''; ?>" maxlength="11">
                                            </div>
                                        </div>
                                        <div class="col-lg-5">
                                            <div class="form-group">
                                                <label>Send to hotel - Email</label>
                                                <input type="text" name="airline_email" id="airline_email" class="form-control whbg" value="<?php echo !empty($airlineEmail) ? trim($airlineEmail) : ''; ?>" maxlength="75">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="inner-block">
                                    <div class="head-element">Special Request(s) (Optional)</div>
                                    <div class="form-group">
                                        <textarea name="specialrequest" id="specialrequest" class="form-control"></textarea>
                                    </div>
                                </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="gst_add_align2 baggage-title1" style="margin-bottom: 0px;border-bottom: 0px solid #d7d7d7;">
                                            <label class="checkboxcontainerreviewaddons_savedlist" style="width:100%;">

                                                <input id="isgstapply" name="isgstapply" value="1" type="checkbox" <?= ($isgstapply == 1) ? 'checked' : '' ?>> I would like to add my GSTIN <span class="checkmark"></span> <span class="optionalgst">(optional)</span> </label>
                                        </div>
                                        <div class="fill_traveller_information fill_adult_margin gstdiv seat_box" style="<?= ($isgstapply == 1) ? 'display: block;' : 'display: none;' ?>">
                                            <div class="form">
                                                <div class="adult_title">

                                                    <div class="row">
                                                        <div class="col-sm-4">
                                                            <div class="form-group">
                                                                <label for="gstnnumber">GST (GSTIN)</label>
                                                                <input type="text" id="gstnnumber" name="gstnnumber" value="<?= isset($this->EditCustomerData[0][0]['GstNumber']) ? $this->EditCustomerData[0][0]['GstNumber'] : '' ?>" class="form-control whbg">
                                                            </div>
                                                        </div>
                                                        <div class="col-sm-4">
                                                            <div class="form-group">
                                                                <label for="companyname">Company name</label>
                                                                <input type="text" id="companyname" name="companyname" value="" class="form-control">
                                                            </div>
                                                        </div>
                                                        <div class="col-sm-4">
                                                            <div class="form-group">
                                                                <label for="gstemail">Registered Email</label>
                                                                <input type="text" id="gstemail" name="gstemail" value="" class="form-control whbg">
                                                            </div>
                                                        </div>
                                                        <div class="col-sm-4">
                                                            <div class="form-group">
                                                                <label for="gstphone">Registered Phone</label>
                                                                <input type="text" id="gstphone" name="gstphone" value="" class="form-control whbg">
                                                            </div>
                                                        </div>
                                                        <div class="col-sm-4">
                                                            <div class="form-group">
                                                                <label for="gstaddress">Registered Address</label>
                                                                <input type="text" id="gstaddress" name="gstaddress" value="" class="form-control">
                                                            </div>
                                                        </div>

                                                        <div class="col-sm-4">
                                                            <div class="form-group">
                                                                <label for="gststate">State (optional)</label>
                                                                <input type="text" id="gststate" name="gststate" value="" class="form-control">
                                                            </div>
                                                        </div>

                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="clearfix"></div>
                                    </div>
                                </div> -->

                            </div>
                            <div style=padding-top:10px;>
                                <button type="submit" class="btn btn-primary" id="proceed">Proceed to Review</button>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="col-lg-4">
                    <?php
                    echo $this->partial('buyhotel/sale-summary.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>
        <!-- Main Content Element  End-->
    </div>
    </div>
    <?php echo $this->render('copyrightfooter.phtml'); ?>

</section>
<?php echo $this->render('newfooter.phtml'); ?>
<script>
    var SITEURL = "<?php echo $baseUrl; ?>/";
</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>
<link href="<?php echo $this->baseUrl('public/jquery-ui.css'); ?>" rel="stylesheet">
<script src="<?php echo $this->baseUrl('public/js/jquery-ui-1.11.0.js'); ?>"></script>

<script type="text/javascript">
    $('#isgstapply').on("click", function() {
        var isgstapply = $("input[name='isgstapply']:checked").length;
        if (isgstapply) {
            $('.gstdiv').show();
        } else {
            $('.gstdiv').hide();
        }
    });
</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">
    $(document).ready(function() {
        var DefaultCity;
        var searchids = $('#searchids').val();
        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=2', function(source) {
            DefaultCity = source;
        });

        $(document).on("focus", ".NameAutosuggest", function(e) {
            // $(this).val("");
            var PaxType = $(this).attr("PaxType");
            console.log(PaxType);
            var nameArr = [];
            $(".NameAutosuggest").each(function(e) {
                var Fname = $(this).val();
                if (Fname) {
                    nameArr.push(Fname);
                }
            });
            var DefaultCityFilter = [];
            var 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');
            $(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) {
                        console.log(ui.item);
                        ui.item.value = ui.item.FirstName;
                        if (ui.item.CustomerTitle == 'Master') {
                            var title = 'Mstr';
                        } else if (ui.item.CustomerTitle == 'Ms') {
                            var title = 'Miss';
                        } else {
                            var title = ui.item.CustomerTitle;
                        }
                        $("#relation-" + index).val(ui.item.Relation);
                        $("#title-" + index).val(title);
                        $("#fname-" + index).val(ui.item.FirstName);
                        $("#lname-" + index).val(ui.item.LastName);
                        $("#panno-" + index).val(ui.item.PanCard);
                        $("#dob-" + index).val(ui.item.DOB);
                        $(".NameAutosuggest").trigger("change");
                    },
                })
                .focus(function() {
                    $(this).autocomplete("search");
                });
        });
    });
</script>


</body>

</html>