@extends('layouts.public')

@section('title', 'Restaurants, Bars & Cafes - The LaLiT Dining Club')

@section('styles')
  <style>
    /* Restaurants Page Specific Styles */
    .restaurants-container {
      max-width: 1400px;
      margin: 120px auto 60px;
      padding: 0 2rem;
    }

    .restaurants-header {
      text-align: center;
      margin-bottom: 4rem;
    }

    .restaurants-header h1 {
      font-family: "Figtree", sans-serif;
      font-size: 2.5rem;
      color: #1a1a1a;
      margin-bottom: 0.5rem;
    }

    .restaurants-header p {
      font-size: 1.1rem;
      color: #555;
      max-width: 700px;
      margin: 0 auto;
    }

    .restaurants-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
      gap: 2.5rem;
      margin-bottom: 4rem;
    }

    .restaurant-card {
      background: #e8e8e8;
      border-radius: 12px;
      overflow: hidden;
      box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
      transition: transform 0.3s, box-shadow 0.3s;
      cursor: pointer;
    }

    .restaurant-card:hover {
      transform: translateY(-10px);
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    }

    .restaurant-image {
      width: 100%;
      height: 320px;
      overflow: hidden;
      position: relative;
    }

    .restaurant-image img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform 0.3s;
    }

    .restaurant-card:hover .restaurant-image img {
      transform: scale(1.05);
    }

    .restaurant-content {
      background: #e8e8e8;
      color: #000;
      padding: 2rem;
      position: relative;
    }

    .restaurant-location {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      margin-bottom: 1rem;
      font-size: 0.9rem;
      color: #000;
    }

    .restaurant-location i {
      color: #d42427;
    }

    .restaurant-name {
      font-family: "Figtree", sans-serif;
      font-size: 2rem;
      font-weight: 600;
      margin-bottom: 1.2rem;
      letter-spacing: 3px;
      color: #000;
    }

    .restaurant-description {
      font-size: 0.95rem;
      line-height: 1.7;
      margin-bottom: 1.5rem;
      color: #000;
    }

    .restaurant-address {
      display: flex;
      align-items: flex-start;
      gap: 0.8rem;
      margin-bottom: 1rem;
      font-size: 0.9rem;
      color: #000;
    }

    .restaurant-address i {
      color: #d42427;
      margin-top: 0.2rem;
    }

    .restaurant-info {
      display: flex;
      align-items: center;
      gap: 0.8rem;
      margin-bottom: 0.8rem;
      font-size: 0.9rem;
      color: #000;
    }

    .restaurant-info i {
      color: #d42427;
      font-size: 0.85rem;
    }

    .no-restaurants {
      grid-column: 1 / -1;
      text-align: center;
      padding: 3rem;
      font-size: 1.1rem;
      color: #666;
    }

    .view-btn {
      display: inline-flex;
      align-items: center;
      gap: 0.8rem;
      background: #d42427;
      color: #fff;
      padding: 0.75rem 1.8rem;
      border: none;
      border-radius: 30px;
      font-weight: 600;
      letter-spacing: 1px;
      cursor: pointer;
      transition: all 0.3s;
      text-decoration: none;
      font-size: 0.9rem;
      margin-top: 1rem;
    }

    .view-btn:hover {
      background: #c49b2e;
      transform: translateX(5px);
    }

    .view-btn i {
      font-size: 1rem;
      transition: transform 0.3s;
    }

    .view-btn:hover i {
      transform: translateX(5px);
    }

    @media (max-width: 768px) {
      .restaurants-container {
        margin-top: 100px;
      }

      .restaurants-header h1 {
        font-size: 2rem;
      }

      .restaurants-grid {
        grid-template-columns: 1fr;
      }

      .restaurant-image {
        height: 250px;
      }

      .restaurant-content {
        padding: 1.5rem;
      }

      .restaurant-name {
        font-size: 1.6rem;
      }
    }
  </style>
@endsection

@section('content')
  <!-- Page Banner -->
  <section class="page-banner">
    <div class="page-banner-container">
      <div class="page-banner-content">
        <h1>RESTAURANTS,<br>BARS & <em>CAFES</em></h1>
        <p>Explore our collection of exceptional dining venues.</p>
      </div>
      <div class="page-banner-image">
        <img src="{{ asset('assets/images/restaurants.jpg') }}" alt="Restaurants">
      </div>
    </div>
  </section>

  <!-- Restaurants Content -->
  <div class="restaurants-container">
    <div class="restaurants-header">
      <h1>Restaurants, Bars & CAFES</h1>
      <p>Explore our collection of exceptional dining venues and wellness destinations across The LaLiT properties</p>
    </div>

    <!-- Search Filters -->
    <form method="GET" action="{{ route('restaurants') }}">
      <div class="search-filters">
        <div class="search-input-wrapper">
          <i class="fas fa-search"></i>
          <input type="text" name="keyword" placeholder="Search by Keyword" class="search-input" value="{{ request('keyword') }}">
          <button type="submit" class="search-btn">
            <i class="fas fa-arrow-right"></i>
          </button>
        </div>
        <div class="search-input-wrapper">
          <i class="fas fa-location-dot"></i>
          <select name="hotel_id" class="search-select" onchange="this.form.submit()">
            <option value="">Search by Location</option>
            @foreach($hotels as $hotel)
              <option value="{{ $hotel->id }}" {{ request('hotel_id') == $hotel->id ? 'selected' : '' }}>
                {{ $hotel->location }}
              </option>
            @endforeach
          </select>
          <button type="submit" class="search-btn">
            <i class="fas fa-arrow-right"></i>
          </button>
        </div>
      </div>
    </form>

    <div class="restaurants-grid">
      @forelse($restaurants as $restaurant)
        <div class="restaurant-card" onclick="window.location.href='{{ url('/restaurants/' . $restaurant->id) }}'">
          <div class="restaurant-image">
            <img src="{{ $restaurant->image_url }}" alt="{{ $restaurant->title }}">
          </div>
          <div class="restaurant-content">
            <div class="restaurant-location">
              <i class="fas fa-map-marker-alt"></i>
              <span>{{ $restaurant->hotel ? $restaurant->hotel->location : 'Location not set' }}</span>
            </div>
            <h2 class="restaurant-name">{{ strtoupper($restaurant->title) }}</h2>
            {{-- <p class="restaurant-description">{{ \Illuminate\Support\Str::words($restaurant->description, 15, '...') }}</p> --}}
            
            @if($restaurant->cuisine)
              <div class="restaurant-info">
                <i class="fas fa-utensils"></i>
                <span><strong>Cuisine:</strong> {{ $restaurant->cuisine }}</span>
              </div>
            @endif
            
            @if($restaurant->type)
              <div class="restaurant-info">
                <i class="fas fa-tag"></i>
                <span><strong>Type:</strong> {{ $restaurant->type }}</span>
              </div>
            @endif
            
            @if($restaurant->enquiry_contact_no)
              <div class="restaurant-info">
                <i class="fas fa-phone"></i>
                <span><strong>Enquiry:</strong> {{ $restaurant->enquiry_contact_no }}</span>
              </div>
            @endif
            
            <div class="restaurant-address">
              <i class="fas fa-location-dot"></i>
              <span>{{ $restaurant->hotel ? $restaurant->hotel->location : 'Location not set' }}</span>
            </div>
            <a href="{{ url('/restaurants/' . $restaurant->id) }}" class="view-btn">
              MORE DETAILS
              <i class="fas fa-arrow-right"></i>
            </a>
          </div>
        </div>
      @empty
        <div class="no-restaurants">
          <p>No restaurants available at the moment.</p>
        </div>
      @endforelse
    </div>
  </div>
@endsection