<?= $this->extend('frontend/layout/default') ?>
<?= $this->section('content') ?>

<section class="content-header">
  <div class="container-fluid">
    <div class="row mb-2">
      <div class="col-sm-6">
        <h1>New Order</h1>
      </div>
    </div>
  </div>
</section>

<section class="content">
  <div class="container-fluid">
    <?php echo form_open('shopkeeper/orders/save', ['class' => 'form-validate', 'autocomplete' => 'off']); ?>
      <div class="card">
        <div class="card-body">
          <div class="form-group">
            <label>Customer</label>
            <select name="customer_id" class="form-control select2" required>
              <option value="">Select</option>
              <?php foreach ($customers as $c): ?>
                <option value="<?php echo $c->id ?>"><?php echo esc($c->name) ?> (<?php echo esc($c->username ?? $c->email) ?>)</option>
              <?php endforeach ?>
            </select>
          </div>

          <div class="form-row">
            <div class="form-group col-md-4">
              <label>Item Type</label>
              <select name="item_type" id="item_type" class="form-control" required>
                <option value="PRODUCT" selected>PRODUCT</option>
                <option value="SERVICE">SERVICE</option>
              </select>
            </div>
            <div class="form-group col-md-6">
              <label>Item</label>
              <select name="item_id" id="item_id_product" class="form-control select2 item-select" required>
                <option value="">Select product</option>
                <?php foreach ($products as $p): ?>
                  <option value="<?php echo $p->id ?>"><?php echo esc($p->name) ?> (<?php echo esc($p->price) ?>)</option>
                <?php endforeach ?>
              </select>
              <select name="item_id_service" id="item_id_service" class="form-control select2 item-select d-none">
                <option value="">Select service</option>
                <?php foreach ($services as $s): ?>
                  <option value="<?php echo $s->id ?>"><?php echo esc($s->name) ?> (<?php echo esc($s->price) ?>)</option>
                <?php endforeach ?>
              </select>
            </div>
            <div class="form-group col-md-2">
              <label>Qty</label>
              <input type="number" min="1" name="quantity" class="form-control" value="1" required>
            </div>
          </div>

          <small class="text-muted">Discount and points are auto-calculated from active rules.</small>
        </div>
        <div class="card-footer">
          <div class="row">
            <div class="col"><a href="<?php echo url('shopkeeper/orders') ?>" class="btn btn-flat btn-danger" onclick="return confirm('Leave without saving?')">Cancel</a></div>
            <div class="col text-right"><button type="submit" class="btn btn-flat btn-primary">Create</button></div>
          </div>
        </div>
      </div>
    <?php echo form_close(); ?>
  </div>
</section>

<?= $this->endSection() ?>
<?= $this->section('js') ?>
<script>
  function syncItemField() {
    var type = $('#item_type').val();
    $('.item-select').addClass('d-none').prop('disabled', true).removeAttr('name');
    if (type === 'PRODUCT') {
      $('#item_id_product').removeClass('d-none').prop('disabled', false).attr('name', 'item_id');
    } else {
      $('#item_id_service').removeClass('d-none').prop('disabled', false).attr('name', 'item_id');
    }
  }
  $(document).ready(function() {
    $('.form-validate').validate();
    $('.select2').select2();
    syncItemField();
    $('#item_type').on('change', syncItemField);
  });
</script>
<?= $this->endSection() ?>

