@extends('layouts.main')

@section('title', 'Add new booking')

@section('css')

    <style>
        #loadingDiv{
            position:absolute;
            top:0px;
            right:0px;
            width:100%;
            height:100%;
            background-color:#666;
            background-image:url({{ 'img/gif/loading.gif' }});
            background-repeat:no-repeat;
            background-position:center;
            z-index:10000000;
            opacity: 0.4;
            filter: alpha(opacity=40); /* For IE8 and earlier */
        }

        #available-message{
            margin-left: auto;
            /* margin-right: auto; */
            width: 14%;
            color: red;
        }
    </style>

@endsection

@section('nav')
    @include('layouts.nav')
@endsection

@section('content')

    <div class="main-body">
        <div class="page-wrapper">
          
           
            <div class="page-header">

                <p id="available-message"></p>

                <div class="panel panel-default">
                    {!! Form::open(['action' => 'BookingsController@store']) !!}

                    <div class="panel panel-body add-booking">
                        <div class="page-header-title">
                            <h3 style="margin-left:0 !important;">Bookings - Add</h3>
                        </div>

                         <div class="page-header-breadcrumb">
                    <ul class="breadcrumb-title">
                        <li class="breadcrumb-item">
                            <a href="{{ url('/') }}">
                                <i class="icofont icofont-home"></i>
                            </a>
                        </li>
                        <li class="breadcrumb-item"><a href="#!">Bookings</a>
                        </li>
                        <li class="breadcrumb-item"><a href="#!">Add Bookings</a>
                        </li>
                    </ul>
                </div>
                        <div class="row add-form m-t-30">
                          <div class="col-md-6">
                           <div class="panel mini-panel">
                           <h6 class="mini-panel-title">
                                Customer Information
                           </h6>

                             <div class="form-group row">
                                <label for="customer_name" class="add-label col-sm-4 col-form-label">Customer Name <span style="color: red">*</span></label>
                                  <div class="col-sm-8">
                                    <input type="text" name="customer_name" class="form-control" required autofocus>
                                  </div>
                             </div>

                             <div class="form-group row">
                                <label for="email" class="add-label col-sm-4 col-form-label">Email</label>
                                  <div class="col-sm-8">
                                    <input type="email" name="email" class="form-control" autofocus>
                                  </div>
                             </div>

                             <div class="form-group row">
                                <label for="mobile" class="add-label col-sm-4 col-form-label">Contact Number <span style="color: red">*</span></label>
                                  <div class="col-sm-8">
                                    <input type="text" name="mobile" class="form-control" required autofocus>
                                  </div>
                             </div>

                             <div class="form-group row">
                                <label for="nic" class="add-label col-sm-4 col-form-label">NIC / Passport Number <span style="color: red">*</span></label>
                                  <div class="col-sm-8">
                                    <input type="text" name="nic" class="form-control" required autofocus>
                                  </div>
                             </div>

                             <div class="form-group row">
                                <label for="address" class="add-label col-sm-4 col-form-label">Address</label>
                                  <div class="col-sm-8">
                                    <!-- <input type="text" name="address" id="address" cols="30" rows="2" class="form-control" required autofocus> -->
                                     <textarea name="address" id="address" rows="2" cols="5" class="form-control" autofocus></textarea>
                                  </div>
                             </div>


                             <div class="form-group row">
                                        <label for="country" class="add-label col-sm-4 col-form-label"> Country <span style="color: red">*</span></label>
                                        <div class="col-sm-8">
                                            <select name="country" id="country" class="form-control chosen-select">
                                                  @foreach($data->countries as $key => $country)
                                        <option value="{{ $country->country }}">{{ $country->country }}</option>
                                    @endforeach
                                            </select>
                                        </div>
                              </div>
                          </div> </div>

                            <div class="col-md-6">
                             <div class="panel mini-panel booking-panel">
                                <h6 class="mini-panel-title">
                                Booking Information
                           </h6>
                               <div class="form-group row">
                                  <label for="room" class="lblroom add-label col-sm-5 col-form-label"> Select room </label>
                                    <div class="col-sm-7">
                                     <select name="room" id="room" class="form-control chosen-select room">
                                       @foreach($property->rooms as $key => $room)
                                        @if( $room->status == 'Active' )
                                            @foreach($room->rateplans as $rateplan)
                                                @foreach($rateplan->occupancies as $occupancy)
                                                     <option value="{{ $room->id }}">{{ $room->display_name.' '. $occupancy->code.' '.$occupancy->ratecode->code }}</option>
                                                 @endforeach
                                            @endforeach
                                        @endif
                                       @endforeach
                                     </select>
                                    </div>
                               </div>


                               <div class="form-group row">
                                <label for="checkin" class="lblcheckin add-label col-sm-5 col-form-label">Checkin</label>
                                  <div class="col-sm-7">
                                    <input type="date" name="checkin" min="{{ $data->today }}" value="{{ $data->today }}" class="form-control checkin validation-date-from-filed" required autofocus>
                                  </div>
                               </div>

                               <div class="form-group row">
                                <label for="checkout" class="lblcheckout add-label col-sm-5 col-form-label">Checkout</label>
                                  <div class="col-sm-7">
                                    <input type="date" name="checkout" min="{{ $data->tomorrow }}" value="{{ $data->tomorrow }}" class="form-control checkout validation-date-from-filed" required autofocus>
                                  </div>
                               </div>

                               <div class="form-group row">
                                <label for="rooms" class="lblrooms add-label col-sm-5 col-form-label">Rooms</label>
                                  <div class="col-sm-7">
                                    <input type="number" name="rooms" id="rooms" value="{{ $data->rooms }}" min="1" class="form-control rooms" required autofocus>
                                  </div>
                               </div>

                               <div class="form-group row">
                                <label for="guests" class=" add-label col-sm-5 col-form-label">Guests</label>
                                  <div class="col-sm-7">
                                    <input type="number" name="guests"  value="{{ $data->guests }}" min="1" class="form-control rooms" required autofocus id="guests">
                                  </div>
                               </div>
                               <div class="form-group row">
                                <label for="special_request" class=" add-label col-sm-5 col-form-label">Special request</label>
                                  <div class="col-sm-7">
                                    <input type="text" name="special_request" class="form-control rooms" autofocus id="special_request">
                                  </div>
                               </div>
                                 {{--<div class="form-group row">--}}
                                     {{--<label for="guests" class=" add-label col-sm-5 col-form-label">Meal</label>--}}
                                     {{--<div class="col-sm-7">--}}
                                         {{--<select class="form-control" name="meal" id="">--}}
                                             {{--<option value="bb">Bed & Breakfast</option>--}}
                                             {{--<option value="hb">Half Board</option>--}}
                                             {{--<option value="fb">Full Board</option>--}}
                                             {{--<option value="ro">Room Only</option>--}}
                                         {{--</select>--}}
                                     {{--</div>--}}
                                 {{--</div>--}}

                               <div class="form-group row">
                                <label for="price" class=" add-label col-sm-5 col-form-label">Total booking amount (USD)</label>
                                  <div class="col-sm-7">
                                    <input type="number" name="total" id="total" value="" class="form-control rooms" required autofocus>
                                  </div>
                               </div>

                            </div>
                             </div>
                        </div>
                    </div>

                    <div class="panel panel-footer row footer-add ">
                        <div class="col-md-6"></div>

                        <div class="col-md-6 footer-add-col">
            <span>
                <label class="label label-default total-price" id="lbltotal">Total: $</label>
                <input type="hidden" id="inptotal" value="">
            </span>
            <span class="pull-right">
                <button type="submit" class="btn btn-success btnbook">Book</button>
            </span>
                        </div>  </div>
                    {!! Form::close() !!}
                </div>
            </div>

            <div id="loadingDiv" style="display: none">

            </div>

        </div>
    </div></div>


@endsection
@section('scripts')
<script>
  $(document).ready(function(){
    var room_id = $("#room option:selected").attr("value");
    getMaxOccupancy(room_id);
      
    $("#room").change(function(){
      room_id = $("option:selected", this).attr("value");
      getMaxOccupancy(room_id);
  });
  function getMaxOccupancy(room_id){
    $.ajax({
      url:"/get-occupancy/"+room_id,
      type:"GET",
      success: function(max){
        $("#guests").attr("max",max);
      }
    });
  }
  });
  
  </script>
@endsection