<!-- **********************************************************************************************************************************************************
    MAIN CONTENT
    *********************************************************************************************************************************************************** -->
<!--main content start-->
<link rel="stylesheet" href="//select2.github.io/dist/css/select2.min.css">
<link rel="stylesheet" href="<?= base_url() ?>newassets/backend/select2-bootstrap.css">
<script src="//select2.github.io/dist/js/select2.min.js"></script>
<section id="main-content">
    <section class="wrapper">
        <div class="row mt">
            <div class="col-lg-12">
                <div class="content-panel">
                    <h4><i class="fa fa-angle-right"></i> Data Products Images</h4>
                    <section id="unseen" style="padding: 5px">
                        <form action="<?= base_url() ?>admin/product_image/simpanUpload" method="post" enctype="multipart/form-data" id="form-upload" class="form-horizontal">
                            <input type="hidden" value="" name="id">

                            <div class="form-group">
                                <label class="col-sm-2 col-sm-2 control-label">Products Name</label>
                                <div class="col-sm-10">
                                    <select class="form-control select2" name="product" id="product" onchange="return getImage(this.value)">
                                        <option>-Choose One-</option>
                                        <?php
                                        foreach ($product as $pdt) {
                                            ?>
                                            <option value="<?= $pdt->id ?>"><?= $pdt->product_name ?></option>
                                            <?php
                                        }
                                        ?>
                                    </select>
                                </div>
                            </div>  
                            <div class="col-md-12" id="image">
                                <table class="table table-bordered table-striped table-condensed">
                                    <thead>
                                        <tr>
                                            <td><input type="button" name="add_btn" value="Add" id="add_btn" class="btn btn-info"></td>
                                        </tr>
                                    </thead>
                                    <tbody id="fill">
                                        <tr>
                                            <td><label>Foto 1</label> <input name="image[]" type="file" class="form-control" /></td>
                                        </tr>
                                    </tbody>
                                    <tr>
                                        <td><input type="submit" id="submit-button" value="Upload" class="btn btn-primary" /></td>
                                    </tr>
                                </table>
                            </div>
                        </form>
                    </section>
                    <div id="images" style="clear: both"></div>                    
                </div>
            </div>
        </div><!--row -->
    </section>
</section>
<script>
    $(".select2, .select2-multiple").select2({
        
    });

    $(document).ready(function() {
        $("#image").hide();

        $('#form-upload').on('submit', function(e) {
            e.preventDefault();
            $('#submit-button').attr('disabled', '');
            $("#images").html('<div style="padding:10px"><span>Mengunggah...</span></div>');
            $(this).ajaxSubmit({
                target: '#images',
                success: sukses
            });
        });

        var count = 1;
        $("#add_btn").click(function() {
            count += 1;
            $('#fill').append('<tr class="records"><td><label>Foto ' + count + ' </label><input name="image[]" type="file" /> <a class="remove_item" href="#" >Delete</a></td></tr>');
        });

        $(".remove_item").live('click', function(ev) {
            if (ev.type == 'click') {
                $(this).parents(".records").fadeOut();
                $(this).parents(".records").remove();
            }
        });
    });
    function sukses() {
        $('#form-upload').resetForm();
        $('#submit-button').removeAttr('disabled');

    }
    function getProduct(id_kat) {
        $.ajax({
            type: "POST",
            url: "<?= base_url() ?>admin/product/getProduct",
            data: "id_kat=" + id_kat,
            success: function(data) {
                $("#product").html(data);
            }
        });
    }
    function getImage(id_prod) {
        $.ajax({
            type: "POST",
            url: "<?= base_url() ?>admin/product/getImage",
            data: "produk=" + id_prod,
            success: function(data) {
                $("#image").show();
                $("#images").html(data);
//                $("#img").attr('src', "<?= base_url() ?>newassets/backend/img/portfolio/" + data);
//                $("#ahref").attr('href', "<?= base_url() ?>newassets/backend/img/portfolio/" + data);
            }
        });
    }
</script>
