<?= $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>Edit Shop Category</h1>
      </div>
    </div>
  </div>
</section>

<section class="content">
<?php echo form_open('rewarderShopCategories/update/'.$category->id, ['class' => 'form-validate', 'autocomplete' => 'off', 'enctype' => 'multipart/form-data']); ?>
  <div class="card">
    <div class="card-body">
      <div class="form-group">
        <label>Name</label>
        <input type="text" class="form-control" name="name" value="<?php echo esc($category->name) ?>" required autofocus>
      </div>
      <div class="form-group">
        <label>Thumbnail / Icon</label>
        <input type="file" class="form-control" name="icon" accept="image/*" onchange="previewImage(this, '#iconPreview')">
        <div class="mt-2" id="iconPreview" style="<?php echo !empty($category->img_type) ? '' : 'display:none;' ?>">
          <img src="<?php echo !empty($category->img_type) ? urlUpload('shop_categories/'.$category->id.'.'.$category->img_type, true) : '' ?>" style="max-height: 80px;">
        </div>
      </div>
      <div class="form-group">
        <label>Status</label>
        <select name="status" class="form-control">
          <option value="1" <?php echo $category->status ? 'selected' : '' ?>>Active</option>
          <option value="0" <?php echo !$category->status ? 'selected' : '' ?>>Inactive</option>
        </select>
      </div>
    </div>
    <div class="card-footer">
      <div class="row">
        <div class="col"><a href="<?php echo url('rewarderShopCategories') ?>" 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">Save</button></div>
      </div>
    </div>
  </div>
<?php echo form_close(); ?>
</section>

<?= $this->endSection() ?>
<?= $this->section('js') ?>
<script>
  $(document).ready(function() {
    $('.form-validate').validate();
  });

  function previewImage(input, previewDom) {
    if (input.files && input.files[0]) {
      $(previewDom).show();
      var reader = new FileReader();
      reader.onload = function(e) {
        $(previewDom).find('img').attr('src', e.target.result);
      }
      reader.readAsDataURL(input.files[0]);
    } else {
      $(previewDom).hide();
    }
  }
</script>
<?= $this->endSection() ?>

