Oh wow! I had not seen the $loop variable before! That's so cool!
I have been messing around with it, and it actually does what i asked for, but apparently it does not fix my problem.
I have this code right here:
<ul>
<li class="grid-rows-1">Links</li>
<li class="grid-rows-1">Links</li>
<li class="grid-rows-1">Links</li>
<li class="grid-rows-1">Links</li>
</ul>
<div>
<label for="dateSelector"></label>
<input type="date" class="" id="dateSelector" onchange="selectedDate()"
value="{{$selectedTime->toDateString()}}">
</div>
</div>
<select multiple class="w-60 " id="room_selector">
<!-- DATE SELECTOR -->
@foreach($rooms->sortBy('id') as $room)
<option value="{{ $room->id }}"
id="" {{$selectedRoom->id == $room->id ? 'selected' : ''}}>{{ $room->id }} </option>
@endforeach
</select>
<button type="submit" class="h-8 tp-2 text-center align-middle">Submit</button>
@if($roomSelector)
</div>
<div class=" grid grid-cols-7 w-5/6 ml-auto">
@foreach($weekdays as $weekday)
<div>
<div id="days" class="relative h-40 bg-neutral-50"> <!-- HERE -->
{{ $weekday->weekday->format('l jS \ F Y') }}
<div id="day" class="static "> <!-- HERE -->
@foreach($weekday->hours as $hour)
<div class="absolute -left-1/4 mr-6">
@if($loop->iteration >= 4)
{{ $hour->hour->format('H:i') }}
@endif
</div>
<div class="block relative timeslot timeslot{{ $hour->hour }} text-center"
data-value="{{ $hour->hour->toDateTimeString() }}">
<div class="z-40 grid-cols-1">
<button onclick="openForm(event)"
class="flex justify-center text-center bg-green-500 w-3/4 h-12 {{$bookings->some(fn ($booking) => $booking->isHourBooked($hour->hour)) ? 'redInfoButton bg-red-600 cursor-not-allowed' : 'bg-white-500'}}"
@if($bookings->some(fn ($booking) => $booking->isHourBooked($hour->hour)))
<button>Booked</button>
<!-- Can add modification etc. - Also: I can make a condition with some serverside information, so i only get the notebar once(?) -->
<!-- So like - if user_id is there, then only render once. -->
@else
<p></p>
@endif
</div>
@unless($bookings->some(fn ($booking) => $booking->isHourBooked($hour->hour)))
<x-popupform class="openClose" :user="$user" :hour="$hour"></x-popupform>
@endunless
</div>
@endforeach
</div>
</div>
</div>
@endforeach
</div>
It is basically a calendar where people can book rehearsal spaces. I thought that i wanted a horizontal design, but i have changed it, because i think the vertical design will be better for the user.
My problem is due to the loops. Everytime a create a new timeslot, it also create the time. So for each timeslot, it also creates the time for that specific timeslot (so the first 7 timeslots are 00:00 for each day of the week).
I only want to display the time to the left of the timeslots once. (For example just like in the Apple calendar app in the week view).
Do you, or anybody have a suggestion how to design that in the best way?