<link rel="stylesheet" href="<?= base_url('assets/admin/chosen_js/chosen.css'); ?>">
<style>
    .chosen-container, .chosen-container-single{
        width: 25% !important;
    }
</style>

<div class="row">
    <div class="col-sm-12">
        <?= $this->session->flashdata('success'); //to display success message ?> 
        <p>
            <a href="<?= base_url('admin/orders'); ?>">
                <i class="fa fa-arrow-left" aria-hidden="true"></i> Back to Order List
            </a>
        </p><br>
    </div><!-- end class="col-sm-12" -->
</div> <!-- end row -->

<?= form_open_multipart(); ?>
    <div class="row">
        <div class="col-sm-12">
            <label>Customer : </label><br>
            <select class="chosen-select select_customer"" name="customer_id" required>
                <option value="0" selected disabled>Choose Customer ... </option>
                <?php foreach ($customer_marketplace as $customer):?>
                    <option value="<?= $customer->id_customers; ?>"><?= $customer->name; ?> (<?= $customer->email;?>)</option>
                <?php endforeach; ?>
            </select>

            <?php if($allowedCust == true) : ?>
                <span style="float:right;">
                  <?= $this->session->set_userdata('location_add_customer', 'orders'); ?>
                  <?= anchor('admin/customers/add', '<i class="fa fa-plus" aria-hidden="true"></i> ADD A NEW CUSTOMER'); ?>
                </span>
            <?php endif; ?>
            <?= form_error('customer_id'); ?>
        </div>
        <div class="col-sm-12"  style="margin-top: 10px;">
              <div class="detail_customer"></div>
        </div>
        <div class="col-sm-12" style="margin-top: 20px;">
            <label>Marketplace : </label><br>
            <select class="chosen-select select_marketplace" name="marketplace_id" required>
                <option value="0" selected disabled>Choose Marketplace ... </option>
                <?php foreach ($marketplace as $marketplace_item):?>
                    <option value="<?= $marketplace_item->id; ?>"><?= $marketplace_item->name; ?></option>
                <?php endforeach; ?>
            </select>
            <?= form_error('marketplace_id'); ?>
        </div>
        <div class="col-sm-3" style="margin-top: 20px;">
            <label>Warehouse : </label><br>
            <select class="form-control" name="warehouse_id" required>
                <option value="0" selected disabled>Choose Warehouse ... </option>
                <?php foreach ($warehouses as $warehouse):?>
                    <option value="<?= $warehouse->id; ?>"><?= $warehouse->name; ?></option>
                <?php endforeach; ?>
            </select>
            <?= form_error('warehouse_id'); ?>
        </div>
        <div class="col-sm-3" style="margin-top: 20px;">
            <label>Shipping Fee (Rp): </label><br>
            <p><input type="number" name="shipping_fee" required="required" class="form-control" value="0"></p>
            <!-- <p>Shipping fee akan terkakulasi otomatis dari warehouse <b>Jakarta</b> dengan shipment method <b>Reguler</b></p> -->
        </div>
    </div>

    <div class="row" >
        <div class="col-sm-12">
            <div class="table-responsive">
                <table class="table table-striped" style="margin-bottom: 0px;" id="dynamic_field">
                    <thead>
                        <tr>
                            <th>Produk</th>
                            <th>Harga Sale</th>
                            <th>Harga Marketplce</th>
                            <th>Kuantitas Beli</th>
                            <th></th>
                        </tr>
                    </thead>
                    <tbody>
                        <?php for($a=1;$a<=20;$a++): ?>
                            <?php if($a==1): ?>
                                <tr id="row<?= $a;?>">
                            <?php else: ?>
                                <tr id="row<?= $a;?>" style="display: none;">
                            <?php endif; ?>
                                <td style="width: 30%">
                                    <select class="form-control select_product select_product<?=$a;?>" name="id_product[]" id="<?=$a;?>">
                                        <option value="0" selected disabled>Choose Marketplace First ... </option>
                                    </select>
                                </td>
                                <td style="width: 20%">
                                    <input type="text" class="form-control sale_price<?=$a;?>" readonly >
                                </td>
                                <td style="width: 20%">
                                    <input type="text" class="form-control marketplace_price<?=$a;?>" name="marketplace_price[]" readonly >
                                </td>
                                <td style="width: 20%;text-align: center;">
                                    <input type="number" min="0" name="quantitas_beli[]" class="form-control qtybeli<?=$a;?>" style="text-align: center;padding: 5px;">
                                </td>
                                <td style="width: 10%;text-align: center;">
                                    <?php if($a==1): ?>
                                        <a class="btn_add<?=$a;?>" href="#" id="<?=$a;?>"><i class="fa fa-plus"></i></a>
                                    <?php else: ?>
                                        <a class="btn_add<?=$a;?>" href="#" id="<?=$a;?>"><i class="fa fa-plus" style="padding: 0px 10px;"></i></a>
                                        <a class="btn_remove<?=$a;?>" href="#" id="<?=$a;?>"><i class="fa fa-trash"></i></a>
                                    <?php endif; ?>
                                </td>
                            </tr>
                            <script>
                                $(document).ready(function() {
                                    $('.btn_add<?=$a;?>').click(function(){
                                        var id = $(this).attr("id");
                                        var id_next = parseInt(id)+1;
                                        $('#row'+id_next+'').show();
                                    });
                                    $('.btn_remove<?=$a;?>').click(function(){
                                        var id = $(this).attr("id");
                                        $(".select_product"+id+'').val("0");
                                        $(".sale_price"+id+'').val("");
                                        $(".marketplace_price"+id+'').val("");
                                        $(".qtybeli"+id+'').val("");
                                        $('#row'+id+'').hide();
                                    });
                                });
                            </script>
                        <?php endfor; ?>
                        <!-- for new request -->
                    </tbody> 
                </table>
            </div><!-- end class responsive-->
        </div><!-- end class="col-sm-12" -->
    </div> <!-- end row -->

    <div class="row">
        <div class="col-sm-12" style="text-align: center;">
            <input type="submit" name="submit" class="btn btn-success" value="CREATE ORDER">
        </div>
    </div>
<?= form_close(); ?>

<script>
    $(document).ready(function() {
        $('.select_marketplace').change(function() { 
            var id_marketplace  = $(this).val();
            ajax_get_product_marketplace(id_marketplace); 
        });
        $('.select_product').change(function() { 
            var select_id       = $(this).attr("id");
            var id_product      = $(this).val();
            var id_marketplace  = document.getElementsByClassName("select_marketplace")[0].value;
            ajax_get_product_detail(select_id,id_product,id_marketplace); 
        });
		        $('.select_customer').change(function(){
            var id_customers  = document.getElementsByClassName("select_customer")[0].value;

            ajax_get_address_customer_marketplace(id_customers);
        });														
    });

	function ajax_get_address_customer_marketplace(id_customer){
      $.ajax({
          'url'       : '<?php echo base_url(); ?>' + 'admin/orders' + '/ajax_get_address_customer_marketplace',
          'type'      : 'POST',
          'data'      : {
                          'id_customers' : id_customer,
                          '<?= $this->security->get_csrf_token_name(); ?>' : '<?= $this->security->get_csrf_hash(); ?>'
                      },
          'success'   : function(result) {
              if (result) {
                      document.getElementsByClassName("detail_customer")[0].innerHTML= result;
              };
          }
      });
    }

    function ajax_get_product_marketplace(id_marketplace) {
        $.ajax({
            'url'       : '<?php echo base_url(); ?>' + 'admin/orders' + '/ajax_get_product_marketplace', 
            'type'      : 'POST',
            'data'      : {
                            'id_marketplace' : id_marketplace,
                            '<?= $this->security->get_csrf_token_name(); ?>' : '<?= $this->security->get_csrf_hash(); ?>'
                        }, 
            'success'   : function(result) {
                if (result) { 
                    $('.select_product').html(result);
                    for($a=1;$a<=20;$a++){
                        document.getElementsByClassName("sale_price"+$a+"")[0].value = "";
                        document.getElementsByClassName("marketplace_price"+$a+"")[0].value = "";
                        document.getElementsByClassName("qtybeli"+$a+"")[0].value = "";
                    }
                };
            }
        });
    }
    function ajax_get_product_detail(select_id,id_product,id_marketplace){
        $.ajax({
            'url'       : '<?php echo base_url(); ?>' + 'admin/orders' + '/ajax_get_product_detail', 
            'type'      : 'POST',
            'data'      : {
                            'id_product' : id_product,
                            'id_marketplace' : id_marketplace,
                            '<?= $this->security->get_csrf_token_name(); ?>' : '<?= $this->security->get_csrf_hash(); ?>'
                        }, 
            'success'   : function(result) {
                if (result) {
                    var hasil = JSON.parse(result);
                    document.getElementsByClassName("sale_price"+select_id+"")[0].value = hasil.product['sale_price'];
                    document.getElementsByClassName("marketplace_price"+select_id+"")[0].value = hasil.product['price'];
                };
            }
        });
    }
</script>

<script src="<?= base_url('assets/admin/chosen_js/chosen.jquery.js'); ?>" type="text/javascript"></script>
<script src="<?= base_url('assets/admin/chosen_js/prism.js'); ?>" type="text/javascript" charset="utf-8"></script>
<script src="<?= base_url('assets/admin/chosen_js/init.js'); ?>" type="text/javascript" charset="utf-8"></script>