<div class="intro-y flex items-center mt-8">
    <h2 class="text-lg font-medium mr-auto">
        {{'seller.product.update.title'|_}}
    </h2>
    <div class="flex items-center ml-auto alert alert-success-soft show flex items-center mb-2" role="alert"
        style="padding: 5px;font-size: 12px;padding-top: 2px;padding-bottom: 2px;">USD: {{order.kurs}}</div>
</div>
<div class="grid grid-cols-12 gap-6 mt-5">

    <div class="intro-y col-span-12 lg:col-span-8">
        <!-- BEGIN: Form Layout -->
        <div class="intro-y box p-5">
            <form data-file-types="image/jpeg|image/png|image/jpg" id="imageUploadForm" method="POST"
                enctype="multipart/form-data">
                <div>
                    <label for="crud-form-1" class="form-label">SKU #No</label>
                    <input id="crud-form-1" type="text" value="SKU" name="sku" class="form-control w-full"
                        placeholder="" disabled>
                </div>
                <div class="grid grid-cols-12 gap-2">
                    <div class="mt-3 col-span-6">
                        <label for="crud-form-22" class="form-label">{{'product.status.title'|_}} </label>
                        <select class="form-control w-full" name="stat" id="product_status">

                        </select>
                    </div>


                    <div class="mt-3 col-span-6 product_featured">
                        <label for="crud-form-2" class="form-label">{{'product.featured.title'|_}} </label>
                        <select class="form-control w-full" name="featured" id="product_featured">

                        </select>
                    </div>

                </div>
                <div class="grid grid-cols-12 gap-2">
                    <div class="mt-3 col-span-6">
                        <label for="crud-form-1" class="form-label">{{'product.name'|_}}</label>
                        <input type="text" class="form-control w-full" placeholder="{{'product.name'|_}}" name="name">
                    </div>
                    <div class="mt-3 col-span-6">
                        <label for="crud-form-1" class="form-label">{{'product.number'|_}}</label>
                        <input type="text" class="form-control w-full" placeholder="{{'product.number'|_}}"
                            name="product_number">
                    </div>
                </div>

                <div class="mt-3 mb-3">
                    <label>{{'product.file.upload'|_}}</label>
                    <div action="#" class="dropzone" id="upload-widget">
                        <div class="fallback">
                            <input name="images[files][]" type="file" multiple id="prodImgs" onchange="getFile(this)" />
                        </div>
                        <div class="dz-message" data-dz-message>
                            <div class="text-lg font-medium">Drop files here or click to upload.</div>
                            <div class="text-slate-500"> This is just a demo dropzone. Selected files are <span
                                    class="font-medium">not</span> actually uploaded. </div>
                        </div>
                    </div>
                </div>
                <div class="mt-3">
                    <label>{{'product.short_description'|_}}</label>
                    <div class="mt-2">
                        <textarea class="form-control" name="short_description" id="short_description"
                            style="height: 150px;">{{'product.short_description'|_}}</textarea>
                    </div>
                </div>

                <div class="mt-3">
                    <label>{{'product.description'|_}}</label>
                    <div class="mt-2">
                        <textarea class="form-control" name="description" id="description"
                            style="height: 150px;">{{'product.description'|_}}</textarea>
                    </div>
                </div>
                <!-- <div class="mt-3">
                    <label>{{'product.imgs'|_}}</label>
                    <div class="mt-2">
                        <input name="images[files][]" type="file" multiple class="form-control" id="prodImgs" />
                    </div>
                </div> -->



                <input name="product_id" value="{{id}}" type="hidden">
                <input name="user" value="romanah_" type="hidden">
                <input name="password" value="bt110226$$" type="hidden">
                <div class="grid grid-cols-12 gap-2">
                    <div class="mt-3 col-span-6">
                        <label for="crud-form-3" class="form-label">{{'product.price'|_}}</label>
                        <div class="input-group">
                            <input id="crud-form-3" type="number" class="form-control"
                                placeholder="{{'product.price'|_}}" aria-describedby="input-group-1" name="price">
                            <div id="input-group-1" class="input-group-text">TMT</div>
                        </div>
                    </div>


                    <div class="mt-3 col-span-6">
                        <label for="crud-form-3" class="form-label">{{'product.special_price'|_}}</label>
                        <div class="input-group">
                            <input id="crud-form-3" type="number" class="form-control"
                                placeholder="{{'product.special_price'|_}}" aria-describedby="input-group-2"
                                name="special_price">
                            <div id="input-group-1" class="input-group-text">TMT</div>
                        </div>
                    </div>

                </div>

                <div>
                    <label for="crud-form-1" class="form-label">{{'product.qty'|_}}</label>
                    <input id="crud-form-1" type="number" name="qty" class="form-control w-full"
                        placeholder="{{'product.qty'|_}}">
                </div>

                <div class="text-right mt-5">
                    <a href="{{'detail-order'|page({orderId: order.id})}}" type="button"
                        class="btn btn-outline-secondary mr-1">{{'order.form.cancel.btn'|_}}</a>
                    <button data-attach-loading type="submit"
                        class="btn btn-primary">{{'order.form.update.btn'|_}}</button>
                </div>
            </form>
        </div>
        <!-- END: Form Layout -->
    </div>


</div>




{% put scripts %}

<script src="{{'assets/seller/js/ckeditor-classic.js'|theme}}"></script>
<script>
    function getFile(fileq) {
        var value = fileq.value;

        console.log(value);
    }

    getProduct();
    // console.log("qqq");
    function getProduct() {

        $(document).ready(function () {
            $.ajax({
                url: `https://nurgul.com.tm/app/api/products/{{id}}`,
                type: 'GET',
                dataType: 'json',
                beforeSend: function () {
                    // $('#deatil_screen').hide();
                    // $('#loader').show();
                },
                success: function (data, textStatus, xhr) {
                    // $('#loader').hide();
                    // $('#deatil_screen').show();


                    console.log(data.data);

                    var product = data.data;

                    // $("input[name='images[files][]']").val(product.images[0].original_image_url);
                    // $("select[name='status']").val(product.status);
                    $("#product_status").html(`
                        <option value="1" `+ (product.status == 1 ? `selected` : ``) + `>{{'product.enable'|_}}</option>
                        <option value="0" `+ (product.status == 0 ? `selected` : ``) + `>{{'product.disable'|_}}</option>
                    `);
                    $("#product_featured").html(`
                        <option value="1" `+ (product.featured == 1 ? `selected` : ``) + `>{{'product.enable'|_}}</option>
                        <option value="0" `+ (product.featured == 0 ? `selected` : ``) + `>{{'product.disable'|_}}</option>
                    `);

                    $("div.product_featured select").val(product.featured);

                    // $("#product_featured select").val(product.featured).change();
                    // $('#product_featured option[value='+product.featured+']').attr('selected','selected');
                    $("input[name='name']").val(product.name);
                    $("input[name='sku']").val(product.sku);
                    $("textarea[name='short_description']").val(product.short_description);
                    $("textarea[name='description']").val(product.description);
                    $("input[name='name']").val(product.name);
                    $("input[name='product_number']").val(product.product_number);
                    $("input[name='price']").val(product.regular_price);
                    $("input[name='special_price']").val(Number(product.special_price));
                    $("input[name='qty']").val(product.qty);

                },
                error: function (xhr, textStatus, errorThrown) {
                    console.log('Error in Operation');
                }
            });
        });
    }

</script>
<script>
    function convertToSlug(Text) {
        return Text.toLowerCase()
            .replace(/ /g, "-")
            .replace(/[^\w-]+/g, "");
    }

    $(document).ready(function (e) {
        $('#imageUploadForm').on('submit', (function (e) {
            e.preventDefault();

            var productName = $("input[name='name']").val();
            var urlKey = convertToSlug(productName);
            var fd = new FormData(this);

            fd.append('product_id', $("input[name='product_id']").val());
            fd.append('user', $("input[name='user']").val());
            fd.append('password', $("input[name='password']").val());
            fd.append('images[files][]', $("input[name='images[files][]']").val());
            fd.append('sku', $("input[name='sku']").val());
            fd.append('channels', "Nurgul");
            fd.append('short_description', $("textarea[name='short_description']").val());
            fd.append('description', $("textarea[name='description']").val());
            fd.append('name', $("input[name='name']").val());
            fd.append('url_key', urlKey);
            fd.append('new', 1);
            fd.append('visible_individually', 1);
            fd.append('status', $("select[name='stat']").val());
            fd.append('product_number', $("input[name='product_number']").val());
            fd.append('price', $("input[name='price']").val());
            fd.append('special_price', $("input[name='special_price']").val());
            fd.append('weight', 0);
            fd.append('qty', $("input[name='qty']").val());

            $.ajax({
                type: 'POST',
                url: "https://nurgul.com.tm/app/api/seller/update/product",
                data: fd,
                cache: false,
                contentType: false,
                processData: false,
                success: function (data) {
                    console.log(fd);
                    console.log("success");
                    console.log(data);
                },
                error: function (data) {
                    console.log("error");
                    console.log(data);
                }
            });
        }));

        $("#ImageBrowse").on("change", function () {
            $("#imageUploadForm").submit();
        });
    });
</script>



{% endput %}
