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

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

<section class="content">
<?php echo form_open('rewarderOrders/save', ['class' => 'form-validate', 'autocomplete' => 'off']); ?>
  <div class="card">
    <div class="card-body">
      <div class="form-group">
        <label>Shop</label>
        <select id="shop_id" name="shop_id" class="form-control select2" required>
          <option value="">Select</option>
          <?php foreach ($shops as $s): ?>
            <option value="<?php echo $s->id ?>"><?php echo esc($s->name) ?></option>
          <?php endforeach ?>
        </select>
      </div>

      <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 ?>" data-shop="<?php echo $p->shop_id ?>"><?php echo esc($p->name) ?> (<?php echo esc($p->price) ?>)</option>
            <?php endforeach ?>
          </select>
          <select id="item_id_service" class="form-control select2 item-select d-none" disabled>
            <option value="">Select service</option>
            <?php foreach ($services as $s): ?>
              <option value="<?php echo $s->id ?>" data-shop="<?php echo $s->shop_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('rewarderOrders') ?>" 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(); ?>
</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');
    }
    $('.item-select.select2-hidden-accessible').trigger('change.select2');
  }
  function filterItemsByShop(shopId) {
    $('#item_id_product option, #item_id_service option').each(function() {
      var s = $(this).data('shop');
      if (!s) return;
      $(this).toggle(String(s) === String(shopId));
    });
    $('#item_id_product, #item_id_service').each(function() {
      if ($(this).find('option:selected').length && !$(this).find('option:selected').is(':visible')) {
        $(this).val('');
      }
      $(this).trigger('change.select2');
    });
  }
  $(document).ready(function() {
    $('.form-validate').validate();
    $('.select2').select2();
    syncItemField();
    filterItemsByShop($('#shop_id').val());
    $('#item_type').on('change', syncItemField);
    $('#shop_id').on('change', function() {
      filterItemsByShop($(this).val());
    });
  });
</script>
<?= $this->endSection() ?>

