@extends('layouts.pages')

@section('title', 'Home - The LaLiT Hotels')

@section('nav-home', 'active')
@section('content')

<style>
    body {
    background: #f8f6f3;
}

.booking-card {
    max-width: 700px;
    margin: auto;
    background: #f2ece5;
    border: 1px solid #e4d9cb;
    border-radius: 16px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
}

.card-header {
    background: #c6aa76;
    color: #fff;
    font-size: 22px;
    font-weight: 600;
    text-align: center;
    padding: 18px;
    border-radius: 16px 16px 0 0 !important;
}

.card-body {
    padding: 2rem;
}

.form-label {
    color: #5c4630;
    font-weight: 600;
}

.form-control,
.form-select {
    border: 1px solid #d8c8b5;
    background: #fff;
    border-radius: 8px;
}

.form-control:focus,
.form-select:focus {
    border-color: #c6aa76;
    box-shadow: 0 0 0 0.2rem rgba(140, 107, 63, 0.2);
}

.btn-book {
    background: #c6aa76;
    border-color: #c6aa76;
    color: #fff;
    padding: 12px;
    font-size: 18px;
    font-weight: 600;
}

.btn-book:hover {
    background: #735632;
    border-color: #735632;
}
</style>

<div class="container py-5">

    <div class="card booking-card">

        <div class="card-header">
            Check Hotel Availability
        </div>

        <div class="card-body p-4">

            <form method="POST"
                  action="{{ route('booking-submit') }}"
                  id="lalit-checkavailability">
                @csrf
                <div class="row g-3">
                    <div class="col-md-12">
                        <label for="hotel" class="form-label">Hotel</label>
                        <select id="hotel" class="form-select" name="hotel" required>
                            <option value="">Select Hotel</option>
                            <option value="bangalore">The LaLiT Ashok Bangalore</option>
                            <option value="chandigarh">The LaLiT Chandigarh</option>
                            <option value="goa">The LaLiT Golf & Spa Resort Goa</option>
                            <option value="srinagar">The LaLiT Grand Palace Srinagar</option>
                            <option value="kolkata">The LaLiT Great Eastern Kolkata</option>
                            <option value="jaipur">The LaLiT Jaipur</option>
                            <option value="udaipur">The LaLiT Laxmi Vilas Palace Udaipur</option>
                            <option value="mangar">The LaLiT Mangar</option>
                            <option value="mumbai">The LaLiT Mumbai</option>
                            <option value="delhi">The LaLiT New Delhi</option>
                            <option value="bekal">The LaLiT Resort & Spa Bekal</option>
                            <option value="khajuraho">The LaLiT Temple View Khajuraho</option>
                        </select>
                    </div>

                    <div class="col-md-6">
                        <label class="form-label">Check-In</label>
                        <input type="date" class="form-control" name="checkin" required>
                    </div>

                    <div class="col-md-6">
                        <label class="form-label">Check-Out</label>
                        <input type="date" class="form-control" name="checkout" required>
                    </div>

                    <div class="col-md-4">
                        <label for="adults" class="form-label">Adults</label>
                        <select id="adults" class="form-select" name="adults">
                                                          <option value="1">1</option>
                                                          <option value="2">2</option>
                                                          <option value="3">3</option>
                                                          <option value="4">4</option>
                                                          <option value="5">5</option>
                                                          <option value="6">6</option>
                                                    </select>
                    </div>

                    <div class="col-md-4">
                        <label for="children" class="form-label">Children</label>
                        <select id="children" class="form-select" name="children">
                                                          <option value="0">0</option>
                                                          <option value="1">1</option>
                                                          <option value="2">2</option>
                                                          <option value="3">3</option>
                                                          <option value="4">4</option>
                                                          <option value="5">5</option>
                                                          <option value="6">6</option>
                                                    </select>
                    </div>

                    <div class="col-md-4">
                        <label for="rooms" class="form-label">Rooms</label>
                        <select id="rooms" class="form-select" name="rooms">
                                                          <option value="1">1</option>
                                                          <option value="2">2</option>
                                                          <option value="3">3</option>
                                                          <option value="4">4</option>
                                                          <option value="5">5</option>
                                                    </select>
                    </div>

<!--                    <div class="col-md-12">
                        <label for="promoCode" class="form-label">Promo Code (Optional)</label>
                        <input type="text"
                               class="form-control"
                               name="promoCode"
                               placeholder="Enter Promo Code">
                    </div>-->

                </div>

                <!-- Hidden Fields -->

                <input type="hidden"
                       name="ssoSessionId"
                       value="1790633277_sespsm_1">

                <input type="hidden"
                       name="returnUrl"
                       value="{{ route('booking-return') }}">

                <input type="hidden"
                       name="locale"
                       value="en-IN">

                <input type="hidden"
                       name="channel"
                       value="web">

                <!-- Add memberId when logged in -->
                <!--
                <input type="hidden"
                       name="memberId"
                       value="">
                -->

                <div class="d-grid mt-4">
                    <button type="submit" class="btn btn-primary btn-lg btn-book">
                        Check Availability
                    </button>
                </div>

            </form>

        </div>

    </div>

</div>

<script>
  document.addEventListener('DOMContentLoaded', function () {

      let checkin = document.querySelector('[name="checkin"]');
      let checkout = document.querySelector('[name="checkout"]');

      let today = new Date().toISOString().split('T')[0];

      checkin.min = today;

      checkin.addEventListener('change', function () {
          checkout.min = this.value;

          if (checkout.value < this.value) {
              checkout.value = '';
          }
      });

  });
</script>

@endsection