@extends('Manager.Master') @section('header')
<link rel="stylesheet" href="{{ url('css/bootstrap-select.min.css') }}"> @stop @section('title') ایجاد محصول @stop @section('content')

<div class="col-md-12 insert-page x_content">
    <div class="x_panel">
        <form method="post" action="{{ url(route('product.store'))}}" id="form">
            {{ csrf_field() }}
            <div class="col-xs-12">
                <div class="" role="tabpanel" data-example-id="togglable-tabs">
                    <ul id="myTab1" class="nav nav-tabs bar_tabs right" role="tablist">
                        <li role="presentation" class="active">
                            <a href="#tab_seo" id="home-tabb" role="tab" data-toggle="tab" aria-controls="seo" aria-expanded="true">عمومی</a>
                        </li>
                        <li role="presentation" class="">
                            <a href="#tab_content2" role="tab" id="content" data-toggle="tab" aria-controls="profile" aria-expanded="false">توضیحات تکمیلی</a>
                        </li>


                        <li role="presentation" class="">
                            <a href="#tab_features" id="features" role="tab" data-toggle="tab" aria-controls="features" aria-expanded="true">ویژگی ها</a>
                        </li>

                        <li role="presentation" class="">
                            <a href="#tab_symbols" id="symbols" role="tab" data-toggle="tab" aria-controls="symbols"
                                aria-expanded="true">نمادها</a>
                        </li>
                        <li role="presentation" class="">
                            <a href="#tab_content" role="tab" id="content" data-toggle="tab" aria-controls="profile" aria-expanded="false">انبار</a>
                        </li>
                        <li role="presentation" class="">
                            <a href="#tab_image" role="tab" id="image" data-toggle="tab" aria-controls="image" aria-expanded="false">تصویر شاخص</a>
                        </li>
                        <li role="presentation" class="">
                            <a href="#tab_gallery" role="tab" id="gallery" data-toggle="tab" aria-controls="gallery" aria-expanded="false">گالری</a>
                        </li>
                        <li role="presentation" class="">
                            <a href="#tab_video" role="tab" id="video" data-toggle="tab" aria-controls="video" aria-expanded="false">فیلم</a>
                        </li>
                        <li role="presentation" class="">
                            <a href="#tab_cat" role="tab" id="cat" data-toggle="tab" aria-controls="cata" aria-expanded="false">انتخاب دسته و برند</a>
                        </li>

                        <li role="presentation" class="">
                            <a href="#tab_option" role="tab" id="option" data-toggle="tab" aria-controls="option" aria-expanded="false">تنظیمات</a>
                        </li>
                    </ul>
                    <div id="myTabContent2" class="tab-content">
                        <div role="tabpanel" class="tab-pane fade active in" id="tab_seo" aria-labelledby="seo">
                            <div class="x_panel">
                                <div class="form-group col-xs-12 myinput">
                                    <input class="effect-9 form-control" type="text" placeholder="نام فارسی محصول" name="fa_name">
                                    <span class="focus-border">
                                        <i></i>
                                    </span>
                                </div>
                                <div class="form-group col-xs-12 myinput">
                                    <input name="en_name" class="effect-9 form-control" type="text" placeholder="نام انگلیسی محصول">
                                    <span class="focus-border">
                                        <i></i>
                                    </span>
                                </div>
                                <div class="form-group col-xs-12 myinput">
                                    <input name="seo_title" class="effect-9 form-control" type="text" placeholder="عنوان سئو ">
                                    <span class="focus-border">
                                        <i></i>
                                    </span>
                                </div>
                                <div class="form-group col-xs-12 myinput">
                                    <input name="seo_description" class="effect-9 form-control" type="text" placeholder="توضیحات سئو ">
                                    <span class="focus-border">
                                        <i></i>
                                    </span>
                                </div>
                                <div class="form-group col-xs-12 myinput">
                                    <input name="ratingValue" class="effect-9 form-control" type="text" placeholder="ratingValue">
                                    <span class="focus-border">
                                        <i></i>
                                    </span>
                                </div>
                                <div class="form-group col-xs-12 myinput">
                                    <input name="reviewCount" class="effect-9 form-control" type="text" placeholder="reviewCount">
                                    <span class="focus-border">
                                        <i></i>
                                    </span>
                                </div>
                               

                                <div class="form-group col-xs-12 myinput">
                                    <input name="price" class="effect-9 form-control" type="text" placeholder="قیمت پایه">
                                    <span class="focus-border">
                                        <i></i>
                                    </span>
                                </div>
                                <div class="form-group col-xs-12 myinput">
                                    <input name="discount" class="effect-9 form-control" type="text" placeholder="تخفیف پایه">
                                    <span class="focus-border">
                                        <i></i>
                                    </span>
                                </div>

                            </div>
                        </div>

                        <div role="tabpanel" class="tab-pane fade" id="tab_content2" aria-labelledby="content">
                            <div class="x_panel">
                                <div class="form-group col-xs-12 myinput">
                                    <textarea class="effect-9 form-control" placeholder="توضیح کوتاه درمورد محصول" name="summary"></textarea>
                                    <span class="focus-border">
                                        <i></i>
                                    </span>
                                </div>
                                <div class="form-group col-xs-12 myinput">
                                    <textarea name="body" id="editor1" rows="10" cols="100"> </textarea>
                                </div>
                                <div class="input-group ">
                                    <span class="input-group-btn">
                                        <a data-input="thumbnailFile" data-preview="holderFile" class="btn btn-primary filemanager"> انتخاب</a>
                                    </span>
                                    <input placeholder=" کاتالوگ" id="thumbnailFile" class="form-control" type="text" name="catalog">
                                </div>


                            </div>
                        </div>


                        <div role="tabpanel" class="tab-pane fade" id="tab_features" aria-labelledby="features">
                            <div class="x_panel">
                                {!! json_decode($features) !!}
                                <div class="form-group">
                                    <label class="col-sm-2 control-label my-label"> ساير توضيحات </label>
                                    <div class="col-sm-10">
                                        <textarea class="form-control" name="other_features"></textarea>
                                    </div>
                                </div>

                            </div>
                        </div>
                        <div role="tabpanel" class="tab-pane fade" id="tab_symbols" aria-labelledby="symbols">
                            <div class="x_panel">
                                <!-- Not Selected -->
                                <label>نمادهای انتخاب نشده (جهت انتخاب کلیک نمایید)</label>
                                <div class="tags-div">
                                    <ul id="symbolsNotSelected">
                                    
                                    </ul>
                                </div>
                                <div id="symbolsNotSelectedPagination">

                                </div>
                                <hr>
                                <!-- Selected -->
                                <label>نمادهای انتخاب شده (جهت حذف کلیک نمایید)</label>
                                <div class="tags-div">
                                    <ul id="symbolsSelected">
                                    </ul>
                                </div>

                            </div>
                        </div>
                        <div role="tabpanel" class="tab-pane fade" id="tab_content" aria-labelledby="content">
                            <div class="x_panel" id="mywrap">
                                <div class="input-group myin">
                                    <span class="input-group-addon">سایز</span>
                                    <input name="size[]" type="text" class="form-control" placeholder="مثال 30" />
                                    <span class="input-group-addon">تعداد کل</span>
                                    <input name="total[]" type="text" class="form-control" placeholder="مثال 50" />
                                    <span class="input-group-addon">قیمت</span>
                                    <input name="s_price[]" type="text" class="form-control" placeholder="مثال 50000" />
                                    <span class="input-group-addon">تخفیف</span>
                                    <input name="s_discount[]" type="text" class="form-control" placeholder="مثال 1000" />

                                </div>
                                <button type="button" class="btn btn-default btn-block" id="inventory_add">افزودن
                                </button>
                            </div>
                        </div>
                        <div role="tabpanel" class="tab-pane fade" id="tab_image" aria-labelledby="image">
                            <div class="x_panel text-center">
                                <div class="input-group ">
                                    <span class="input-group-btn">
                                        <a data-input="thumbnail" data-preview="holder" class="btn btn-primary lfm">
                                            انتخاب &nbsp;
                                            <i class="fa fa-picture-o"></i>
                                        </a>
                                    </span>
                                    <input id="thumbnail" class="form-control " type="text" name="imageUrl">
                                </div>
                                <img id="holder" class="img-rounded text-center holder_image2" src="{{ url(" /images/default.jpg ")
                                }}">
                            </div>
                        </div>
                        <div role="tabpanel" class="tab-pane fade" id="tab_gallery" aria-labelledby="gallery">
                            <div class="x_panel text-center">
                                <div id="slides">
                                    <div class="slide">
                                        <div class="col-xs-12 col-sm-4">
                                            <img id="holder12" class="img-thumbnail text-center holder_image " src="{{ url(" /images/default.jpg ")}}">
                                        </div>
                                        <div class="myslide">
                                            <div class="col-xs-12 col-sm-8">
                                                <div class="input-group">
                                                    <span class="input-group-btn">
                                                        <button type="button" class="btn btn-primary lfm" data-input="thumbnail23" data-preview="holder12">انتخاب تصویر :</button>
                                                    </span>
                                                    <input type="text" id="thumbnail23" class="form-control" placeholder="مثال : www.example.com/image.jpg" name="images[]" value="">
                                                </div>
                                                <div class="">
                                                    <button type="button" class="btn btn-danger btn-block delete_slide"> حذف
                                                    </button>
                                                </div>
                                            </div>
                                        </div>

                                    </div>
                                </div>
                                <button type="button" class="btn btn-default btn-block" id="image_add">افزودن
                                </button>
                            </div>
                        </div>
                        <div role="tabpanel" class="tab-pane fade" id="tab_video" aria-labelledby="video">
                            <div class="x_panel ">
                                <label class="input-group col-xs-12  myin">
                                کد آپارات :
                                </label>
                                <div class="input-group col-xs-12  myin">                                     
                                    </span>
                                    <input id="video-input" class="form-control " placeholder="کد آپارات" type="text" name="video">
                                </div>
                                <div id="video-preview" class=" text-center " > </div>
                            </div>
                        </div>
                        <div role="tabpanel" class="tab-pane fade" id="tab_cat" aria-labelledby="cat">
                            <div class="x_panel">
                                <div class="form-group">
                                    <label class="col-sm-2 control-label my-label"> انتخاب دسته : </label>
                                    <div class="col-sm-10">
                                        <select class="selectpicker form-control myselect" multiple data-live-search="true" name="categories[]">
                                            @foreach($categories as $category)
                                            <option value="{{$category->id}}">{{$category->fa_name}}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                                <div class="clearfix"></div>
                                <div class="form-group">
                                    <label class="col-sm-2 control-label my-label"> انتخاب برند : </label>
                                    <div class="col-sm-10">
                                        <select class="selectpicker form-control myselect" data-live-search="true" name="brands[]" title="برند مورد نظر را انتخاب کنید">

                                            @foreach($brands as $brand)
                                            <option value="{{$brand->id}}">{{$brand->fa_name}}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>

                                <div class="clearfix"></div>

                                <div class="form-group">
                                    <label>
                                        محصولات پرفروش
                                        <input type="checkbox" name="mostSoldProduct">
                                        <span class="checkmark"></span>
                                    </label>
                                    <label>
                                        محصولات پربازدید
                                        <input type="checkbox" name="mostVisitedProduct">
                                        <span class="checkmark"></span>
                                    </label>
                                    <label>
                                        آخرین فروش
                                        <input type="checkbox" name="lastSoldProduct">
                                        <span class="checkmark"></span>
                                    </label>
                                    <label>
                                        محصولات جدید
                                        <input type="checkbox" name="newProduct">
                                        <span class="checkmark"></span>
                                    </label>
                                    <label>
                                        محصولات پیشنهادی
                                        <input type="checkbox" name="recommendedProduct">
                                        <span class="checkmark"></span>
                                    </label>
                                </div>
                            </div>
                        </div>
                        <div role="tabpanel" class="tab-pane fade" id="tab_option" aria-labelledby="option">
                            <div class="x_panel">
                                <div class="form-group">
                                    <label class="col-sm-2 control-label my-label">وضعیت فروش </label>
                                    <div class="col-sm-10">
                                        <select class="form-control" id="sel1" name="status">
                                            <option value="normal">معمولی</option>
                                            <option value="discount">فروش ویژه</option>
                                            <option value="stop">توقف فروش</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="clearfix"></div>
                                <div class="form-group">
                                    <label class="col-sm-2 control-label my-label"> نظرات </label>
                                    <div class="col-sm-10">
                                        <select class="form-control" id="sel1" name="commentStatus">
                                            <option value="active">کاربران بتوانند نظر خود را ثبت کنند</option>
                                            <option value="deactive">بخش نظرات برای این محصول بسته باشد
                                            </option>
                                        </select>
                                    </div>
                                </div>
                                <div class="clearfix"></div>

                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="clearfix"></div>
            <div class="col-xs-8 col-xs-push-2">
                <button id="sub" type="submit" class="btn btn-success btn-block mysubmit">ارسال</button>
            </div>

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

@if($errors->first()) @include('Manager.Componet.error', ['error' => $errors->first()]) @endif @stop @section("footer")
<script src="{{ url('/js/bootstrap-select.min.js')}}"></script>
<script src="/vendor/laravel-filemanager/js/lfm.js"></script>
<script>
    selectedSymbolIds = [];

    function loadSymbolsNotSelected(url) {    
        $.ajax({
            url: url ,
            method: 'get',
            data: {
                    'selectedSymbolIds':selectedSymbolIds 
                },
            success: function (data) {  
                var html = $(data.symbols); 
                $('#symbolsNotSelected').html(html);
                $('#symbolsNotSelectedPagination').html(data.pagination);

                $("#symbolsNotSelected li").click(addSymbol);
                $("#symbolsNotSelectedPagination .pagination a").click(function(e){
                    e.preventDefault();
                    var url = $(this).attr('href');  
                    loadSymbolsNotSelected(url); 
                });

            },
            error: function (data) {  
                var errors = data.responseJSON.errors;
                $.each(errors, function (key, value) {
                    error_message(value[0]);
                });
            }
        });
    }

    var url = '/manager/product/symbols/notSelected';
    loadSymbolsNotSelected(url);

    function addSymbol() {
        var e = $(this);
        var id = e.attr('data-id'); 

        $('#symbolsSelected').append(this);
        e.unbind('click');
        e.click(removeSymbol);

        selectedSymbolIds.push(id);
    }

    function removeSymbol() {
        var e = $(this);
        var id = e.attr('data-id');
        var index = selectedSymbolIds.indexOf(parseInt(id));

        if (index > -1)
            selectedSymbolIds.splice(index, 1);

        $('#symbolsNotSelected').append(e);
        e.unbind('click');
        e.click(addSymbol);
    }
    </script>
<script>
    var count = 1;
    var count_image = 1;
    $('.lfm').filemanager('image');
    $('.filemanager').filemanager2('file');
    $(document).on('click', 'button#inventory_add', function (event) {
        count++;
        var data = ' <div class="input-group myin">' +
            '<span class="input-group-addon" >سایز</span>' +
            '<input name="size[]" type="text" class="form-control" placeholder="مثال 30"/>' +
            '<span class="input-group-addon" >تعداد کل</span>' +
            '<input name="total[]" type="text" class="form-control" placeholder="مثال 50"/>' +
            '<span class="input-group-addon" >قیمت</span>' +
            '<input name="s_price[]" type="text" class="form-control" placeholder="مثال 50000"/>' +
            '<span class="input-group-addon">تخفیف</span>' +
            '<input name="s_discount[]" type="text" class="form-control" placeholder="مثال 1000"/>' +
            '<span class="input-group-addon delete_slide"><i class="fa fa-close"></i></span>' +
            '</div>';
        $("button#inventory_add").before(data);
    });
    $('#video-input').change(function () {
        $('#video-preview').html($('#video-input').val())
    });
    $(document).on('click', 'span.delete_slide', function (event) {
        $(this).parents("div.myin").remove();
    });
    $(document).on('click', 'button#image_add', function (event) {
        count_image++;
        var data = '     <div class="slide">' +
            '                        <div class="col-xs-12 col-sm-4">' +
            '                            <img id="holder' + count_image +
            '" class="img-thumbnail text-center holder_image "' +
            '                                 src="{{ url("/images/default.jpg")}}">' +
            '                        </div>' +
            '                        <div class="myslide">' +
            '                            <div class="col-xs-12 col-sm-8">' +
            '                                <div class="input-group">' +
            '                            <span class="input-group-btn">' +
            '                                   <button type="button" class="btn btn-primary lfm" data-input="thumbnail' +
            count_image + '"' +
            '                                           data-preview="holder' + count_image +
            '">انتخاب تصویر :</button>' +
            '                                          </span>' +
            '                                    <input type="text" id="thumbnail' + count_image +
            '" class="form-control"' +
            '                                           placeholder="مثال : www.example.com/image.jpg" name="images[]">' +
            '                                </div>' +
            '<div>' +
            '                                <button type="button" class="btn btn-danger btn-block delete_slide"> حذف</button>' +

            '</div>' +
            '                            </div>' +
            '                        </div>' +
            '                    </div>';
        $("div#slides").append(data);
    });
    $(document).on('click', 'button.delete_slide', function (event) {
        $(this).parents("div.slide").remove();
    });
</script>
<script>
    $(document).on('submit', '#form', function (event) {
        waitingDialog.show();
        trunoffbutton("#sub");
        var submit_data = $(this).serializeArray(); 
        for (var i in selectedSymbolIds)
            submit_data.push({
                name: 'selectedSymbolIds[]',
                value: selectedSymbolIds[i]
            });
        event.preventDefault();
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });