@extends('layout')

@push('head')
    <link rel="stylesheet" href="{{ asset('css/seat-chooser.css') }}">
    <script src="{{ asset('js/seat-chooser.js') }}" defer></script>
@endpush

<div id="load-screen">
    <div id="loading">
        <div class="spinner"></div>
        <div class="loading-text">Loading...</div>
    </div>
</div>

<div class="seat-chooser">
    @foreach($seatmatrix as $row)
        <div class="row">
            @foreach($row as $seat)
                @if($seat)
                    <div class="seat @if($seat->isReserved($showing_id)) reserved @endif"
                         data-seat-id="{{ $seat->seat_id }}"
                         data-seat-status="{{ $seat->seat_status }}"
                         data-seat-row="{{ $seat->seat_row }}"
                         data-seat-column="{{ $seat->seat_column }}">
                        <div class="seat-number">{{ $seat->seat_row }}-{{ $seat->seat_column }}</div>
                    </div>
                @else
                    <div class="no-seat"></div>
                @endif
            @endforeach
        </div>
    @endforeach
</div>