<style>
    .close_i {
        right: 5px !important;
        position: absolute !important;
        border-radius: 50%;
        top: 5px !important;
        cursor: pointer;
        box-shadow: 2px 2px 5px;
        background: #ffffffcc;
    }
</style>
<?php

$sizeReplace = str_replace(array('[', ']'), '', $edit_product->sizes);
$sizeArray = explode(',', $sizeReplace);

$colrReplace = str_replace(array('[', ']'), '', $edit_product->colors);
$colorArray = explode(',', $colrReplace);

?>
<div class="container-fluid">
    <div class="container">
        <h3 class="text-center btn-block bg-success" style="color: #fff;padding: 10px 0 3px;margin: 0;border-radius: 5px;text-transform: uppercase;"> <i>
                <?= $user->name ?> </:></i> : <small>Product Setup Form </small> </h3>
    </div>
    <br>
    <br>
</div>

<form id="edit_form" action="https://myadmin.mali-mart.com/api/update-product/<?= $product_id . '/' . $user->own_refer_id ?>" id="apiProduct">
    <div class="row">
        <div class="col-md-11 col-sm-12 form-group">
            <label for="title">Product Title:</label>
            <input type="text" class="form-control" value="<?= $edit_product->name ?>" required name="name" id='title' placeholder='Product Title...'>
        </div>
    </div>
    <div class="row">
        <div class="col-md-4 col-sm-4 form-group">
            <label for="brand">Brand/Company Name:</label>
            <input type="text" class="form-control" required name="company" value="<?= $edit_product->company ?>" id='brand' placeholder='Brand/Company Name...'>
        </div>

        <div class="col-md-4 col-sm-4 form-group">
            <label for="color">Color:</label>
            <select name="color_id[]" multiple id="color" class="form-control color select2">
                <?php foreach ($colors as $key => $color) : ?>
                    <option value="<?= $color->id ?>" <?php
                                                    for ($i = 0; $i < count($colorArray); $i++) {
                                                        if ($colorArray[$i] == $color->id)
                                                            echo 'selected';
                                                    }
                                                    ?>><?= $color->name ?></option>
                <?php endforeach; ?>
            </select>
        </div>

        <div class="col-md-4 col-sm-4 form-group">
            <label for="color">Size :</label>
            <select name="size_id[]" id="size" required multiple class="form-control size select2">
                <?php foreach ($sizes as $key => $size) : ?>
                    <option value="<?= $size->id ?>" <?php
                                                    for ($i = 0; $i < count($sizeArray); $i++) {
                                                        if ($sizeArray[$i] == $size->id)
                                                            echo 'selected';
                                                    }

                                                    ?>>
                        <?= $size->name ?>
                    </option>
                <?php endforeach; ?>
            </select>
        </div>


    </div>
    <div class="row form-group">
        <div class="col-md-6 col-sm-12">
            <label for="subCat">Select Category:</label>
            <select class="form-control categories" name='cat' required id="category" onchange="findSubCategory()">
                <?php foreach ($categories as $key => $value) : ?>
                    <option value="<?= $key ?>" <?= $key == $edit_product->cat ? 'selected' : '' ?>><?= $value ?></option>
                <?php endforeach; ?>
            </select>
        </div>
        <div class="col-md-6 col-sm-12">
            <label for="subCat">Select Sub Category:</label>
            <select class="form-control" name="sub_cat" required id="sub_categories">
                <option disabled selected value="">Select One...</option>
                <?php if (!empty($edit_product->sub_cat)) : ?>
                    <option value="<?= $edit_product->sub_cat ?>" selected><?= $sub_category->sub_cat_name ?></option>
                <?php endif ?>

            </select>
        </div>
    </div>
    <div class="row form-group">
        <div class="col-12">
            <label for="description">Description:</label>
            <textarea class="form-control" name="desc" required rows="5" id="description"><?= $edit_product->desc ?></textarea>
        </div>
    </div>
    <div class="row form-group">
        <div class="col-12">
            <label for="spec">Specification Table:</label>
            <textarea class="form-control" rows="5" required name="spec" id="spec"><?= $edit_product->spec ?></textarea>
        </div>
    </div>
    <div class="row form-group">
        <div class="col-md-3 col-sm-12">
            <label for="subCat">Price:</label>
            <input type="number" class="form-control" name="price" id="price" required value="<?= $edit_product->discount + $edit_product->marcent_price ?>" placeholder="00.00">
        </div>
        <div class="col-md-3 col-sm-12">
            <label for="discount">Discount:</label>
            <input type="number" class="form-control" name="discount" value="<?= $edit_product->discount ?>" required id='discount' placeholder='00.00'>
        </div>
        <div class="col-md-3 col-sm-12">
            <label for="discount">Quantity:</label>
            <input type="number" class="form-control" name="quantity" value="<?= $edit_product->quantity ?>" required id='quan' placeholder='0'>
        </div>

        <div class="col-md-3 col-sm-12">
            <label for="discount">Delivery Duration :</label>
            <input type="text" class="form-control delivery" name="delivery" id="delivery" value="<?= $edit_product->delivery ?>" required placeholder='' ">
		</div>
	</div>
	
	<?php if ($this->session->user_id == 1) : ?>
	<div class=" row form-group">
            <div class="col-md-6 col-sm-12">
                <label for="price">Coupon Type</label>
                <select class="form-control" name="coupon_type" id="coupon_type">
                    <option disabled selected>Choose Coupon</option>
                    <option value="1" <?= $edit_product->cashback == 1 ? 'selected' : '' ?>>Cashback</option>
                </select>
            </div>
            <div class="col-md-6 col-sm-12">
                <label for="price">Cashback (%)</label>
                <input type="number" class="form-control" name="cashback" value="<?= $edit_product->cashback ?>" id="cashback" />
            </div>
        </div>
    <?php endif ?>

    <input type="hidden" value="<?= $edit_product->thumb ?>" id="thumb" />
    <input type="hidden" value="<?= $edit_product->id ?>" id="pdt_id" />

    <div class="row justify-content-center p-2">
        <div id="drop-area" class="col-md-11 col-sm-12">
            <form class="my-form">
                <p>Upload multiple files with the file dialog or by dragging and dropping
                    images onto the dashed region
                </p>
                <input type="file" id="fileElem" multiple accept="image/*" onchange="handleFiles(this)">
                <label class="button" for="fileElem">Select some files <i class="fa fa-cloud-upload"></i> </label>
            </form>
            <progress class="d-none" id="progress-bar" max=100 value=0></progress>
            <div id="gallery" class="row">
                <?php $pics = json_decode($edit_product->pictures); ?>
                <?php foreach ($pics as $pic) : ?>
                    <div id="<?= $pic ?>" class="up-img <?= $pic == $edit_product->thumb ? 'thumb' : '' ?>">
                        <?php if ($pic == $edit_product->thumb) : ?><span class="thumb_txt">Thumbnail</span> <?php endif ?>
                        <i class="close_i material-icons fa fa-close" onclick="del_pic(this)"></i>
                        <img src="https://myadmin.mali-mart.com/images/products/<?= $pic ?>">
                    </div>

                <?php endforeach ?>
            </div>
        </div>
    </div>

    <div class="row justify-content-center mb-3">
        <div class="col-md-10 col-sm-12">
            <label for="vdo">Embed Video link:</label>
            <textarea class="form-control" name="vdo" id="vdo" rows="3"></textarea>
        </div>
    </div>


    <div class="row justify-content-center">
        <div class="col-md-4 col-sm-8">
            <button class="btn btn-success btn-block" onclick="save_product()">Update
                <i class="material-icons"></i> </button>
        </div>
    </div>
</form>

<br>

<div class="alertMsg">

</div>
<!-- Script start  -->


<script src="https://cdn.ckeditor.com/4.11.3/standard-all/ckeditor.js"></script>
<script src="https://myadmin.mali-mart.com/js/image-compressor.min.js"></script>
<script src="https://unpkg.com/axios@0.20.0/dist/axios.min.js"></script>
<script src="<?= base_url() . 'app-assets/js/image-compress_edit.js' ?>"></script>


<script>
    var category_id = sub_category_id = null;
    $(document).ready(function() {

        CKEDITOR.replace('description', {
            height: 200,
            removeButtons: "Image,Source,About"
        });

        CKEDITOR.replace('spec', {
            height: 150,
            extraPlugins: 'placeholder',
            removeButtons: "Unlink,Image,Source,About,Underline,Strike,Subscript,Superscript,List,BlockQuote"
        });

    });

    $(document).on("change", "#category", function() {
        /* set All sub categories attribute hidden attribute while category changing ...*/
        $('#sub_categories option').removeAttr("hidden");
        $('#sub_categories option').attr("hidden", true);
        var category = $(this).val();
        var values = $('#sub_categories option[data-CatId=' + category + ']');
        for (var i = 0; i < values.length; i++) {
            $(values[i]).removeAttr("hidden");
        }
    });

    function findSubCategory() {
        let cat_id = $("#category").val();
        let sub_id = $("#sub_categories");
        sub_id.empty();
        $.ajax({
            method: "get",
            url: "https://myadmin.mali-mart.com/api/subcategory/" + cat_id,
            dataType: "json",
            success: function(res) {

                $.each(res, function(index, value) {
                    var subCat = '<option value="' + index + '">' + value + '</option>';
                    sub_id.append(subCat);
                });
            }
        });
    }
</script>

<!-- Script End  -->