@extends('layouts.app')

@section('title', __('lang.home_title'))

@section('content')
<main class="main-content">
  <section class="hero-section">
    <div class="container">
      <div class="hero-content banner-content">
        <h1 class="hero-title home-title"><span>{{ __('lang.hero_title_line_1') }}</span><br>{{ __('lang.hero_title_line_2') }}</h1>
        <p class="hero-subtitle">{{ __('lang.hero_subtitle') }}</p>
      </div>
    </div>
  </section>

  <section class="search-section">
    <div class="container">
      <div class="search-card ride-tabs">
        <div class="search-tabs  for-ride-tab">
          <button class="search-tab for-ride-tab-type active" data-tab="find-ride">{{ __('lang.find_ride_tab') }}</button>
          <button class="search-tab for-ride-tab-type" data-tab="publish-ride">{{ __('lang.publish_ride_tab') }}</button>
        </div>

        @include('home_component.findRide')
        @include('home_component.publishRide')
      </div>

      <div id="ride-results-container" style="display: none; margin-top: 20px;">
        <div class="ride-results-header">
          <h3>{{ __('lang.available_rides') }}</h3>
          <div class="ride-results-controls">
            <div class="search-control">
              <input type="text" id="ride-search" placeholder="{{ __('lang.search_placeholder') }}" class="form-control">
            </div>
            <div class="sort-control">
              <label for="ride-sort">{{ __('lang.sort_by') }}</label>
              <select id="ride-sort" class="form-control">
                <option value="departure-asc">{{ __('lang.sort_departure_asc') }}</option>
                <option value="departure-desc">{{ __('lang.sort_departure_desc') }}</option>
                <option value="price-asc">{{ __('lang.sort_price_asc') }}</option>
                <option value="price-desc">{{ __('lang.sort_price_desc') }}</option>
                <option value="seats-asc">{{ __('lang.sort_seats_asc') }}</option>
                <option value="seats-desc">{{ __('lang.sort_seats_desc') }}</option>
              </select>
            </div>
          </div>
        </div>

        <div id="ride-results-list" class="ride-results-list">
          <!-- Rides will be populated here -->
        </div>

        <div id="no-rides-message" style="display: none;" class="alert alert-info">
          {{ __('lang.no_rides_message') }}
        </div>
      </div>
    </div>
  </section>
</main>
@endsection

@section('script')
  @yield('findRide-script')
  @yield('publishRide-script')
@endsection