<?php $__env->startSection('maincontent'); ?>
    <div class="px-4 pt-4 container-fluid">
        <div class="pagetitle row">
            <div class="col-6">
                <h1><a href="<?php echo e(url('/admin/dashboard')); ?>">Dashboard</a></h1>
                <nav>
                    <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="<?php echo e(url('/admin/dashboard')); ?>">Home</a></li>
                    <li class="breadcrumb-item active">Main Products</li>
                    </ol>
                </nav>
            </div>
        </div><!-- End Page Title -->

        <div class="row">
            <div class="col-md-12">
                <div class="card">
                    <div class="card-header">
                        <strong>Product Info</strong>
                    </div>
                    <div class="p-3 row">
                        <div class="col-lg-6">
                            <div class="mb-3 form-group">
                                <label for="ProductName">Product Name</label>
                                <input type="text" class="form-control" id="ProductName">
                            </div>
                            <div class="form-group d-none">
                                <label for="Position">Position</label>
                                <input type="text" class="form-control" id="position">
                            </div>
                        </div>
                        <?php
                            $admin = App\Models\Admin::where('id', Auth::user()->id)->first();
                        ?>

                        <?php if($admin->hasRole('Shop')): ?>
                            <input type="hidden" value="<?php echo e($admin->id); ?>" name="shop_id" id="shop_id">
                        <?php else: ?>
                            <input type="hidden" value="1" name="shop_id" id="shop_id">
                        <?php endif; ?>
                        <div class="col-lg-6">
                            <div class="form-group">
                                <label for="ProductName">Product Image</label>
                                <input type="file" class="form-control" onchange="loadFile(event)" id="ProductImage">
                            </div>
                            <div class="clearfix single-image image-holder-wrapper">
                                <div class="image-holder placeholder">
                                    <img id="prevImage" style="height:100px;width:100px" />
                                    <i class="mdi mdi-folder-image"></i>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-6">
                            <div class="form-group">
                                <label for="customerPhone">Choose category *</label>
                                <select name="category_id" id="category_id" class="form-control" onchange="setSubCategories()">
                                    <option value="" disabled>Choose</option>
                                    <?php $__empty_1 = true; $__currentLoopData = App\Models\Category::where('status','Active')->get(); $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $item): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); $__empty_1 = false; ?>
                                        <option value="<?php echo e($item->id); ?>"><?php echo e($item->category_name); ?></option>
                                    <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); if ($__empty_1): ?>

                                    <?php endif; ?>
                                </select>
                            </div>
                        </div>

                        <div class="col-lg-6">
                            <div class="form-group">
                                <label for="customerPhone">Choose Subcategory</label>
                                <select name="subcategory_id" id="subcategory_id" class="form-control">
                                  
                                </select>
                                
                            </div>
                        </div>
                        <div class="col-lg-6 mt-2">
                            <div class="form-group">
                                <label for="customerPhone">Choose Brands</label>
                                <select name="brand_id" id="brand_id" class="form-control">
                                    <option value="" disabled>Choose</option>
                                    <?php $__empty_1 = true; $__currentLoopData = App\Models\Brand::where('status','Active')->get(); $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $item): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); $__empty_1 = false; ?>
                                        <option value="<?php echo e($item->id); ?>"><?php echo e($item->brand_name); ?></option>
                                    <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); if ($__empty_1): ?>

                                    <?php endif; ?>
                                </select>

                            </div>
                        </div>
                    </div>

                    <div class="card-body">
                        <table id="productTable" style="width: 100% !important;" class="table table-bordered table-striped">
                            <thead>
                            <tr>
                                <th>Imae</th>
                                <th>Code</th>
                                <th>Product Name</th>
                                <th></th>
                            </tr>
                            </thead>
                            <tbody>
                            </tbody>
                            <tfoot>
                            <tr>
                                <td colspan="4">
                                    <select id="productID" style="width: 100%;">
                                        <option value="">Select Product</option>
                                    </select>
                                </td>
                            </tr>
                            </tfoot>

                        </table>
                        <br>
                    </div>
                    <div class="card-footer">
                        <button type="button" id="submit" class="btn btn-primary btn-block" data-style="expand-left">Save</button>
                    </div>
                </div>
            </div>
        </div>

    </div>
    <input type="hidden" name="_token" value="<?php echo e(csrf_token()); ?>" />
    <script>

        $(document).ready(function() {

            //change order status
            var token = $("input[name='_token']").val();

            $(document).on("click", "#submit", function () {

                var ProductName = $("#ProductName");
                var shop_id = $("#shop_id");
                var position = $("#position");
                var category_id = $("#category_id");
                var subcategory_id = $("#subcategory_id");
                var brand_id = $("#brand_id");
                var product = [];
                var productCount = 0;
                $("#productTable tbody tr").each(function(index, value) {
                    var currentRow = $(this);
                    var obj = {};
                    obj.productID = currentRow.find(".productID").val();
                    product.push(obj);
                    productCount++;
                });

                if (ProductName.val() == '') {
                    toastr.error('Product Name Should Not Be Empty');
                    ProductName.css('border', '1px solid red');
                    return;
                }
                ProductName.css('border', '1px solid #ced4da');

                if (category_id.val() == '') {
                    toastr.error('Category Should Not Be Empty');
                    category_id.css('border', '1px solid red');
                    return;
                }
                category_id.css('border', '1px solid #ced4da');

                if(productCount == 0){
                    toastr.error('Product Should Not Be Empty');
                    return;
                }
                var formData = new FormData();

                formData.append('_token', token);
                formData.append('ProductName', ProductName.val());
                formData.append('shop_id', shop_id.val());
                formData.append('category_id', category_id.val());
                formData.append('subcategory_id', subcategory_id.val());
                formData.append('brand_id', brand_id.val());
                formData.append('position', position.val());
                formData.append('ProductImage', $('#ProductImage')[0].files[0]);
                product.forEach((item, index) => {
                    Object.entries(item).forEach(([key, value]) => {
                        formData.append(`product[${index}][${key}]`, value);
                    });
                });

                $.ajax({
                    type: "POST",
                    url: '<?php echo e(url('admin_order/main-product/store')); ?>',
                    data: formData,
                    contentType: false,
                    processData: false,
                    success: function (response) {
                        toastr.success('Main product added successfully');
                        window.location.href = "<?php echo e(url('mainproducts')); ?>";
                    }
                });

            });


            $("#productID").select2({
                placeholder: "Select a Product",
                dropdownParent: $('#productTable'),
                allowClear: true,
                templateResult: function (state) {
                    if (!state.id) {
                        return state.text;
                    }
                    var $state = $(
                        '<span><img width="60px" src="'+state.image +'" class="img-flag" /> '+state.text+'" (SKU: "'+state.productCode+")</span>"
                    );
                    return $state;
                },
                ajax: {
                    type:'GET',
                    url: '<?php echo e(url('admin_order/mini-products')); ?>',
                    processResults: function (data) {
                        return {
                            results: data.data
                        };
                    }
                }
            }).trigger("change").on("select2:select", function (e) {
                $("#productTable tbody").append(
                    "<tr>" +
                    '<td style="display: none"><input type="hidden" id="prd" value="new"><input type="text" class="productID" style="width:80px;" value="' + e.params.data.id + '"></td>' +
                    '<td><img src="' + e.params.data.image + '" style="width:60px;margin-top:6px;"> </td>' +
                    '<td><span class="productCode">' + e.params.data.productCode + '</span></td>' +
                    '<td><span class="productName">' + e.params.data.text + '</span></td>' +
                    '<td><button class="btn btn-sm btn-danger delete-btn"><i class="fa fa-trash"></i></button></td>\n' +
                    "</tr>"
                );
                calculation();
                $('#productID').val(null).trigger('change');
            });
v
            $(document).on("click", ".delete-btn", function() {
                $(this).closest("tr").remove();
                calculation();
            });

            $(".datepicker").flatpickr();

        });


        var loadFile = function(event) {
            var output = document.getElementById('prevImage');
            output.src = URL.createObjectURL(event.target.files[0]);
            output.onload = function() {
                URL.revokeObjectURL(output.src) // free memory
            }
        };
    </script>
    
    <script>
        setSubCategories();

        //   Show/Set Subcategory
        function setSubCategories() {
            var cat_id = $('#category_id').val();
            $.ajax({
                type: 'GET',
                url: '<?php echo e(url('/admin/get-subcategory')); ?>/' + cat_id,

                success: function(data) {
                    $('#subcategory_id').html('');

                    for (var i = 0; i < data.data.length; i++) {
                        $('#subcategory_id').append(`
                            <option value="` + data.data[i].id + `" >` + data.data[i].sub_category_name + `</option>
                        `)
                    }
                },
                error: function(error) {
                    console.log('error');
                }
            });
        }
        

        
        
        
        
        
        
    </script>



<style>
    .card-box {
    background-color: #fff;
    padding: 1.5rem;
    -webkit-box-shadow: 0 1px 4px 0 rgb(0 0 0 / 10%);
    box-shadow: 0 1px 4px 0 rgb(0 0 0 / 10%);
    margin-bottom: 24px;
    border-radius: 0.25rem;
}
a {
    text-decoration: none;
}
</style>


<?php $__env->stopSection(); ?>

<?php echo $__env->make('backend.master', \Illuminate\Support\Arr::except(get_defined_vars(), ['__data', '__path']))->render(); ?><?php /**PATH D:\Xampp\htdocs\multivendor_ecom\resources\views/backend/content/mainproduct/create.blade.php ENDPATH**/ ?>