@extends('layouts.manage')

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

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

@section('page-header-description')
    @lang('Edit Product') <a href="{{route('manage.products.index')}}">@lang('Go Back')</a>
@endsection

@section('styles')
    <link href="{{asset('css/jquery.dropdown.min.css')}}" rel="stylesheet">
    <link rel="stylesheet" href="{{asset('css/dropzone.min.css')}}">
    @include('partials.manage.categories-tree-style')
    <style>
        .bolden {
            font-family: "Arial Black";
        }
        .product-feature-image {
            max-height: 300px;
        }
        .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/dropzone.min.js')}}"></script>
    <script src="{{asset('js/color-picker/jscolor.js')}}"></script>
    @include('partials.manage.categories-tree-script');
    @include('includes.tinymce')
    @if(config('settings.toast_notifications_enable'))
    <script>
        toastr.options.closeButton = true;
        @if(session()->has('product_updated'))
            toastr.success("{{session('product_updated')}}");
        @endif
        @if(session()->has('product_deleted'))
            toastr.success("{{session('product_deleted')}}");
        @endif

        @if(session()->has('variant_deleted'))
            toastr.error("{{session('variant_deleted')}}");
        @endif
    </script>
    @endif
    
    <script>
       $("#product-form-validation").validate({});

        $('.brand_box').dropdown({
            // options here
        });
        // $('.category_box').dropdown({
        //     // options here
        // });
        $('.product_box').dropdown({
            // options here
        });
        $('#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');

        var removeFile = $('#remove_file');

        downloadableFile.hide();

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

        $(document).ready(function() {

            virtualProduct.on('change', function() {
                if(virtualProduct.is(':checked')) {
                    productQuantity.fadeOut();
                } else {
                    productQuantity.fadeIn();
                }  
            });

            downloadableProduct.on('change', function() {
                if(downloadableProduct.is(':checked')) {
                    downloadableFile.fadeIn();
                    downloadableFile.find('input[type=file]').filter(':first').attr('name', 'file');
                } else {
                    downloadableFile.fadeOut();
                    downloadableFile.find('input[type=file]').filter(':first').removeAttr('name');
                }
            });

            removeFile.on('change', function() {
                if(removeFile.is(':checked')) {
                    downloadableFile.fadeIn();
                    downloadableFile.find('input[type=file]').filter(':first').attr('name', 'file');
                } else {
                    downloadableFile.fadeOut();
                    downloadableFile.find('input[type=file]').filter(':first').removeAttr('name');
                }
            });
        });

        var i = $('#add-variant').data('count');
        $(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();
        });


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

        $(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.edit')
@endsection