@extends('layouts.app')

@section('content')
<section id="hero" class="hero section dark-background">
    <img src="assets/img/hero-bg-2.jpg" alt="" class="hero-bg">
    <div class="container">
        <div class="row gy-4 justify-content-between">
            <div class="col-lg-4 order-lg-last hero-img aos-init aos-animate" data-aos="zoom-out" data-aos-delay="100">
                <!--                     <img src="assets/img/hero-img.png" class="img-fluid animated" alt="">-->
            </div>
            <div class="col-lg-6 d-flex flex-column justify-content-center aos-init aos-animate" data-aos="fade-in">
                <h1>Choose your slot <span>and start playing</span></h1>
                <!--            <p><strong>Facilities: </strong>parking spot, waiting room, toilet.</p>-->
                <!--
                        <div class="d-flex">
                          <a href="#about" class="btn-get-started">Get Started</a>
                          <a href="#" class="glightbox btn-watch-video d-flex align-items-center"><i class="bi bi-play-circle"></i><span>Watch Video</span></a>
                        </div>
                        -->
            </div>
        </div>
    </div>
    <svg class="hero-waves" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
        viewBox="0 24 150 28 " preserveAspectRatio="none">
        <defs>
            <path id="wave-path" d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z"></path>
        </defs>
        <g class="wave1">
            <use xlink:href="#wave-path" x="50" y="3"></use>
        </g>
        <g class="wave2">
            <use xlink:href="#wave-path" x="50" y="0"></use>
        </g>
        <g class="wave3">
            <use xlink:href="#wave-path" x="50" y="9"></use>
        </g>
    </svg>
</section>

<section class="section">
    @foreach($grounds as $ground)
    <div class="container aos-init aos-animate" style="
    padding-bottom: 20px;
" data-aos="fade-up" data-aos-delay="100">
       <div class="row">
          <div class="col-xl-12">
             <div class="ground-dtls">
                <div class="ground-img" style="
                    background-image: url(assets/img/turf.jpg);
                    background-size: cover;
                    background-position: center;">
                    
                </div>
                <div class="ground-desc">
                    <a href="{{ route('booking.show', $ground->id) }}"><h2>{{ $ground->name }}</h2></a>
                    <div class="location">
                        <ul>
                            <li><i class="bi bi-geo-alt"></i>Port Alsworth, AK</li>
                            <!-- Check if time-based pricing exists -->
                            @if($ground->prices->isNotEmpty())
                                @php
                                    $minPrice = $ground->prices->min('price');
                                    $maxPrice = $ground->prices->max('price');
                                @endphp
                                <!-- Display the price range -->
                                <li><i class="bi bi-clock"></i>Price Range: {{ $minPrice }} - {{ $maxPrice }} /hr</li>
                            @else
                                <!-- If no time-based pricing, show default price -->
                                <li><i class="bi bi-clock"></i>Default Price: {{ $ground->price }} /hr</li>
                            @endif
                            
                        </ul>
                    </div>
                   <div class="type">
                      <ul>
                        @foreach($ground->types as $types)
                        <li class=""><img src="assets/img/cricket.png" alt="">{{$types}}</li>
                        @endforeach
                      </ul>
                   </div>
                   <div class="facilities">
                     <label>Facilities:</label>
                      <ul>
                        @php
                            $facilities = explode(',', $ground->facilities);
                        @endphp

                        @foreach($facilities as $facility)
                            <li><i class="bi bi-check-circle-fill"></i>{{ trim($facility) }}</li>
                        @endforeach
                      </ul>
                   </div>
                   <div class="time-location-bg">

                      <div class="booknow">
                          <a class="btn btn-default" href="{{ route('booking.show', $ground->id) }}">Book Now</a>
                      </div>
                   </div>
                </div>
             </div>
          </div>
       </div>
    </div>
    @endforeach
 </section>

@endsection