@extends('layouts.main-layout')
@section('title')
Create New Reservation | Dashboard
@endsection
@section('content')


<div class="content d-flex flex-column flex-column-fluid" id="kt_content">
    <!--begin::Post-->
    <div class="post d-flex flex-column-fluid" id="kt_post">
        <!--begin::Container-->
        <div id="kt_content_container" class="container-xxl">

            <div class="card mb-5 mb-xl-8">

<!--<ul class="breadcrumb">-->
<!--  <li>-->
<!--    <p>PMS</p>-->
<!--  </li>-->
<!--  <li><a href="#" class="active">Users</a> </li>-->
<!--</ul>-->

<div class="card-header border-0 pt-5">
                    <h3 class="card-title align-items-start flex-column">
                        <span class="card-label fw-bolder fs-3 mb-1">Create New Reservations</span>

                    </h3>
</div>
<div class="card-body py-3">
          <div class="row-fluid">
            <div class="span12">
              <div class="grid simple ">
                <div class="grid-body ">
        <form action="{{route('admin.reservations.store')}}" method="post" class="grey lighten-4 p-3" id="create-booking-form">
            @csrf
            <div id="booking-room-name" class="hide chip mb-1">
                Room #<span id="room-no">103</span>
            </div>
            <div class="row mb-3">
                <h3 class="text-center"><b>Booking Information</b></h3>
                <br>
                <div class="input-field col-sm-6 mt-3 l2">
                    <label for="checkin" class="form-label">Check In</label>
                    <input type="text" name="checkin" id="checkin" class="datepicker form-control">
                </div>
                <div class="input-field col-sm-6 mt-3 l2">
                    <label for="checkout" class="form-label">Check Out</label>
                    <input type="text" name="checkout" id="checkout" class="datepicker form-control">
                </div>
                <div class="input-field col-sm-6 mt-3 l2">
                    <label for="room_type" class="form-label">Room Type</label>
                    <select name="room_type" id="room_type" class="form-select">
                        <option value="" disabled selected>Select a room type</option>
                        @foreach($roomTypes as $roomType)
                            <option value="{{$roomType->RoomTypeId}}">{{$roomType->RoomTypeName}}</option>
                        @endforeach
                    </select>
                </div>
                <div class="input-field col-sm-6 mt-3 l2">
                    <label for="room" class="form-label">Room</label>
                    <select name="room" id="room" class="form-select">
                        <option value="" disabled selected>Select a room type</option>
                    </select>
                </div>
                <div class="input-field col-sm-6 mt-3 l2">
                    <label for="rate_plan" class="form-label">Rate Plan</label>
                    <select name="rate_plan" id="rate_plan" class="form-select">
                        <option value="" disabled selected>Select a room type</option>
                    </select>
                </div>
                <div class="input-field col-sm-6 mt-3 l2">
                    <label for="adults" class="form-label">Adults</label>
                    <select name="adults" id="adults" class="form-select">
                        @for($i = 1;$i<=10;$i++)
                            <option value="{{$i}}">{{$i}}</option>
                        @endfor
                    </select>
                </div>
                <div class="input-field col-sm-6 mt-3 l2">
                    <label for="children" class="form-label">Children</label>
                    <select name="children" id="children" class="form-select">
                        @for($i = 0;$i<=10;$i++)
                            <option value="{{$i}}">{{$i}}</option>
                        @endfor
                    </select>
                </div>
            </div>
            <div class="row mb-3 mt-3">
                <h5 class="text-center"><b>Price per night:</b></h5>

                    <div class="col-sm-12" >
                        <button style="float:right;" class="btn btn-primary btn-flat blue lighten-1 white-text btn-small right waves-effect waves-light" id="reset-rates-btn">Reset</button>
                    </div>

                <div id="rates-per-night" class="col-sm-6 mt-5 l10">
                    {{-- data will be injected from javascript --}}
                </div>
                <div class="col-sm-6 mt-3 l2">
                    <div class="input-field col-sm-12">
                        <label for="total_price" class="form-label">Total</label>
                        <input type="number" class="form-control" name="total_price" id="total_price" readonly>
                    </div>
                </div>
            </div>
            <div class="row mt-5">
                <h5 class="text-center"><b>Guest Information</b></h5>
                <div class="col-sm-12">
                    <a style="float:right;" id="reset-btn" class="btn btn-primary btn-flat blue lighten-1 white-text btn-small right waves-effect waves-light">Reset</a>
                </div>
                <div class="input-field col-sm-6 mt-3 l6">
                    <label for="first_name" class="form-label">First Name</label>
                    <input type="text" name="first_name" id="first_name" class="custom-autocomplete form-control" data-col="first_name">
                </div>
                <div class="input-field col-sm-6 mt-3 l6">
                    <label for="last_name" class="form-label">Last Name</label>
                    <input type="text" name="last_name" id="last_name" class="custom-autocomplete form-control" data-col="last_name">
                </div>
                <div class="input-field col-sm-6 mt-3 l6">
                    <label for="email" class="form-label">Email</label>
                    <input type="text" name="email" id="email" class="custom-autocomplete form-control" data-col="email">
                </div>
                <div class="input-field col-sm-6 mt-3 l6">
                    <label for="phone" class="form-label">Phone</label>
                    <input type="text" name="phone" id="phone" class="custom-autocomplete form-control" data-col="phone">
                </div>
                <div class="input-field col-sm-6 mt-3 l6">
                    <label for="address" class="form-label">Address</label>
                    <input type="text" name="address" id="address" class="custom-autocomplete form-control" data-col="address">
                </div>
                <div class="input-field col-sm-6 mt-3 l6">
                    <label for="cnic" class="form-label">CNIC No</label>
                    <input type="text" name="cnic" id="cnic" class="custom-autocomplete form-control" data-col="cnic">
                </div>
                <div class="input-field col-sm-6 mt-3 l6">
                    <label for="passport" class="form-label">Passport No</label>
                    <input type="text" name="passport" id="passport" class="custom-autocomplete form-control" data-col="passport">
                </div>
                <div class="input-field col-sm-6 mt-3 l6">
                    <label for="postal_code" class="form-label">Postal Code</label>
                    <input type="text" name="postal_code" id="postal_code" class="form-control">
                </div>
                <div class="input-field col-sm-6 mt-3 l6">
                    <label for="guest_request" class="form-label">Guest Request</label>
                    <input type="text" name="guest_request" class="form-control" id="guest_request">
                </div>
                <div class="input-field col-sm-6 mt-3 l6">
                    <label for="language" class="form-label">Language</label>
                    <select name="language" id="language" class="form-select">
                        <option value="English">English</option>
                    </select>
                </div>
                <div class="input-field col-sm-6 mt-3 l6">
                    <label for="country" class="form-label">Country</label>
                    <select name="country" id="country" class="form-select">
                        <option value="" disabled>Select a country</option>
                        @foreach($countries as $country)
                            <option value="{{$country->CountryId}}">{{$country->CountryName}}</option>
                        @endforeach
                    </select>
                </div>
                <div class="input-field col-sm-6 mt-3 l6">
                    <label for="city" class="form-label">City</label>
                    <select name="city" id="city" class="form-select">
                        <option value="" disabled selected>Select a country first!</option>
                    </select>
                </div>
                <div class="input-field col-sm-6 mt-3 l6">
                    <label for="source" class="form-label">Source</label>
                    <select name="source" id="source" class="form-select">
                        <option value="other" selected>Other</option>
                        <option value="website">Website</option>
                        <option value="email">Email</option>
                        <option value="telephone">Telephone</option>
                        <option value="walk_in">Walk In</option>
                        <option value="web">Web</option>
                    </select>
                </div>
                <div class="input-field col-sm-6 mt-3 l6">
                    <label for="travel_agent" class="form-label">Travel Agent</label>
                    <select name="travel_agent" id="travel_agent" class="form-select">
                        <option value="" disabled selected>Select an Agent</option>
                        @foreach($travelAgents as $travelAgent)
                            <option value="{{$travelAgent->AgentId}}">{{$travelAgent->AgentName}}</option>
                        @endforeach
                    </select>
                </div>
                <div class="input-field col-sm-6 mt-3 l6">
                    <label for="company" class="form-label">Company</label>
                    <select name="company" id="company" class="form-select">
                        <option value="" disabled selected>Select a company</option>
                        @foreach($companyProfiles as $companyProfile)
                            <option value="{{$companyProfile->CompanyId}}">{{$companyProfile->CompanyName}}</option>
                        @endforeach
                    </select>
                </div>
            </div>
            <div class="row mt-5 ">
                <button type="submit" id="modal-submit" class="btn btn-success ml-2 col-sm-2 offset-s2 m2 offset-m5">Submit</button>
            </div>
        </form>
    </div>
    </div>
    </div>
    </div>
    @component('admin.includes.loader')
    @endcomponent
@endsection

@section('js')
    <script src="{{asset('js/calendar.js')}}"></script>
    <script src="{{asset('js/jquery-ui/jquery-ui.js')}}"></script>
@endsection

<style>
.datepicker-container{
        width:80% !important;
        margin:auto;
        margin-top: 10%;
        /*border:1px solid grey !important;*/
    }

    .datepicker-date-display{
        text-align:center !important;
        margin-bottom:10px;
    }
    .month-prev{
        float:left;
        border:none !important;
        background-color:#50cd89;
        width:72px !important;
        color:#ffffff !important;
        padding:10px 10px;

    }

     .month-next{
        border:none !important;
       background-color:#50cd89;
        width:72px !important;
        color:#ffffff !important;
        padding:10px 10px;

    }
    .datepicker-table-wrapper{
        margin:10 auto;
    }

    .datepicker-day-button{
        width:55px;
        border:1px solid grey;
        background-color:black;
        color:white;
    }
    .btn-flat{
        width:191px;
        border:1px solid grey;
        margin:5px auto;
        padding:5px 0px;
        background-color:black;
        color:yellow;

    }

  .datepicker-controls{
      /*display:inline !important;*/

  }
  .orig-select-month{
      float:left !important;
      width:120px;
      height:44px;
  }

  .orig-select-year{
      float:left !important;
      width:120px ;
      height:44px !important;

  }
  abbr[title] {
    text-decoration: underline dotted;
    cursor: help;
    text-decoration-skip-ink: none;
    margin-left: 20px;

}


</style>