<style>
    .instructionHead{
        font-size: 18px;
        color: black;
    }
    .instruction-list {
        padding-left: 15px;
    }
    .instruction-list li {
        line-height: 24px;
    }
    .hotel-room-box {
        margin-top: 15px;
    }
    .hotel-room-box h3 {
        background: #204566;
        color: white;
        padding: 10px 15px;
        font-size: 15px;
        margin: 0;
        text-align: center;
    }
    .hotel-room-box-info {
        padding: 20px 15px;
        border: 1px solid #ddd;
        border-top: 0;
        min-height: 168px;
        text-align: center;
    }
    .hotel-room-box-info .hotel-room-btns-group {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-bottom: 10px;
    }
    .hotel-room-box-info .btn-margin {
        margin-bottom: 15px;
    }
    .hotel-room-box-info .upload-btn-wrapper {
        position: relative;
        overflow: hidden;
        display: inline-block;
    }
    .hotel-room-box-info .upload-btn-wrapper .upload-file {
        color: #fff;
    background-color: #ff4906;
    padding: 10px 20px;
    font-size: 12px;
    font-weight: bold;
    min-width: 250px;
    display: block;
    text-align: center;
    }
    .hotel-room-box-info .upload-btn-wrapper input.upload-file-btn[type=file] {
        font-size: 100px;
        position: absolute;
        left: 0;
        top: 0;
        opacity: 0;
    }
    .hotel-room-box-info .btn {
        padding: 9px 10px;
        font-size: 12px;
        color: #fff;
        background-color: #0076CA;
        border-color: #0076CA;
        border: 1px solid #0085DF;
        min-width: 142px;
        border-radius: 0px;
        margin-left: -7px;
    }
    .hotel-room-box-info .btn.disabled {
        border: 1px solid #dddddd;
        color: #dddddd;
        cursor: not-allowed;
    }
    .hotel-room-box-info .btn.enable {
        border: 1px solid #0085DF;
        background: #0085DF;
        color: #fff;
        cursor: pointer;
    }
    .hotel-room-box-info .btn:focus {
        outline: 0;
    }
    .hotel-room-box-info .hotel-destiation-search {
        border: 1px solid #0085DF;
        padding: 10px;
        font-size: 12px;
        color: #000;
        min-width: 180px;
        font-weight: 600;
    }
    .hotel-room-box-info a {
        color: #565656;
    }
    @media screen and (max-width: 767px) {
        .hotel-room-panel {
            border: 0;
        }
    }

    .btn-file input[type=file] {
    position: absolute;
    top: 0;
    right: 0;
    min-width: 100%;
    min-height: 100%;
    font-size: 999px;
    text-align: right;
    filter: alpha(opacity=0);
    opacity: 0;
    background: red;
    cursor: inherit;
    display: block;
}
.selectize-input {
    -webkit-border-radius: 0px !important;
}
.selectize-control {
    width: 137px;
}
</style>
<section id="min-wrapper" class="active">
    <div id="main-content">
        <div class="container-fluid">
            <div class="row">
                <div class="col-md-12">
                    <!--Top header start-->

                    <!--Top breadcrumb start -->
                    <ol class="breadcrumb">
                        <li><a href="#"><i class="fa fa-home"></i></a></li>
                        <li class="">Accommodation</li>
                        <li class="">Manage</li>
                        <li class="active">Bulk upload</li>
                    </ol>
                    <!--Top breadcrumb start -->
                </div>

                <!--for display message div-->
                <?php if (count($this->messages)) { ?>
                <div class="col-md-12" id="message_hotel_div">
                    <div class="alert alert-success">
                        <button aria-hidden="true" id="hideHotelMessage" class="close" type="button">×</button>
                        <?php foreach ($this->messages as $message) { ?>
                        <span id="success-message-box"><?php echo $this->escape($message); ?></span>
                        <?php } ?>
                    </div>
                </div>
                <?php } ?>

            </div>

            <script type="text/javascript">
            $("#hideHotelMessage").click(function() {
                $("#message_hotel_div").hide();
            });
            </script>

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

                <div class="col-md-12">
                    <div class="query_listing_bg3">

                        <div class="panel-body no-padding">
                            <div class="form-group form-group1 text-right align_paddingbottom_20">
                                <div class="mobile_scrolling">
                                <a href="<?php echo $this->baseUrl('accommodation/add-hotels'); ?>"
                                    class="btn btn-danger btn-sm"><i class="fa fa-plus"></i> Add Hotel</a>
                                    <a href="<?php echo $this->baseUrl('accommodation/manage'); ?>" class="btn btn-danger btn-sm"><i class="fa fa-fw fa-eye"></i> My Hotels</a>
                                  <?php if(Travel_Model_AgencyAuth::getIdentity()->IsHotelInventory == 1) { ?>
                                <a href="<?php echo $this->baseUrl('accommodation/inventory'); ?>"
                                    class="btn btn-danger btn-sm"><i class="fa fa-eye"></i> Hotel Rates
                                    List</a>
                                  <?php } ?>
                                </div>
                            </div>

                            <div class="panel-body table-responsive hotel-room-panel">
                              <!-- <h2 class="instructionHead">Instruction for Bulk Upload :</h2>
                              <ol class="instruction-list">
                                <li>Loremipsum is a dummy text</li>
                                <li>Loremipsum is a dummy text</li>
                                <li>Loremipsum is a dummy text</li>
                                <li>Loremipsum is a dummy text</li>
                              </ol> -->
                              <div class="row">
                              
                                <div class="col-md-12 no-padding">
                                    <div class="hotel-room-box ">
                                        <h3 class="text-left">Upload Hotel and Hotel Rates</h3>
                                        <div class="hotel-room-box-info">
                                         
                                            <form  id="hotelname_old" enctype="multipart/form-data" method="post" action="/accommodation/update-rate-from-excel">
                                            <div class="row">
                                                <div class="col-md-4">
                                                    <div class="upload-btn-wrapper btn-margin">
                                                        <span class="upload-file"><i class="glyphicon glyphicon-folder-open"></i> &nbsp;Browse …</span>
                                                        <input class="upload-file-btn" type="file" name="myfile" id="myfile"/>
                                                        <span id="fileNameSpan"></span>
                                                    </div>
                                                    </div>
                                                <div class="col-md-2">  
                                                    <button id="submitBtn" class="btn btn-margin" value="Upload" type="submit" disabled=""><i class="glyphicon glyphicon-upload"></i> Upload</button>
                                                </div>
                                                
                                                <div class="col-md-6 text-right">
                                                    <a href="<?php echo $this->baseUrl('public/sampledata/hotel_data.xlsx'); ?>" class="btn btn-danger mt-3">Template</a>
                                                </div>
                                            </div>
                                            <span id="uploadstatus" style="color:red"></span>
                                            </form>
                                        </div>
                                    </div>
                                </div>
                              </div>
                            </div>
                            <!--Table Wrapper Finish-->

                        </div>
                    </div>
                </div>
            </div>
        
            <!-- Main Content Element  End-->
        </div>
    </div>
    </div>
    <?php echo $this->render('copyrightfooter.phtml'); ?>
</section>
<!--Page main section end -->
<?php include_once 'application/views/scripts/newfooter.phtml'; ?>
<script src="<?php echo $this->baseUrl('public/assets/js/jquery-ui.js'); ?>"></script>
<script src="<?php echo $this->baseUrl('public/assets/js/bootstrap3-typeahead.js'); ?>"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.js" type="text/javascript"></script>
<script>
const fileInput = document.getElementById('myfile');
const submitButton = document.getElementById('submitBtn');
const fileNameSpan = document.getElementById('fileNameSpan');

fileInput.addEventListener('change', function () {
    if (fileInput.files.length > 0) {
        submitButton.removeAttribute('disabled');
        submitButton.setAttribute('enable','enable');
        fileNameSpan.textContent = fileInput.files[0].name;
    } else {
        submitButton.setAttribute('disabled', 'disabled');
        fileNameSpan.textContent = '';
    }
});

</script>
<script type="text/javascript">
$(document).ready(function() {
    $('#hotelname').submit(function(e) {
        e.preventDefault();
        var formData = new FormData(this);
        $.ajax({
            type: 'POST',
            url: '/accommodation/upload-bulk-hotels',
            data: formData,
            processData: false,
            contentType: false,
            beforeSend: function () {
            $("#uploadstatus").text('Please Wait');
            submitButton.setAttribute('disabled', 'disabled');
            },
            success: function(response) {
                var parsedData = JSON.parse(response);
                console.log(parsedData);
                if(parsedData.success){
                    alert(parsedData.msg);
                    location.reload();
                } else {
                    alert(parsedData.msg);  
                }
            },
            error: function(xhr, status, error) {
                console.log(xhr.responseText);
            }
        });
    });
});

function getDestinationId(that) {
    var id = $(that).attr('id');
        var codeId = id + 'Code';

        $('#' + id).typeahead({
            items: 'all',
            source: function (query, process) {
                return $.ajax({
                    url: '/accommodation/autosuggest',
                    type: 'post',
                    data: {
                        query: query
                    },
                    dataType: 'json',
                    success: function (result) {
                        var resultList = result.map(function (item) {
                            var aItem = {
                                label: item.label,
                                CityId: item.CityId,
                            };
                            return JSON.stringify(aItem);
                        });
                        return process(resultList);
                    }
                });
            },
            sorter: function (items) {
                var beginswith = [],
                    caseSensitive = [],
                    caseInsensitive = [],
                    item;
                while (aItem = items.shift()) {
                    var item = JSON.parse(aItem);
                    if (!item.label.toLowerCase().indexOf(this.query.toLowerCase()))
                        beginswith.push(JSON.stringify(item));
                    else if (~item.label.indexOf(this.query))
                        caseSensitive.push(JSON.stringify(item));
                    else
                        caseInsensitive.push(JSON.stringify(item));
                }
                return beginswith.concat(caseSensitive, caseInsensitive)

            },
            highlighter: function (obj) {
                var item = JSON.parse(obj);
                var query = this.query.replace(/[\-\[\]{}()*+?.,\\\^$|#\s]/g, '\\$&');
                return item.label.replace(new RegExp('(' + query + ')', 'ig'), function ($1, match) {
                    return '<strong>' + match + '</strong>'
                })
            },
            updater: function (item) {
                var itemObj = JSON.parse(item);
                $('#' + id).val(itemObj.label); // Set the selected airport name in the input field
                $('#' + codeId).html(itemObj.CityId); // Set the airline code in the hidden input
                return itemObj.label; // Return the selected label to the input field
            },
            minLength: 2
        });
    }
</script>