@extends('admin.layouts.app')
@section('contents')
    <div>
        <ul class="breadcrumb">
            <li> <a href="{{ route('admin.products') }}">Products Management</a> </li>
            <li> <a href="javascript:void();">Add Products</a> </li>
        </ul>
    </div>
    <div class="row">
        <div class="box col-md-12">
            <div class="box-inner">
                <div class="box-header well" data-original-title="">
                    <div class="box-icon">
                    </div>
                </div>
                <div class="box-content">
                    <form method="POST" action="{{route('admin.store_product')}}" id="store_product" enctype="multipart/form-data">
                        @csrf
                        <div class="control-group">
                            <label class="control-label" for="product_type">Product Type <font style="color: red;">*</font></label>
                            <div class="controls">
                                <select name="product_type" id="product_type" data-rel="chosen" class="required" style="width: 250px;">
                                    <option value="" selected="selected">Select Type</option>
                                   @foreach($types as $type)
                                        <option value="{{ $type->id }}">{{ $type->title }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="product_type_error"></div>
                        </div>
                        <br>
                        <div class="control-group">
                            <label class="control-label" for="product_category">Product Category <font style="color: red;">*</font></label>
                            <div class="controls">
                                <select name="product_category[]" id="product_category" data-rel="chosen" class="required" style="width: 250px;" multiple="">
                                   @foreach($categories as $category)
                                        <option value="{{ $category->id }}">{{ $category->title }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="product_category_error"></div>
                        </div><br>
                        <div class="form-group">
                            <label for="product_title">Product Title <font style="color: red;">*</font></label>
                            <input type="text" class="form-control required" name="product_title" id="product_title" value="" placeholder="">
                        </div>
                        <div class="form-group">
                            <label for="product_name">Product Name <font style="color: red;">*</font></label>
                            <input type="text" class="form-control required" name="product_name" id="product_name" value="" placeholder="">
                        </div>
                        <div class="form-group">
                            <label for="product_slug">Product Slug <font style="color: red;">*</font></label>
                            <input type="text" class="form-control required" name="product_slug" id="product_slug" value="" placeholder="">
                        </div>
                        <div class="form-group">
                            <label for="product_name_cat">Product Category Name <font style="color: red;">*</font></label>
                            <input type="text" class="form-control required" name="product_name_cat" id="product_name_cat" value="" placeholder="">
                        </div>
                        <div class="form-group">
                            <label for="sorting">Sorting  <font style="color: red;">*</font></label>
                            <input type="text" class="form-control required" name="sorting" id="sorting" value="" placeholder="">
                        </div>
                        <div class="form-group">
                            <label for="product_image">Product Front Image <font style="color: red;">*</font></label>
                            <input type="file" class="file_name required" name="product_image" id="product_image" value="" placeholder="">&nbsp;&nbsp;&nbsp;(370px X 330px)
                        </div>
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="product_alt">Alt Text (Front Image)</label>
                                    <input type="text" class="form-control" name="product_alt" id="product_alt" value="" placeholder="">
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="product_alt">Image Title (Front Image)</label>
                                    <input type="text" class="form-control" name="product_front_title" id="product_front_title" value="" placeholder="">
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="product_back_image">Product Back Image <font style="color: red;">*</font></label>
                            <input type="file" class="file_name required" name="product_back_image" id="product_back_image" value="" placeholder="">&nbsp;&nbsp;&nbsp;(370px X 337px)
                        </div>
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="product_back_alt">Alt Text (Back Image)</label>
                                    <input type="text" class="form-control" name="product_back_alt" id="product_back_alt" value="" placeholder="">
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="product_back_alt">Image Title (Back Image)</label>
                                    <input type="text" class="form-control" name="product_back_title" id="product_back_title" value="" placeholder="">
                                </div>
                            </div>
                        </div>
                        <div class="repeat-work">
                            <div class="repeatable_html_container">
                                <div class="row repeatable_html">
                                    <div class="col-sm-3">
                                        <div class="form-group" >
                                            <label for="image">Gallery Image <font style="color: red;">*</font></label>
                                            <input type="file" class="required form-control"  name="gallery_images[]" id="galleryfile" value="" placeholder="">&nbsp;&nbsp;&nbsp;(369px X 337px)
                                        </div>
                                    </div>
                                    <div class="col-sm-4">
                                        <div class="form-group">
                                            <label for="alt">Alt Text </label>
                                            <input type="text" class="form-control"  name="gallery_alt[]" id="altgallery" value="" placeholder="">
                                        </div>
                                    </div>
                                    <div class="col-sm-4">
                                        <div class="form-group">
                                            <label for="alt">Image Title</label>
                                            <input type="text" class="form-control"  name="gallery_title[]" id="titlegallery" value="" placeholder="">
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-sm-12">
                                    <button type="button" class="btn btn-md btn-default btn-add-new-img repeater button">
                                        Add New Image
                                    </button>
                                </div>
                            </div>
                        </div>
                        <br>
                        <div class="form-group">
                            <label for="product_box_style">Product box style</label>
                            <input type="text" class="form-control" name="product_box_style" id="product_box_style" value="" placeholder="">
                        </div>
                        <div class="form-group">
                            <label for="product_dimension">Product dimension</label>
                            <input type="text" class="form-control" name="product_dimension" id="product_dimension" value="" placeholder="">
                        </div>
                        <div class="form-group">
                            <label for="product_quantity">Product quantity</label>
                            <input type="text" class="form-control" name="product_quantity" id="product_quantity" value="" placeholder="">
                        </div>
                        <div class="form-group">
                            <label for="product_paper_stock">Product paper stock</label>
                            <input type="text" class="form-control" name="product_paper_stock" id="product_paper_stock" value="" placeholder="">
                        </div>
                        <div class="form-group">
                            <label for="product_printing">Product printing</label>
                            <input type="text" class="form-control" name="product_printing" id="product_printing" value="" placeholder="">
                        </div>
                        <div class="form-group">
                            <label for="product_finishing">Product finishing</label>
                            <input type="text" class="form-control" name="product_finishing" id="product_finishing" value="" placeholder="">
                        </div>
                        <div class="form-group">
                            <label for="product_included_options">Product included options</label>
                            <input type="text" class="form-control" name="product_included_options" id="product_included_options" value="" placeholder="">
                        </div>
                        <div class="form-group">
                            <label for="product_additional_options">Product additional options</label>
                            <input type="text" class="form-control" name="product_additional_options" id="product_additional_options" value="" placeholder="">
                        </div>
                        <div class="form-group">
                            <label for="product_proof">Product Proof</label>
                            <input type="text" class="form-control" name="product_proof" id="product_proof" value="" placeholder="">
                        </div>
                        <div class="form-group">
                            <label for="product_turnaround">Product turnaround</label>
                            <input type="text" class="form-control" name="product_turnaround" id="product_turnaround" value="" placeholder="">
                        </div>
                        <div class="form-group">
                            <label for="product_shipping">Product shipping</label>
                            <input type="text" class="form-control" name="product_shipping" id="product_shipping" value="" placeholder="">
                        </div>
                        <div class="form-group">
                            <label for="product_description">Product Description </label>
                            <textarea class="form-control" name="product_description" id="editor2" cols="40" rows="5"></textarea>
                        </div>
                        <div class="form-group">
                            <label for="product_detail">Product Detail </label>
                            <textarea class="form-control" name="product_detail" id="editor" cols="40" rows="5"></textarea>
                        </div>
                        <div class="form-group">
                            <label for="related_products">Related Product</label>
                            <select name="related_products[]" id="related_products" data-rel="chosen" class="" style="width: 300px;" multiple="">
                                @foreach($products as $product)
                                <option value="{{ $product->id }}">{{ $product->product_name }}</option>
                                @endforeach
                            </select>

                        </div>
                        <div class="form-group">
                            <label for="is_site_map">Site Map Display</label>
                            <input type="checkbox" name="is_site_map" id="is_site_map" value="1" >
                        </div>
                        <div class="form-group">
                            <label for="meta_noindex">Page Index</label>
                            <input type="checkbox" name="meta_noindex" id="meta_noindex" value="1" >
                        </div>
                        <div class="form-group">
                            <label for="is_featured">Home Featured Product</label>
                            <input type="checkbox" class="" name="is_featured" id="is_featured" value="1" placeholder="">
                        </div>
                        <div class="form-group">
                            <label for="is_featured_category">Category Featured Product</label>
                            <input type="checkbox" class="" name="is_featured_category" id="is_featured_category" value="1" placeholder="">
                        </div>
                        <div class="form-group">
                            <label for="is_best_values">Best Values Product</label>
                            <input type="checkbox" class="" name="is_best_values" id="is_best_values" value="1" placeholder="">
                        </div>
                        <div class="form-group">
                            <label for="is_new_arrivals">New Arrival Product</label>
                            <input type="checkbox" class="" name="is_new_arrivals" id="is_new_arrivals" value="1" placeholder="">
                        </div>
                        <div class="form-group">
                            <label for="is_top_choices">Top Choices Product</label>
                            <input type="checkbox" class="" name="is_top_choices" id="is_top_choices" value="1" placeholder="">
                        </div>

                        <div class="form-group">
                            <label for="meta_title">Meta Title </label>
                            <textarea class="form-control" name="meta_title" id="editor3" cols="40" rows="5"></textarea>
                        </div>
                        <div class="form-group">
                            <label for="meta_keywords">Meta Keyword </label>
                            <textarea class="form-control" name="meta_keywords" id="editor4" cols="40" rows="5"></textarea>
                        </div>
                        <div class="form-group">
                            <label for="meta_descriptions">Meta Description </label>
                            <textarea class="form-control" name="meta_descriptions" id="editor5" cols="40" rows="5"></textarea>
                        </div>
                        <div class="form-group">
                            <label for="seo_html">SEO Html </label>
                            <textarea class="form-control" name="seo_html" id="editor6" cols="40" rows="5"></textarea>
                        </div>

                        <div class="control-group">
                            <label class="control-label" for="selectError">Status <font style="color: red;">*</font></label>
                            <div class="controls">
                                <select name="status" id="status" data-rel="chosen" class="file_name">
                                    <option value="1" selected="selected">Active</option>
                                    <option value="0">In Active</option>
                                </select>
                            </div>
                        </div>
                        <div class="form-group" style="margin-top:10px;">
                            <button type="submit" class="btn btn-success">Submit</button>
                        </div>
                    </form>
                </div>
                <!-- /.card-body -->
            </div>
            <!-- /.card -->
        </div>
        <!-- /.col -->
    </div>
    <!-- /.row -->
@endsection
@push('scripts')
    <script src="//cdn.ckeditor.com/4.17.2/full/ckeditor.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.3/jquery.validate.min.js"></script>
    <script>
        $(document).ready(function() {
            CKEDITOR.replace( 'editor' );
        });
        $.validator.setDefaults({ ignore: ":hidden:not(select)" })
        $("#store_product").validate({
            errorPlacement: function(error, element) {
                if(element.attr("name")==='product_type'){
                    error.appendTo('.product_type_error');
                }else if(element.attr("name")==='product_category[]'){
                    error.appendTo('.product_category_error');
                }else {
                    element.after( error ); // default error placement
                }
                return true;
            },
            submitHandler: function (form) {
                var editor = CKEDITOR.instances.editor.getData();
                $("#editor").val(editor);
                $.ajax({
                    url:$("#store_product").attr('action'),
                    type:'post',
                    data:new FormData(form),
                    cache:false,
                    processData: false,
                    contentType: false,
                    success:function (data){
                        if(data.success){
                            swal.fire({
                                icon: 'success',
                                title: data.success.message,
                                showConfirmButton: true,
                            }).then(function (){
                                window.location.href='{{ route('admin.products')  }}'
                            })
                        }else {
                            swal.fire({
                                icon: 'error',
                                title: data.error.message,
                                showConfirmButton: false,
                                timer: 1500
                            })
                        }
                    }
                })
            }
        });
        var repeatable_html='<div class="row repeatable_html"> <div class="col-sm-3">' +
            ' <div class="form-group"> <label>Gallery Image <font style="color: red;">*</font></label>' +
            ' <input type="file" class="required form-control" name="gallery_images[]" value="" placeholder="">&nbsp;&nbsp;&nbsp;(369px X 337px)' +
            ' </div> </div> <div class="col-sm-4"> <div class="form-group"> ' +
            '<label>Alt Text </label> <input type="text" class="form-control" name="gallery_alt[]" value="" placeholder=""> ' +
            '</div> </div>'+
            '<div class="col-sm-4"> <div class="form-group">'+
            '<label>Image Title</label> <input type="text" id="titlegallery" class="form-control" name="gallery_title[]" value="" placeholder=""> ' +
            '</div> </div> <div class="col-sm-1"> ' +
            '<button type="button" class="btn btn-sm btn-default btn-rmv" style="margin-top: 29px;">Remove</button> ' +
            '</div></div>';
        $(".repeater").click(function(){
            $(".repeatable_html_container").append(repeatable_html);
        });
        $(".repeat-work").on('click','.btn-rmv',function(){
            $(this).parents('.repeatable_html').remove();
        });
    </script>
@endpush