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


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

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

    .comision_checkbox input {
        display: none;
    }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    .filterByContainer .success-step {
        color: #306a9e !important;
    }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    .main-item {
        padding: 2px;
    }
</style>
<?php
echo $this->partial(
    'hotel-proposal/proposal-header.phtml',
    array(
        'arrAgencyDetails' => $this->arrAgencyDetails,
        'SourceAirport' => $this->SourceAirport,
        'DestinationAirport' => $this->DestinationAirport
    )
);
?>

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

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



        <input type="hidden" id="IsProposal" value="1">
        <input type="hidden" id="ActionName" value="<?= $this->ActionName ?>">
        <input type="hidden" id="searchID" value="<?= $this->SearchHotelTraceId ?>">
        <input type="hidden" id="TPSysId" value="<?= $this->TPSysId ?>">
        <div class="col-md-12">
            <div class="filterByContainer d-flex align-items-center" id="sticky">
                <div class="active success-step">
                    <div class="icon-element"><i class="fa fa-check"></i></div>
                    <div>
                        <div><small>First Step</small></div>
                        <div><strong>Traveller Details</strong></div>
                    </div>
                </div>
                <div class="line"></div>
                <div class="active  success-step">
                    <div class="icon-element"><i class="fa fa-check"></i></div>
                    <div>
                        <div><small>Second Step</small></div>
                        <div><strong>Review</strong></div>
                    </div>
                </div>
                <div class="line"></div>
                <div class="active success-step">
                    <div class="icon-element"><i class="fa fa-check"></i></div>
                    <div>
                        <div><small>Third Step</small></div>
                        <div><strong>Payments</strong></div>
                    </div>
                </div>
                <div class="line"></div>
                <div class="active success-step">
                    <div class="icon-element"><i class="fa fa-check"></i></div>
                    <div>
                        <div><small>Finish</small></div>
                        <div><strong><?= str_replace('Ticket', 'Voucher', $this->BookingStatus) ?></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">
                <?php if ($this->CurrentStatus == 24) { ?>
                    <div style="border-bottom: 1px solid salmon;margin-bottom: 32px;color: green;">
                        <div class="row">
                            <div class="col-lg-8">
                                <div class="hotel-name" style="font-weight: 600;">Vouchered</div>
                                <div class="hotel-name" style="font-weight: 500;">Booking ID : <?= $this->XrefBookingId ?></div>
                                <div class="hotel-name" style="font-weight: 500;">Confirmation No. : {{HotelData.ConfirmationNo}}</div>
                            </div>
                            <div class="col-lg-2">
                                <button type="button" class="btn btn-primary btn-sm" value='Print' onclick='printDiv();'>Print Voucher</button>
                            </div>
                            <div class="col-lg-2">
                                <button type="button" class="btn btn-primary btn-sm" value='Print' onclick='printDivInv();'>Print Invoice</button>
                            </div>

                        </div>
                        <div class="address">
                            <div><small class="text-muted">
                                    Thank you for booking with us!.
                                    We hope you have a pleasant and memorable experience at your selected hotel. If you need any further assistance,
                                    please don’t hesitate to contact our customer support team.
                                </small></div>
                        </div>
                    </div>
                <?php } elseif ($this->CurrentStatus == 21) { ?>
                    <div style="text-align: center;border-bottom: 1px solid salmon;margin-bottom: 32px;color: #ea8115;">
                        <div class="hotel-name" style="font-weight: 600;">Booking Pending</div>
                        <div class="hotel-name" style="font-weight: 500;">Booking ID : <?= $this->XrefBookingId ?></div>
                        <div style="padding: 10px;text-align: center; width:100%;" ng-if="loadingCOnfirmation">
                            Confirming...
                            <img src="<?php echo $this->baseUrl('public/images/windows-xp-loading.gif'); ?>" />
                        </div>
                        <div class="address">
                            <div><small class="text-muted">Dear Customer, </small></div>
                            <div><small class="text-muted">Thank you for choosing <strong>{{HotelData.hotelName}}</strong> for your upcoming stay. We have received your booking request and are currently processing it.</small></div>
                            <div><small class="text-muted">
                                    Rest assured, our team is working diligently to process your request as quickly as possible.
                                    We understand the importance of having your accommodation plans finalized,
                                    and we sincerely apologize for any inconvenience this delay may cause.
                                </small></div>
                        </div>
                    </div>
                <?php } else { ?>
                    <div style="text-align: center;border-bottom: 1px solid salmon;margin-bottom: 32px;color: red;">
                        <div class="hotel-name" style="font-weight: 600;">Booking Failed</div>
                        <div class="hotel-name" style="font-weight: 500;">Booking ID : <?= $this->XrefBookingId ?></div>
                        <div class="hotel-name" style="font-weight: 500;">Error : {{HotelData.ErrorMessage}}</div>
                        <div class="address">
                            <div><small class="text-muted">Dear Customer, </small></div>
                            <div><small class="text-muted">We apologize, but your payment was unsuccessful. Please review your payment information and attempt the transaction again or consider using an alternative payment method. We advise to check your bank statement before trying another payment attempt. If the payment is debited from your bank account and you did not receive your booking confirmation yet, please contact us immediately.</small></div>
                            <div><small class="text-muted">
                                    In case your payment was not approved by the bank,
                                    we recommend getting in touch with your bank directly or contacting their customer
                                    support team for assistance.
                                </small></div>
                        </div>
                    </div>
                <?php } ?>
                <div class="hotel-name">{{HotelData.hotelName}}</div>
                <div class="star-rating">
                    <i class="fa fa-star " ng-class="{'text-warning': HotelData.Stars >= 1}"></i>
                    <i class="fa fa-star " ng-class="{'text-warning': HotelData.Stars >= 2}"></i>
                    <i class="fa fa-star " ng-class="{'text-warning': HotelData.Stars >= 3}"></i>
                    <i class="fa fa-star " ng-class="{'text-warning': HotelData.Stars >= 4}"></i>
                    <i class="fa fa-star " ng-class="{'text-warning': HotelData.Stars >= 5}"></i>
                </div>
                <div class="address">
                    <div><small class="text-muted">{{HotelData.hotelAddress}}</small></div>
                    <div><small class="text-muted">{{HotelData.hotelCityTitle}} ,{{HotelData.Country}} Postal Code: {{HotelData.PinCode}}</small></div>
                    <div><small class="text-muted">Phone No: {{HotelData.hotelPrimaryContact}}</small></div>
                </div>
                <div class="cancellation-date text-primary">Last Cancellation Date :{{RoomInfo[0].LastCancellationDate | date : "dd MMM yyyy HH:mm"}}</div>
                <div class="d-flex more-detail-container">
                    <div class="more-details">
                        <div class="text-primary"><small>Check In</small></div>
                        <div>{{HotelData.CheckInDate | date : "dd/MM/yyyy"}}</div>
                    </div>
                    <div class="more-details">
                        <div class="text-primary"><small>Check Out</small></div>
                        <div>{{HotelData.CheckOutDate | date : "dd/MM/yyyy"}}</div>
                    </div>
                    <div class="more-details">
                        <div class="text-primary"><small>Total Rooms</small></div>
                        <div>{{RoomInfo.length}}</div>
                    </div>
                    <div class="more-details">
                        <div class="text-primary"><small>Total Stay</small></div>
                        <div>{{HotelData.TotalNights}} Nights(s)</div>
                    </div>
                </div>
                <div class="form-block">
                    <div class="inner-block" ng-repeat="(key, item) in RoomInfo">
                        <div class="head-element" ng-if="key == 0">Guest Details</div>
                        <div class="sub-head">For {{item.RoomTypeName}} ({{item.MealPlanType}})</div>
                        <div class="row">
                            <div class="col-lg-6" ng-repeat="(keys, items) in item.customer">
                                <div class="form-group">
                                    <label for="title-{{key}}-{{keys}}">{{items.Salutation}}. {{items.FirstName}} {{items.LastName}} ({{items.paxtypeName}})</label>

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

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

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

                <?php if ($this->PaymentStatus == 130 && $this->CurrentStatus == 24) { ?>
                    <!-- <div style=padding-top:10px;>
                                <button type="button" class="btn btn-primary" value='Print' onclick='printDiv();'>Print Voucher</button>
                            </div> -->
                <?php } ?>
            </div>
        </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>


<script>
    var SITEURL = "<?php echo $baseUrl; ?>/";
</script>
<!--Layout Script start -->


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


<script type="text/javascript">
    function printDiv() {
        window.open('/hotel-proposal/printvoucher/data/<?= $this->SearchHotelTraceId ?>', '_blank');
    }

    function printDivInv() {
        window.open('/hotel-proposal/printinvoice/data/<?= $this->SearchHotelTraceId ?>', '_blank');
    }
</script>


</body>

</html>