<?= $this->extend('layouts/main') ?>
<?= $this->section('content') ?>

<h1 class="h3 mb-3">New Order</h1>

<div class="card shadow-sm" style="max-width: 480px;">
    <div class="card-body">
        <form action="<?= site_url('pos/orders') ?>" method="post">
            <?= csrf_field() ?>

            <div class="mb-3">
                <label class="form-label">Order Type</label>
                <select class="form-select" name="order_type" id="order_type" required onchange="document.getElementById('table_wrap').style.display = this.value === 'dine_in' ? 'block' : 'none';">
                    <?php foreach ($lookups->posOrderTypes as $key => $meta): ?>
                        <option value="<?= esc($key) ?>"><?= esc($meta['label']) ?></option>
                    <?php endforeach; ?>
                </select>
            </div>

            <div class="mb-3" id="table_wrap">
                <label class="form-label">Table</label>
                <select class="form-select" name="dining_table_id">
                    <option value="">Select a table</option>
                    <?php foreach ($tables as $table): ?>
                        <option value="<?= $table->id ?>"><?= esc($table->table_number) ?> — <?= esc($table->area_name) ?></option>
                    <?php endforeach; ?>
                </select>
            </div>

            <div class="d-flex gap-2">
                <button type="submit" class="btn btn-primary">Start Order</button>
                <a href="<?= site_url('pos/orders') ?>" class="btn btn-outline-secondary">Cancel</a>
            </div>
        </form>
    </div>
</div>

<?= $this->endSection() ?>
