@extends('layouts.app')

@section('title', 'Tambah Meja Restoran - Hotel Management System')
@section('page-title', 'Tambah Meja Restoran')

@section('page-actions')
<div class="btn-toolbar mb-2 mb-md-0">
    <a href="{{ route('restaurant-tables.index') }}" class="btn btn-secondary">
        <i class="fas fa-arrow-left me-2"></i>Kembali
    </a>
</div>
@endsection

@section('content')
<div class="row justify-content-center">
    <div class="col-lg-8">
        <div class="card shadow">
            <div class="card-header py-3">
                <h6 class="m-0 font-weight-bold text-primary">
                    <i class="fas fa-plus me-2"></i>Form Tambah Meja Restoran
                </h6>
            </div>
            <div class="card-body">
                <form action="{{ route('restaurant-tables.store') }}" method="POST">
                    @csrf
                    
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="table_number" class="form-label">
                                    Nomor Meja <span class="text-danger">*</span>
                                </label>
                                <input type="text" 
                                       class="form-control @error('table_number') is-invalid @enderror" 
                                       id="table_number" 
                                       name="table_number" 
                                       value="{{ old('table_number') }}" 
                                       placeholder="Contoh: A1, B2, VIP1" 
                                       required>
                                @error('table_number')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                                <div class="form-text">Nomor meja harus unik dan mudah diingat</div>
                            </div>
                        </div>
                        
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="capacity" class="form-label">
                                    Kapasitas <span class="text-danger">*</span>
                                </label>
                                <input type="number" 
                                       class="form-control @error('capacity') is-invalid @enderror" 
                                       id="capacity" 
                                       name="capacity" 
                                       value="{{ old('capacity') }}" 
                                       min="1" 
                                       max="20" 
                                       required>
                                @error('capacity')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                                <div class="form-text">Jumlah maksimal orang yang bisa duduk</div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="mb-3">
                        <label for="description" class="form-label">Deskripsi</label>
                        <textarea class="form-control @error('description') is-invalid @enderror" 
                                  id="description" 
                                  name="description" 
                                  rows="3" 
                                  placeholder="Contoh: Meja dekat jendela, Meja untuk keluarga besar, dll">{{ old('description') }}</textarea>
                        @error('description')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                        <div class="form-text">Deskripsi opsional untuk membantu identifikasi meja</div>
                    </div>
                    
                    <div class="row">
                        <div class="col-12">
                            <div class="d-flex justify-content-between">
                                <a href="{{ route('restaurant-tables.index') }}" class="btn btn-secondary">
                                    <i class="fas fa-times me-2"></i>Batal
                                </a>
                                <button type="submit" class="btn btn-primary">
                                    <i class="fas fa-save me-2"></i>Simpan Meja
                                </button>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
        
        <!-- Help Card -->
        <div class="card shadow mt-4">
            <div class="card-header py-3">
                <h6 class="m-0 font-weight-bold text-info">
                    <i class="fas fa-info-circle me-2"></i>Tips Penamaan Meja
                </h6>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-md-6">
                        <h6>Contoh Penamaan:</h6>
                        <ul class="list-unstyled">
                            <li><strong>A1, A2, A3</strong> - Meja area A</li>
                            <li><strong>B1, B2, B3</strong> - Meja area B</li>
                            <li><strong>VIP1, VIP2</strong> - Meja VIP</li>
                            <li><strong>W1, W2</strong> - Meja dekat jendela</li>
                        </ul>
                    </div>
                    <div class="col-md-6">
                        <h6>Kapasitas Meja:</h6>
                        <ul class="list-unstyled">
                            <li><strong>1-2 orang</strong> - Meja romantis</li>
                            <li><strong>3-4 orang</strong> - Meja keluarga kecil</li>
                            <li><strong>5-6 orang</strong> - Meja keluarga besar</li>
                            <li><strong>7+ orang</strong> - Meja grup/perusahaan</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection