@extends('layouts.main')

@section('title', 'Mesas')

@section('content')
<div class="d-flex justify-content-between align-items-center mb-4">
    <h1 class="mb-0">Mesas</h1>
    <a href="/mesas/criar" class="btn btn-primary">Adicionar Mesa</a>
</div>

<div class="row">
    @foreach ($mesas as $mesa)
    <div class="col-md-3 mb-4">
        <div class="card text-center" style="background-color: {{ $mesa->status == 'ocupada' ? '#dc3545' : ($mesa->status == 'reservada' ? '#ffc107' : '#198754') }}; color: white;">
            <div class="card-body">
                <h5 class="card-title">{{ $mesa->nome }}</h5>
                <p class="card-text">Capacidade: {{ $mesa->capacidade }}</p>
                <p class="card-text">Status: {{ ucfirst($mesa->status) }}</p>
                <hr>
                
                <form action="/mesas/{{ $mesa->id }}" method="POST">
                    @csrf
                    @method('DELETE') <button type="submit" class="btn btn-danger btn-sm" onclick="return confirm('Tem certeza que deseja remover esta mesa?')">Remover Mesa</button>
                </form>

            </div>
        </div>
    </div>
    @endforeach
</div>
@endsection