@extends('layouts.manage')

@section('title')
    @lang('Add Product')
@endsection

@section('page-header-title')
    @lang('Add Product') <a class="btn btn-info btn-sm" href="{{route('manage.products.index')}}">@lang('View Products')</a>
@endsection

@section('page-header-description')
    @lang('Add New Product') <a href="{{url()->previous()}}">@lang('Go Back')</a>
@endsection

@section('styles')
    <link href="{{asset('css/jquery.dropdown.min.css')}}" rel="stylesheet">
    @include('partials.manage.categories-tree-style')
    <style>
        .bolden {
            font-family: "Arial Black";
        }
        .variants {
            margin-bottom: 1.2rem;
        }
        .remove_variant {
            cursor: pointer;
        }
        .variant_name > strong {
            display: inline-block;
            margin-bottom: .5rem;
        }
        .error{
            color:red ;
        }
    </style>
@endsection

@section('scripts')
    <script src="{{asset('js/jquery.dropdown.min.js')}}"></script>
    <script src="{{asset('js/jquery.validate.js')}}"></script>
    <script src="{{asset('js/color-picker/jscolor.js')}}"></script>
    @include('includes.tinymce')
    @include('partials.manage.categories-tree-script');
    <script>
       $("#product-form-validation").validate({});

        $.ajaxSetup({
            headers: {
                'X-CSRF-Token': $('meta[name="csrf-token"]').attr('content')
            }
        });
        $('.brand_box').dropdown({
            // options here
        });
        // $('.category_box').dropdown({
        //     // options here
        // });
        $('.product_box').dropdown({
            // options here
        });
        var component_type_box = $('#component_type_box');
        var priceBreakupMessage = $('#price_breakup_message');
        var fetchPriceBreakup = $('#fetch_price_break');
        var fetchExistingProduct = $('#fetch_existing_product');
        var existingProductMessage = $('#existing_product_message');
        var loadingMessage = '<span class="text-primary">@lang('Loading...')</span>';
        var errorMessage = '<span class="text-danger">@lang('Loading...')</span>';
        $('.existing_product_box').dropdown({
            // callback
            choice: function (e) {
                var productID = e.target.dataset.value;
                if(productID) {
                    existingProductMessage.html(loadingMessage);
                    $.ajax({
                        type: "get",
                        url: "{{url('manage/existing-product')}}/" + productID,
                        success: function(response) {               
                            if(response) {
                                fetchExistingProduct.html(response);
                                existingProductMessage.html('');
                            } else {
                                existingProductMessage.html(errorMessage);
                            }
                        },
                        error: function(response) {
                            existingProductMessage.html('');
                        }
                    });
                }
            }
        });

        $('#add-more-specification').click(function() {
            $('.specification_types_rows > tr:first').clone().appendTo('.specification_types_rows');
        });
        $('#specification_types_box').on('click', '.remove_row', function() {
            var rowCount =  $('.specification_types_rows tr').length;
            if(rowCount > 1) {
                $(this).closest('tr').remove();
            }
        });

        $('#add-more-field').click(function() {
            $('.custom_fields_rows > tr:first').clone().appendTo('.custom_fields_rows');
        });
        $('#custom_fields_box').on('click', '.remove_row', function() {
            var rowCount =  $('.custom_fields_rows tr').length;
            if(rowCount > 1) {
                $(this).closest('tr').remove();
            }
        });

        var virtualProduct = $('#virtual');
        var productQuantity = $('.product-quantity');

        var downloadableProduct = $('#downloadable');
        var downloadableFile = $('#downloadable-file');

        if(!downloadableProduct.is(':checked')) {
            downloadableFile.hide();
        }

        if(virtualProduct.is(':checked')) {
            productQuantity.hide();
        }

        function roundOffTwoDigit(num) {
            return Math.round(num * 100) / 100;
        }


        var getSpecifications = $('#get-specifications');
        var category = $('#category');
        $(document).on('change', '#category', function() {
            category = this;
            if(this.value != 0) {
                getSpecifications.html('<button type="button" class="btn btn-xs btn-block" id="get-specifications-btn">@lang('Get Specifications for') ' + $("#category option:selected").text() + '</button>');
            } else {
                getSpecifications.html("");
            }
        });

        $(document).on('click', '#get-specifications-btn', function() {
            $.get(APP_URL + '/manage/ajax/specifications/category/' + category.value, function(receivedData) {
                if(!receivedData.error) {
                    if(receivedData.data.length != 0) {
                        
                        var specificationsHTML = '';

                        var options = '';
                        $.each(receivedData.more_specifications, function(key, value) {
                            options += '<option value="' +key+ '">'+value+'</option>';
                        })

                        receivedData.data.forEach(function(element) {
                            specificationsHTML += '<tr> <td> <select class="form-control selectpicker" data-style="btn-default" name="specification_type[]"><option value="' +element.id+ '">'+element.name+'</option>'+options+'</select> </td> <td> <input class="form-control" placeholder="@lang('Example: 14, 3.5, red')" name="specification_type_value[]" type="text"> </td> <td> <input class="form-control" placeholder="@lang('kg, GHz (Leave blank if no unit)')" name="specification_type_unit[]" type="text"> </td> <td> <button class="remove_row btn btn-danger btn-xs" type="button"> <span class="glyphicon glyphicon-remove" aria-hidden="true"></span> </button> </td> </tr>'
                        });
                        $('.specification_types_rows').html(specificationsHTML);
                    } else {
                        $('<p class="text-danger">@lang('Specifications are not set for this category.')</p>').insertAfter(getSpecifications).fadeOut(2500);
                    }
                } else {
                    $('<p class="text-danger">@lang('Error occured while fetching specifications for this category.')</p>').insertAfter(getSpecifications).fadeOut(2500);
                }
            });
        });
        function moreImagesNames(files) {
            var fileNames = [];
            Object.keys(files).forEach(function(key) {
              var val = files[key]["name"];
              fileNames.push(val);
            });
            return fileNames.join(', ');
        }

        var i = 0;
        $(document).on('click', '#add-variant', function() {
            i++;
            $('.variants-field').append('' +
                '<div class="form-group variant-field-row well">' +
                    '<label class="variant_name"><strong>@lang('Variant Name')</strong>' +
                    '&nbsp;<span class="remove_variant text-danger" type="button">' +
                        '<span class="glyphicon glyphicon-remove" aria-hidden="true"></span>' +
                    '</span>' +
                    '<input required class="form-control" type="text" name="variant[' + i + ']">' +
                    '</label>' +
                    '<div class="variant-field-values">' +
                        '<table class="table table-responsive table-bordered">' +
                            '<thead>' +
                                '<tr>' +
                                    '<th>@lang('Name')</th>' +
                                    '<th>@lang('Additional Cost')</th>' +
                                    '<th></th>' +
                                '</tr>' +
                            '</thead>' +
                            '<tbody>' +
                                '<tr>' +
                                    '<td>' +
                                        '<input class="form-control" required placeholder="" name="variant_v[' + i + '][]" type="text">' +
                                    '</td>' +
                                    '<td>' +
                                        '<input class="form-control" required placeholder="" name="variant_p[' + i + '][]" type="number" step="any" min="0">' +
                                    '</td>' +
                                    '<td>' +
                                        '<button class="remove_variant_value btn btn-danger btn-xs" type="button">' +
                                            '<span class="glyphicon glyphicon-remove" aria-hidden="true"></span>' +
                                        '</button>' +
                                    '</td>' +
                                '</tr>' +
                                '<tr>' +
                                    '<td>' +
                                        '<button class="add_variant_value btn btn-success btn-xs" type="button">' +
                                            '@lang("Add More")' +
                                        '</button>' +
                                    '</td>' +
                                '</tr>' +
                            '</tbody>' +
                        '</table>' +
                    '</div>' +
                '</div>'
            );
        });

        $(document).on('click', '.add_variant_value', function() {
            var tbody = $(this).parent().parent().parent();
            var row = tbody.find('tr:nth-child(1)').clone().find("input:text").val("").end().find("input[type='number']").val("").end();
            tbody.find('tr:last').prev().after(row);
        });

        $(document).on('click', '.remove_variant_value', function() {
            var tbody = $(this).parent().parent().parent();
            if(tbody.find('tr').length > 2) {
                $(this).parent().parent().remove();
            }
        });

        $(document).on('click', '.remove_variant', function() {
            $(this).parent().parent().remove();
        });

        $(document).ready(function() {

            //Add row to the table
            $('#btnAddRow').on('click', function() {
                var index = 1;
                if ($('table#tblgroupVariants > tbody > tr:last').attr('data-index')) {
                    index = parseInt($('table#tblgroupVariants > tbody > tr:last').attr('data-index')) + 1;
                }
                var insertAfter = $(this).parent().parent().parent().parent();
                insertAfter.last().append('<tbody class="groupVariants" data-index="'+index+'"><tr data-index="'+index+'"><td><input class="form-control" name="variants['+index+'][id]" type="hidden"><input class="form-control txtVariant required" name="variants['+index+'][color_name]" placeholder="Name"><br><input class="form-control txtVariant jscolor required" name="variants['+index+'][color_code]" placeholder="Color Code" value="" /><br><a class="error removeColor"><i class="fa fa-trash fa-2x"></i></a></td><td><input type="text" name="variants['+index+'][product_code]" class="form-control " placeholder="product no" value=""/></td><td><input type="file" name="variants['+index+'][images][]" class="required form-control txtVariant" placeholder="Image" value="" accept="image/*" multiple/></td><td><table id="optionsTable-'+index+'" class="table table-bordered"><thead><tr><th>Size <span class="error">*</span></th><th>Qty <span class="error">*</span></th><th>Price <span class="error">*</span></th></tr></thead><tbody class="groupOptions"><tr data-option-index="1"><td><input type="hidden" name="variants['+index+'][options][1][id]" class="form-control"><input name="variants['+index+'][options][1][size]" class="required form-control " placeholder="Size"></td><td><input type="number" name="variants['+index+'][options][1][qty]" class="required form-control variantQty " placeholder="Qty"></td><td><input type="number" name="variants['+index+'][options][1][price]"  class="required form-control " placeholder="Price"></td><td></td></tr></tbody><tfoot><tr><td colspan="4"><a class="btn btn-info btn-xs addOptions"  data-parent-index="'+index+'">Add Size</a></td></tr></tfoot></table></td></tr></tbody>');
                new jscolor($('.jscolor').last()[0]);

            });
            $("#tblgroupVariants").on('click', '.removeColor', function() {
                $(this).parent().parent().remove();
            });

            //Add more rows for option
            $('body').on('click', '.addOptions', function() {
                var insertAfter     = $(this).parent().parent().parent().parent();
                var variant_index   = $(this).data('parent-index');
                var option_index    = 1;
                if ($('table#optionsTable-'+variant_index+' > tbody.groupOptions > tr:last').attr('data-option-index')) {
                    option_index = parseInt($('table#optionsTable-'+variant_index+' > tbody > tr:last').attr('data-option-index')) + 1;
                }
                insertAfter.last().append('<tbody class="groupOptions" data-option-index="'+option_index+'"><tr data-option-index="'+option_index+'"><td><input type="hidden" name="variants['+variant_index+'][options]['+option_index+'][id]" class="form-control"><input name="variants['+variant_index+'][options]['+option_index+'][size]" class="required form-control " placeholder="Size"></td><td><input type="number" name="variants['+variant_index+'][options]['+option_index+'][qty]" class="required form-control variantQty " placeholder="Qty"></td><td><input type="number" name="variants['+variant_index+'][options]['+option_index+'][price]"  class="required form-control " placeholder="Price"></td><td><a class="error removeVariant"><i class="fa fa-trash"></i></a></td></tr></tbody>');
            });
            $("#tblgroupVariants").on('click', '.removeVariant', function() {
                $(this).parent().parent().remove();
            });

            $(document).on("keyup", ".variantQty", function() {
                var sum = 0;
                $("input[class *= 'variantQty']").each(function(){
                    sum += +$(this).val();
                });
                $("#in_stock").val(sum);
            });

        });
    </script>
@endsection

@section('content')
    @include('partials.manage.products.create')
@endsection