<div class="row">
  <div class="col-sm-12">
    <p><a href="<?= base_url('admin/flashsale'); ?>"><i class="fa fa-arrow-left" aria-hidden="true"></i> Kembali ke halaman daftar Flashsale </a></p><br>
    <h4><?= empty($flashsale->id) ? 'Tambah flashsale baru' : 'Edit flashsale: '
          . $flashsale->flashsale_id; ?></h4>
    <?= $this->session->flashdata('success'); //to display success message 
    ?>
    <?= $this->session->flashdata('result'); //to display result message 
    ?>
  </div><!-- end class="col-sm-12" -->
</div> <!-- end row -->
<?= form_open_multipart(); ?>

<div class="row timePromo">
  <div class="col-sm-3">
    <p>Waktu Mulai<sup>*</sup></p>
  </div><!-- end class="col-sm-3" -->

  <div class="col-sm-9">
    <input readonly="true" required class="datetimepicker1 form-control" type="text" name="time_start" value="<?= $flashsale->time_start; ?><?= set_value('time_start'); ?>">
    <span style="color:#F7931E;"><?php echo form_error('time_start'); ?></span>
  </div><!-- end class="col-sm-9" -->
</div> <!-- end row -->

<div class="row timePromo">
  <div class="col-sm-3">
    <p>Waktu Selesai<sup>*</sup></p>
  </div><!-- end class="col-sm-3" -->

  <div class="col-sm-9">
    <input readonly="true" required class="datetimepicker2 form-control" type="text" name="time_end" value="<?= $flashsale->time_end; ?><?= set_value('time_end'); ?>">
    <span style="color:#F7931E;"><?php echo form_error('time_end'); ?></span>
  </div><!-- end class="col-sm-9" -->
</div> <!-- end row -->

<div class="row">
  <div class="col-sm-3">
  </div><!-- end class="col-sm-3" -->
  <div class="col-sm-9">
    <p>Penting: Pilih tanggal terlebih dahulu, lalu pilih jam.</p>
  </div><!-- end class="col-sm-9" -->
</div> <!-- end row -->



<div class="row">
  <div class="col-sm-3">
    <p>Gambar Spanduk<br>
      <?php if (!empty($flashsale->banner)) : ?>
        &nbsp;&nbsp;<img style="width:200px; height:auto;" src="<?= base_url() . 'uploads/banners/' . $flashsale->banner; ?>" alt="" />
        <!-- <i class="fa fa fa-trash-o" aria-hidden="true"></i> <a href="<?= base_url() . 'admin/flashsale/delete_image/' . $flashsale->id; ?>">Delete</a> -->
      <?php endif; ?>
    </p>
  </div><!-- end class="col-sm-3" -->

  <div class="col-sm-9">
    <p><input type="file" name="userfile" size="20" class="btn btn-default btn-file form-control" />

      <?php
      //get max image width and height from configuration table
      $this->db->select('category_image_width, category_image_height')->from('configuration')->where('id_configuration', 1);
      $image_dimension = $this->db->get()->row();
      ?>

      <span style="font-size:12px; font-style: italic;">Ukuran gambar harus maksimal <?= $image_dimension->category_image_width; ?> lebar piksel.<?= $image_dimension->category_image_height; ?> tinggi piksel, jpg atau png, maks 300KB</span>
      <span style="color:#F7931E;"><?php echo form_error('userfile'); ?></span>
      <?php echo $this->session->flashdata('banner_error'); //to display error message 
      ?>
    </p>
  </div><!-- end class="col-sm-9" -->
</div> <!-- end row -->

<div class="table table-responsive">
  <table class="table table-striped">
    <tr>
      <th>Produk<sup>*</sup></th>
      <th>SKU/Kode<sup>*</sup></th>
      <th>Harga Diskon (Rp)<sup>*</sup><br>
        <span style="font-size: 11px;">default: harga diskon normal</span>
      </th>
      <th>Max/Pengguna<sup>*</sup><br>
        <span style="font-size: 11px;">default: 9999</span>
      </th>
      <th>Counter<sup>*</sup><br>
        <span style="font-size: 11px;">default: 1</span>
      </th>
      <th>Terjual</th>
      <th>Tambah lagi</th>
      <th>Hapus</th>
    </tr>

    <?php for ($i = 1; $i <= 100; $i++) : ?>

      <?php if (isset($flashsale_products) && !empty($flashsale_products)) : ?>

        <?php if ($i <= count($flashsale_products)) : ?>
          <tr id="tableRow<?= $i; ?>">
          <?php else : ?>
          <tr id="tableRow<?= $i; ?>" style="display: none;">
          <?php endif; ?>

        <?php else : ?>

          <?php if ($i == 1) : ?>
          <tr id="tableRow<?= $i; ?>">
          <?php else : ?>
          <tr id="tableRow<?= $i; ?>" style="display: none;">
          <?php endif; ?>

        <?php endif; ?>

        <td>
          <input id="searchBar<?= $i; ?>" type="text" name="search_product<?= $i; ?>" class="form-control search-input" placeholder="Ketik & pilih produk..." autocomplete="off" value="<?php if (isset($flashsale_products) && !empty($flashsale_products[($i - 1)])) : ?><?= $flashsale_products[($i - 1)]['product_name']; ?><?php endif; ?><?= set_value("search_product{$i}"); ?>">
          <div id="suggestions<?= $i; ?>" class="suggestbar">
            <ul id="autoSuggestionsList<?= $i; ?>">
            </ul>
          </div>
          <span style="color:#F7931E;"><?php echo form_error("search_product{$i}"); ?></span>
        </td>

        <td>
          <div id="suggestions2_<?= $i; ?>">
            <select name="product_sku[]" class="form-control">
              <?php
              $product_details = $this->db->select('*')->from('product_details')->where('product_id', $flashsale_products[($i - 1)]['product_id'])->get()->result();
              ?>
              <?php foreach ($product_details as $item) : ?>
                <option value="<?= $item->id; ?>" <?php if ($item->id ==  $flashsale_products[($i - 1)]['product_details_id']) : ?> selected <?php endif; ?>><?= $item->sku; ?></option>
              <?php endforeach; ?>
            </select>
          </div>
        </td>

        <td>
          <p>
            <input type="number" name="discounted_price<?= $i; ?>" class="form-control search-input" placeholder="Masukan harga diskon" value="<?php if (isset($flashsale_products) && !empty($flashsale_products[($i - 1)])) : ?><?= $flashsale_products[($i - 1)]['discounted_price']; ?><?php endif; ?><?= set_value("discounted_price{$i}"); ?>">
            <span style="color:#F7931E;"><?php echo form_error("discounted_price{$i}"); ?></span>
          </p>
        </td>
        <td>
          <p>
            <input type="number" name="quota_per_user<?= $i; ?>" class="form-control search-input" placeholder="Masukan kuota/pengguna" value="<?php if (isset($flashsale_products) && !empty($flashsale_products[($i - 1)])) : ?><?= $flashsale_products[($i - 1)]['max_per_user']; ?><?php endif; ?><?= set_value("quota_per_user{$i}"); ?>">
            <span style="color:#F7931E;"><?php echo form_error("quota_per_user{$i}"); ?></span>
          </p>
        </td>
        <td>
          <p>
            <input type="number" name="counter<?= $i; ?>" class="form-control search-input" placeholder="Masukan kuota/produk" value="<?php if (isset($flashsale_products) && !empty($flashsale_products[($i - 1)])) : ?><?= $flashsale_products[($i - 1)]['counter']; ?><?php endif; ?><?= set_value("counter{$i}"); ?>">
            <span style="color:#F7931E;"><?php echo form_error("counter{$i}"); ?></span>
          </p>
        </td>
        <td><?php if (isset($flashsale_products) && !empty($flashsale_products[($i - 1)])) : ?><?= $flashsale_products[($i - 1)]['terjual']; ?><?php endif; ?></td>
        <td><button id="addProductRow<?= $i; ?>" class="btn btn=primary">+</button></td>

        <?php if (isset($flashsale_products[($i - 1)]['id'])) : ?>
          <td><a href="<?= base_url('admin/flashsale/delete_flashsale_product/' . $flashsale_products[($i - 1)]['id']); ?>">-</a></td>
        <?php else : ?>
          <td><button id="removeProductRow<?= $i; ?>" class="btn btn=primary">-</button></td>
        <?php endif; ?>
          </tr>

          <script>
            $(document).ready(function() {

              var i = <?= $i; ?>;

              $('#suggestions<?= $i; ?>').hide();

              $('#searchBar<?= $i; ?>').on('keyup', function() {
                ajaxSearch<?= $i; ?>();
              });

              //add row of product +
              $('#addProductRow<?= $i; ?>').on('click', function(e) {
                e.preventDefault();
                $('#tableRow<?= $i + 1; ?>').show();
              });

              //remove row of product -
              if (i > 1) {
                $('#removeProductRow<?= $i; ?>').on('click', function(e) {
                  e.preventDefault();
                  $('#searchBar<?= $i; ?>').val('');
                  $('#tableRow<?= $i; ?>').hide();
                });
              } else {
                $('#removeProductRow<?= $i; ?>').on('click', function(e) {
                  e.preventDefault();
                });
              }

              function ajaxSearch<?= $i; ?>() {

                var input_data<?= $i; ?> = $('#searchBar<?= $i; ?>').val();

                if (input_data<?= $i; ?>.length === 0) {
                  $('#suggestions<?= $i; ?>').hide();
                } else {
                  var post_data = {
                    'search_data': input_data<?= $i; ?>,
                    '<?= $this->security->get_csrf_token_name(); ?>': '<?= $this->security->get_csrf_hash(); ?>'
                  };

                  $.ajax({
                    type: 'POST',
                    url: "<?= base_url('ajax/ajax_admin_get_product'); ?>",
                    data: post_data,
                    success: function(data) {
                      // return success


                      if (data.length > 0) {
                        $('#suggestions<?= $i; ?>').show();
                        $('#autoSuggestionsList<?= $i; ?>').html(data);
                        //move the a list value to input text
                        $('#autoSuggestionsList<?= $i; ?> select').on('change', function() {

                          var t_val = $('#autoSuggestionsList<?= $i; ?> select').val().split(" & ");

                          $.ajax({
                            type: 'POST',
                            url: "<?= base_url('ajax/ajax_get_sku'); ?>",
                            data: {
                              'id': t_val[1],
                              '<?= $this->security->get_csrf_token_name(); ?>': '<?= $this->security->get_csrf_hash(); ?>'
                            },
                            success: function(data) {
                              // return success
                              $('div#suggestions2_<?= $i; ?> select').html(data);
                            }
                          });

                          $('#searchBar<?= $i; ?>').val(t_val[0]);
                          $('#suggestions<?= $i; ?>').hide();
                        });
                      }
                    }
                  });
                }
              }
            });
          </script>

        <?php endfor; ?>
  </table>
</div>

<div class="row">
  <div class="col-sm-3">
  </div><!-- end class="col-sm-3" -->
  <div class="col-sm-9">
    <?= form_submit('submit', 'Simpan Flashsale', 'class="saveFlashSale btn btn-primary btn-success button-brown"'); ?>
    &nbsp;&nbsp;&nbsp;<?= anchor('admin/flashsale', 'Batal'); ?>
  </div><!-- end class="col-sm-9" -->
</div><!--end row -->

<?= form_close(); ?>


<link rel="stylesheet" type="text/css" href="https://www.tokodaku.com/store-shared/assets/admin/css/jquery.datetimepicker.min.css" />
<script src="https://www.tokodaku.com/store-shared/assets/admin/js/jquery.datetimepicker.full.min.js"></script>
<script>
  $(document).ready(function() {

    $('.datetimepicker2').prop('disabled', true);

    <?php if (isset($flashsale_products) && !empty($flashsale_products)) : ?>
      $('.datetimepicker1').prop('disabled', true);
    <?php endif; ?>

    $('.datetimepicker1').datetimepicker({
      format: 'Y-m-d H:i',
      <?php if (isset($start_date)) : ?>
        startDateTime: '<?= $start_date; ?>',
        minDateTime: '<?= $start_date; ?>',
      <?php else : ?>
        minDate: 0,
        startDate: 0,
      <?php endif; ?>
      onSelectDate: function() {
        $('.datetimepicker2').prop('disabled', false);
      },
    });

    $('.datetimepicker2').datetimepicker({
      format: 'Y-m-d H:i',
      onShow: function() {
        this.setOptions({
          minDateTime: $('.datetimepicker1').val() ? $('.datetimepicker1').val() : false,
          startDateTime: $('.datetimepicker1').val() ? $('.datetimepicker1').val() : false,
        })
      },
    });


    $('form').submit(function() {
      $('.datetimepicker2').prop('disabled', false);
      $('.datetimepicker1').prop('disabled', false);
    });
  });
</script>