@extends('layouts.admin')
@section('header_style')
<link href="{{asset('assets/plugins/datatables/datatables.min.css')}}" rel="stylesheet" type="text/css"/>
<link href="{{asset('assets/plugins/datatables/plugins/bootstrap/datatables.bootstrap.css')}}" rel="stylesheet"      type="text/css"/>
<link href="{{asset('assets/plugins/bootstrap-datepicker/css/bootstrap-datepicker3.min.css')}}" rel="stylesheet"      type="text/css"/>
<style type="text/css">
td { 
    font-size: 14px !important; 
}
form{
    padding-bottom: 10px;
}
</style>
@endsection
@section('content')  
<form method="POST" enctype="multipart/form-data" action="">
    @csrf
    <div class="top-baar">
       <nav class="navbar navbar-expand-lg navbar-light bg-light">
           <div class="collapse navbar-collapse" id="navbarSupportedContent">
               <ul class="nav nav-tabs">
                   <ul class="nav nav-tabs">
                    <li class="nav-item {{ Request::is('*add_hotel_room/hotel_info*') ? '' : '' }}" >
                        <a class="nav-link "  href="{{ route('add_hotel_room.add.hotel_info') }}">Information</a>
                    </li>
                    <li class="nav-item {{ Request::is('*add_hotel_room/hotel_room_facilities*') ? '' : '' }}" >
                        <a class="nav-link "  href="{{ route('add_hotel_room.add.hotel_room_facilities') }}">Facilities</a>
                    </li>
                    <li class="nav-item {{ Request::is('*add_hotel_room/hotel_cost*') ? 'active' : '' }}" style="background-color: #67AAB3;">
                        <a class="nav-link active" style="background-color: #A0C6CF;" href="{{ route('add_hotel_room.add.hotel_cost') }}">Cost</a>
                    </li>
                </ul>
                   <div class="collapse navbar-collapse" id="navbarSupportedContent">
                      <div class="Save"><button type="submit" class="btn btn-success" style="float: right;padding-right: 20px;padding-left: 20px;margin-right: 10px;">SAVE</button></div>
                      <div class="Discard"><a href="#" class="btn btn-danger px-4 py-1" style="float: right;margin-right: 10px;">DISCARD</a></div>
                  </div>
              </div> 
          </nav>   
      </div>
<div class="col-sm-12 card mt-1 mx-2" style="padding-left:20px;">
      <div class="col-sm-8 card " style="padding-left:20px;">
        <h3>Cost Tier Option</h3>
        <hr>
    </div>
    <div class="col-sm-3 card " style="padding-left:20px;">
        <h3>Room Rate</h3>
        <hr>
    </div> 
    <div class="col-sm-8 card " style="padding-left:20px;">
        <div class="col-2 ml-8 pl-8">
            <div class="form-group row my-0 pt-5">
                <label class="col-sm-3 form-label pt-1 text-left">By Date Range</label>
                <div class="mx-3">  
                </div>
            </div>
            <div class="form-group row my-0">
                <label class="col-sm-3 form-label pt-1 text-left">From* :</label>
                <div class="col-sm-6 mb-3 mr-5">
                    <input autocomplete="off" required type="datetime-local" name="range_from" id="range_from" class="form-control" value="">
                </div>
                <div class="mx-3">  
                </div>
            </div>
            <div class="form-group row my-0">
                <label class="col-sm-3 form-label pt-1 text-left">To* :</label>
                <div class="col-sm-6 mb-3 mr-5">
                    <input autocomplete="off" required type="datetime-local" name="range_to" id="range_to" class="form-control" value="">
                </div>
                <div class="mx-3">  
                </div>
            </div>
        </div>
    </div>
    <div class="col-sm-3 card " style="padding-left:20px;">
        <div class="col-2 ml-8 pl-8">
            <div class="form-group row my-0 pt-5">
                <label class="col-sm-3 form-label pt-1 text-left">
                    <div class="mx-3">  
                    </div>
                </div>
                <div class="form-group row my-0 pt-5">
                    <label class="col-sm-3 form-label pt-1 text-left">
                        <div class="mx-3">  
                        </div>
                    </div>
                    <div class="form-group row my-0">
                        <div class="col-sm-6 mb-3 mr-5">
                            <input autocomplete="off" required type="text" name="room_rate" id="room_rate" class="form-control" value="">
                        </div>
                        <div class="mx-3">  
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-sm-8 card " style="padding-left:20px;">
                <hr>
                <div class="col-2 ml-8 pl-8">
                    <div class="form-group row my-0 pt-5">
                        <label class="col-sm-3 form-label pt-1 text-left">By Date Range</label>
                        <div class="mx-3">  
                        </div>
                    </div>
                    <div class="form-group row my-0">
                        <label class="col-sm-3 form-label pt-1 text-left">From* :</label>
                        <div class="col-sm-6 mb-3 mr-5">
                            <input autocomplete="off" required type="datetime-local" name="range_from02" id="range_from02" class="form-control" value="">
                        </div>
                        <div class="mx-3">  
                        </div>
                    </div>
                    <div class="form-group row my-0">
                        <label class="col-sm-3 form-label pt-1 text-left">To* :</label>
                        <div class="col-sm-6 mb-3 mr-5">
                            <input autocomplete="off" required type="datetime-local" name="range_to02" id="range_to02" class="form-control" value="">
                        </div>
                        <div class="mx-3">  
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-sm-3 card " style="padding-left:20px;">
                <hr>
                <div class="col-2 ml-8 pl-8">
                    <div class="form-group row my-0 pt-5">
                        <label class="col-sm-3 form-label pt-1 text-left"></label>
                        <div class="mx-3">  
                        </div>
                    </div>
                    <div class="form-group row my-0 pt-5">
                        <label class="col-sm-3 form-label pt-1 text-left"></label>
                        <div class="mx-3">  
                        </div>
                    </div>
                    <div class="form-group row my-0">
                        <div class="col-sm-6 mb-3 mr-5">
                            <input autocomplete="off" required type="text" name="room_rate1" id="room_rate1" class="form-control" value="">
                        </div>
                        <div class="mx-3">  
                        </div>
                    </div>
                </div>
            </div> 
            <div class="col-sm-5 card " style="padding-left:20px;">
                <hr>
                <div class="col-2 ml-8 pl-8">
                    <div class="form-group row my-0 pt-5">
                        <label class="col-sm-3 form-label pt-1 text-left">By Days of the Week</label>
                        <div class="mx-3">  
                        </div>
                    </div>
                    <input class="checkbox" type="checkbox" id="monday" name="monday" value="1">
                    <label class="checkbox1" for="monday"> Monday</label><br>
                    <input class="checkbox" type="checkbox" id="tuesday" name="tuesday" value="1">
                    <label class="checkbox1" for="tuesday"> Tuesday</label><br>
                    <input class="checkbox" type="checkbox" id="wednesday" name="wednesday" value="1">
                    <label class="checkbox1" for="wednesday"> Wednesday</label><br>
                    <br><br>
                </div>
            </div>  
            <div class="col-sm-3 card " style="padding-left:20px;padding-bottom:30px; margin-bottom: 30px;">
                <hr>
                <div class="col-2 ml-8 pl-8" style="padding-top:22px;">
                    <div class="form-group row my-0 pt-5">
                        <label class="col-sm-3 form-label pt-1 text-left"></label>
                        <div class="mx-3">  
                        </div>
                    </div>

                    <input class="checkbox" type="checkbox" id="thursday" name="thursday" value="1">
                    <label class="checkbox1" for="thursday"> Thursday</label><br>
                    <input class="checkbox" type="checkbox" id="friday" name="friday" value="1">
                    <label class="checkbox1" for="friday"> Friday</label><br>
                    <input class="checkbox" type="checkbox" id="saturday" name="saturday" value="1">
                    <label class="checkbox1" for="saturday"> Saturday</label><br>
                    <input class="checkbox" type="checkbox" id="sunday" name="sunday" value="1">
                    <label class="checkbox1" for="sunday"> Sunday</label>
                    <br><br>
                </div>
            </div> 
            <div class="col-sm-3 card " style="padding-left:20px;">
                <hr>
                <div class="col-2 ml-8 pl-8">
                    <div class="form-group row my-0 pt-5">
                        <label class="col-sm-3 form-label pt-1 text-left"></label>
                        <div class="mx-3">  
                        </div>
                    </div>
                    <div class="form-group row my-0 pt-5">
                        <label class="col-sm-3 form-label pt-1 text-left"></label>
                        <div class="mx-3">  
                        </div>
                    </div>
                    <div class="form-group row my-0">
                        <div class="col-sm-6 mb-3 mr-5">
                            <input autocomplete="off" required type="text" name="room_rate2" id="room_rate2" class="form-control" value="">
                        </div>
                        <div class="mx-3">  
                        </div>
                    </div>
                </div>
            </div> 
        </div>
    </form>
    @endsection
    @section('footer_script')
    <script src="{{asset('assets/scripts/datatable.js' )}}" type="text/javascript"></script>
    <script src="{{asset('assets/plugins/datatables/datatables.min.js' )}}" type="text/javascript"></script>
    <script src="{{asset('assets/plugins/datatables/plugins/bootstrap/datatables.bootstrap.js' )}}"
    type="text/javascript"></script>
    <script src="{{asset('assets/plugins/jquery-validation/js/jquery.validate.min.js') }}"
    type="text/javascript"></script>
    <script src="{{asset('assets/plugins/jquery-validation/js/additional-methods.min.js') }}"
    type="text/javascript"></script>
    <script src="{{asset('assets/plugins/bootstrap-datepicker/js/bootstrap-datepicker.min.js' )}}"
    type="text/javascript"></script>
    <script src="{{asset('assets/scripts/pages/hotel/active.js') }}" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).on('click', '#close-preview', function(){ 
            $('.image-preview').popover('hide');
    // Hover befor close the preview
    $('.image-preview').hover(
        function () {
         $('.image-preview').popover('show');
     }, 
     function () {
         $('.image-preview').popover('hide');
     }
     );    
});

        $(function() {
    // Create the close button
    var closebtn = $('<button/>', {
        type:"button",
        text: 'x',
        id: 'close-preview',
        style: 'font-size: initial;',
    });
    closebtn.attr("class","close pull-right");
    // Set the popover default content
    $('.image-preview').popover({
        trigger:'manual',
        html:true,
        title: "<strong>Preview</strong>"+$(closebtn)[0].outerHTML,
        content: "There's no image",
        placement:'bottom'
    });
    // Clear event
    $('.image-preview-clear').click(function(){
        $('.image-preview').attr("data-content","").popover('hide');
        $('.image-preview-filename').val("");
        $('.image-preview-clear').hide();
        $('.image-preview-input input:file').val("");
        $(".image-preview-input-title").text("Browse"); 
    }); 
    // Create the preview image
    $(".image-preview-input input:file").change(function (){     
        var img = $('<img/>', {
            id: 'dynamic',
            width:250,
            height:200
        });      
        var file = this.files[0];
        var reader = new FileReader();
        // Set preview image into the popover data-content
        reader.onload = function (e) {
            $(".image-preview-input-title").text("Change");
            $(".image-preview-clear").show();
            $(".image-preview-filename").val(file.name);            
            img.attr('src', e.target.result);
            $(".image-preview").attr("data-content",$(img)[0].outerHTML).popover("show");
        }        
        reader.readAsDataURL(file);
    });  
});
</script> 

@endsection