@extends('layouts/web')

@section('content')

    <div class="container-fluid">
        @include('customer.partials.header')

        <div class="row mx-2">
            <div class="col-12">
                <div class="page-title-box">
                    <h4 class="page-title mt-4" style="border-top: 1px solid #999">{{ __('ALL GAMES') }}</h4>
                </div>
            </div>
        </div>

        <div class="mx-2">
            @forelse ($rooms as $room)
                <a class="d-block text-white p-3 mb-3" style="border: 2px solid #ffffff99; border-radius: 10px" href="{{ route('customer.rooms.show', $room->getRouteKey()) }}">
                    <div class="row d-flex justify-content-between align-items-center">
                        <div class="col text-start">
                            <div class="text-center rounded-circle" style="border: 3px solid #5489d3; font-size: 1.5rem; height: 50px; width: 50px; line-height: 50px;">{{ $room->price_per_lot + 0 }}</div>
                        </div>
                        <div class="col text-wrap">
                            <div style="font-size: calc(1.1rem + 0.1vw);">{{ $room->name }}</div>
                        </div>
                        <div class="col text-end text-wrap">
                            <span style="font-size: calc(1.1rem + 0.1vw);"><i class="mdi mdi-clock-outline"></i>
                                @if ($round = $room->activeRound->first())
                                    @if ($round->end_at)
                                        {{ $round->end_at->format('h:ia') }}
                                    @endif
                                @else
                                    {{ __('N/A') }}
                                @endif
                            </span>
                        </div>
                    </div>
                </a>
            @empty
                <div class="container rounded-pill border w-100 py-2 px-2 d-flex align-items-center justify-content-between">
                    <div class="col-12 text-center">
                        <label>{{ __('There are no games right now.') }}</label>
                    </div>
                </div>
            @endforelse
        </div>
    </div>
@endsection