@extends('layouts.app')

@section('title', ($product->id > 0 ? 'Edit Product' : 'Add Product').' | Products')

@section('extrastyles')
    <link rel="stylesheet" href="{{ asset('plugins/summernote/summernote.css') }}">
    <link rel="stylesheet" href="{{ asset('plugins/summernote/summernote-bs3.css') }}">
    <link rel="stylesheet" href="{{ asset('plugins/select2/select2.css') }}">
    <link href="{{ asset('/plugins/dropzone/basic.css') }}" rel="stylesheet">
    <link href="{{ asset('/plugins/dropzone/dropzone.css') }}" rel="stylesheet">
    <link rel="stylesheet" href="{{ asset('/plugins/bootstrap-datetimepicker/css/bootstrap-datetimepicker.min.css') }}" />
    <style>
        .modal-backdrop{
            opacity: 0.5 !important;
        }
        .note-editable ,.note-editing-area{
            min-height: 200px;
        }
        .mogo_image_gallery {
            overflow-y: hidden;
            overflow-x: hidden;
        }
        #image_gallery_listing li {
            position: relative;
        }
        #image_gallery_listing li input[type=checkbox] {
            position: absolute;
            left:0px;
            top:-3px;
        }
        .head_label {
            font-size: 17px !important;
        }
        #attributeIds {
            min-height: 300px;
        }
        .form-control option[disabled]{
            cursor: not-allowed;
            color: rgb(194, 194, 194);
        }
        .dropzone {
            min-height: 250px;
        }
        .options-pro input {
            width: 100px;
            display: inline-block;
        }
        #option-items-list .options-pro{
            margin-bottom: 15px;
        }
        #option-items-list .meta_title{
            padding-top: 9px;
        }
        .loader-image img,.product_option_image_list li img{
            max-width: 150px;
            max-height: 150px;
        }
        .product_media ,.product_option_image_list{
            width: 100%;
            float: left;
            list-style: none;
            padding: 0px;
            margin: 0px;
            margin-top: 15px;
        }
        .product_media li , .product_option_image_list li{
            float: left;
            list-style: none;
            margin-right: 10px;
            margin-bottom: 10px;
            position: relative;
            max-width: 150px;
        }
        .product_media li a.remove-image ,.product_option_image_list li .remove_slide_image{
            position: absolute;
            right: 6px;
            top: 0px;
            color: red;
            font-size: 15px;
        }
        .product_option_image_list li.selected {
            border: 2px solid red;
        }
        #option-items-list .product_option_image_btn {
            margin-right: 10px;
        }
        p.attribute strong {
            min-width: 125px;
            float: left;
        }
        .ibox-custom .panel-custom {
            display: block !important;
        }
        .select2-container {
            z-index: 99999;
        }
        .meta_title_preview {
            font-size: 16px;
            line-height: 2.1rem;
            color: #1a0dab;
            margin-bottom: .2rem;
        }
        .meta_description_preview{
            color: #4d5156;
            line-height: 1.58;
            word-wrap: break-word;
            font-size: 14px;
        }
        .meta_url_preview {
            line-height: 1.6rem;
            color: #006621;
            font-size: 14px;
        }
    </style>
@endsection

@section('content')
    <div id="updatePage">
        {!! Form::open(['novalidate' => 'novalidate', 'onsubmit' => 'return savePage(this);']) !!}
        <input type="hidden" name="page_id" value="" />
        <div class="studio98_websters">
            <div class="row">
                <div class="col-lg-8">
                    <div class="ibox float-e-margins">
                        <div class="ibox-title2">
                            <h5>{{ $product->id > 0 ? 'Edit Product' : 'Add Product' }}</h5>
                            <div class="ibox-tools">
                                <a class="collapse-link" href="">
                                    <i class="fa fa-angle-up"></i>
                                </a>
                            </div>
                        </div>
                        <div class="ibox-content p-md">
                            @include('flash::message')
                            @include('errors._form')
                            <div class="col-lg-12">
                                <div class="clearfix"></div>
                                <div class="form-group">
                                    {!! Form::label('title','Title') !!}
                                    {!! Form::text('title' , $product->title , ['class' => 'form-control','placeholder' => 'Title','required'=>'true']) !!}
                                </div>

                                <div class="form-group">
                                    <input type="hidden" id="post-content" name="content" value="" />
                                    {!! Form::label('description','Description') !!}
                                    <div class="summernote">{!!  $product->content !!}</div>
                                    <div class="clearfix"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                    @include('vendor-product._partials_form.basic_info')
                    @include('vendor-product._partials_form._pricing')
                    @if($product->id > 0)
                        @include('vendor-product._partials_form._upload')
                        @include('vendor-product._partials_form.option')
                    @endif
                </div>
                <div class="col-lg-4">
                    @include('vendor-product._partials_form.publish')
                    @include('vendor-product._partials_form.attribute_form')
                    @include('vendor-product._partials_form.product_specification')
                </div>
            </div>
        </div>
    </div>
    {!! Form::close() !!}

    @include('vendor-product._product_popup')

    @include('layouts._gallery_popup')
@endsection

@section('footer')
    <script src="{{ asset('/plugins/dropzone/dropzone.js') }}"></script>
    <script src="{{ asset('/plugins/select2/select2.js') }}"></script>
    <script src="{{ asset('/plugins/summernote/summernote.min.js') }}"></script>
    <script src="{{ asset('/plugins/dateRangePicker/moment.js') }}" ></script>
    <script src="{{ asset('/plugins/bootstrap-datetimepicker/js/bootstrap-datetimepicker.min.js') }}" ></script>

    <script>
        $(document).ready(function () {
            initializeSummerNote();
            $('#role_id').select2();
            $('.options-pro select').select2();
            $('#pro_meta_description').keyup(function() {
                var lenghtStr = $(this).val().length;
                $('.meta_description_preview').text($(this).val());
                $(this).closest('.form-group').find('p').text(lenghtStr+' of 160 Characters used');
            });

            dateTimePicker('#published_date', 'YYYY-MM-DD');

            $('.pro_specs').click(function () {
                var spec_name = $('#spec_name').val();
                var spec_value = $('#spec_value').val();
                if(spec_name !== '' && spec_value !== '') {
                    var html = '<p class="clearfix product-spec">\n' +
                        '        <span class="specification-name">'+spec_name+'</span>\n' +
                        '        <span class="specification-value">'+spec_value+'</span>\n' +
                        '        <a href="javascript:void(0)" class="remove-spec pull-right" title="Delete"><i class="fa fa-trash-o"></i></a>\n' +
                        '        <input type="hidden" name="product_specs[]" value="'+spec_name+'|'+spec_value+'">\n' +
                        '    </p>';
                    $('#product-specs-list').append(html);
                    $('#spec_name').val('');
                    $('#spec_value').val('');
                }
            });

            $('.product_media').sortable({
                forcePlaceholderSize: true,
                opacity: 1,
                update: function (event, ui) {
                    var order = $(this).sortable('serialize');
                    $.ajax({
                        data: order,
                        type: 'POST',
                        url: "{{ url('product/image-order/'.$product->id)  }}&_token={{ csrf_token() }}"
                    });
                }
            }).disableSelection();

            $(document).on('click', '.sync_stock', function (){
                $.ajax({
                    method: 'POST',
                    url: '{{ url('product/stock-sync/'.$product->id)}}',
                    data: '_token='+csrf_token
                }).done(function() {
                    toastrShow('Sync job is queued!','Success');
                });
            });

        });


        Dropzone.options.dropzoneForm = {
            paramName: "file",
            maxFilesize: 20, // MB
            dictDefaultMessage: "<strong>Drop files here or click to upload. </strong>",
            uploadMultiple: true,
            acceptedFiles: ".jpeg,.jpg,.png,.gif",
            maxFiles: 50,
            parallelUploads: 50,
            params : {_token : csrf_token },
            dictFileTooBig: 'Image size has a 20MB Limit. Please upload a smaller image.if someone tries to upload a larger one.',
            url: '{{ url('product/upload-file/'.$product->id)  }}',
            init: function () {
                this.on('maxfilesreached', function () {
                    toastrShow('Error!','Image size has a 20MB Limit. Please upload a smaller image.if someone tries to upload a larger one.');
                    return false;
                });
                this.on('maxfilesexceeded', function () {
                    toastrShow('Error!','Image size has a 20MB Limit. Please upload a smaller image.if someone tries to upload a larger one.');
                    return false;
                });
                this.on("successmultiple", function(file, response) {
                    response = JSON.parse(response);

                    $(response).each(function(i,filePath) {
                        $('.upload-media-main ul.product_media').append('<li id="image-'+filePath.id+'" class="loader-image" data-id="'+filePath.id+'"><a href="javascript:void(0)" class="remove-image"> x </a><img src="'+filePath.file_path+'"></li>');
                    });
                });
            },
        };

        $(document).on('click', '.remove-image', function () {
            if(confirm('Are you sure you want to delete?')) {
                var potta = $(this).closest('li');
                var media_id = potta.data('id');
                var item_id  = potta.data('item');
                $.ajax({
                    method: 'POST',
                    url: '{{ url('product/media-delete/'.$product->id)}}',
                    data: 'media_id='+media_id+'&_token='+csrf_token+'&item_id='+item_id,
                }).done(function() {
                    potta.remove();
                });
            }
        });
        function savePage(object)
        {
            var sHTML = $('.summernote').summernote('code');
            $('#post-content').val(sHTML);
            return true;
        }
    </script>
    @include('vendor-product.script.attribute')
    @if($product->id > 0)
        @include('vendor-product.script.option')
    @endif
@endsection