{{--<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>--}}

<script type="application/javascript">
    jQuery(function ($) {

///////////////////////////////////////////////////
        $('button[data-event=\'showImageDialog\']').attr('data-toggle', 'image').removeAttr('data-event');

        $(document).delegate('button[data-toggle=\'image\']', 'click', function () {
            $('#modal-image').remove();

            $(this).parents('.note-editor').find('.note-editable').focus();

            $.ajax({
                url: '{{url('media')}}',
                dataType: 'html',
                data: {'_token': $('meta[name=csrf-token]').attr('content')},
                beforeSend: function () {
                    $('#button-image i').replaceWith('<i class="fa fa-circle-o-notch fa-spin"></i>');
                    $('#button-image').prop('disabled', true);
                },
                complete: function () {
                    $('#button-image i').replaceWith('<i class="fa fa-upload"></i>');
                    $('#button-image').prop('disabled', false);
                },
                success: function (html) {
                    $('body').append('<div id="modal-image" class="modal">' + html + '</div>');

                    $('#modal-image').modal('show');
                }
            });
        });

        // Image Manager
        $(document).delegate('a[data-toggle=\'image\']', 'click', function (e) {
            e.preventDefault();

            var element = this;

            $(element).popover({
                html: true,
                placement: 'left',
                trigger: 'manual',
                content: function () {

                    return '<button type="button" id="button-image" class="btn btn-primary"><i class="fa fa-pencil"></i></button> <button type="button" id="button-clear" class="btn btn-danger"><i class="fa fa-trash-o"></i></button>';
                }
            });

            $(element).popover('toggle');

            $('#button-image').on('click', function () {
                $('#modal-image').remove();
                $.ajax({
                    url: '{{url('catalog-media')}}',
                    dataType: 'html',
                    data: {'_token': $('meta[name=csrf-token]').attr('content'),'target':$(element).parent().find('input').attr('id'),  'thumb': $(element).attr('id')},
                    beforeSend: function () {
                        $('#button-image i').replaceWith('<i class="fa fa-circle-o-notch fa-spin"></i>');
                        $('#button-image').prop('disabled', true);
                    },
                    complete: function () {
                        $('#button-image i').replaceWith('<i class="fa fa-upload"></i>');
                        $('#button-image').prop('disabled', false);
                    },
                    success: function (html) {
                        $('body').append('<div id="modal-image" class="modal">' + html + '</div>');

                        $('#modal-image').modal('show');
                    }
                });

                $(element).popover('hide');
            });

            $('#button-clear').on('click', function () {
                $(element).find('img').attr('src', $(element).find('img').attr('data-placeholder'));
                $(element).parent().find('input').attr('value', '');
                $(element).popover('hide');
            });
        });
//////////////////////////////////////

    });
</script>

<div class="wrapper-md">
    <div class="row">

        <div class="col-sm-9">
            <div class="panel panel-default">
                <div class="bg-light lter b-b wrapper-md">
                    <strong> Add/Edit Product</strong>
                    <div class="pull-right">
                        <input type="hidden" name="id" id="id" value="{{ $product->id ?? '' }}"/>
                        <input type="hidden" name="menu_type" value="Product"/>
                        <button type="submit" id="submit" class="btn btn-primary"><i class="fa fa-save"></i> Save
                        </button>
                    </div>
                </div>
                <div class="panel-body">
                    <div class="card">

                        <div class="card-body">


                            @if ($errors->any())
                                <ul class="alert alert-danger">
                                    @foreach ($errors->all() as $error)
                                        <li>{{ $error }}</li>
                                    @endforeach
                                </ul>
                            @endif

                            <ul class="nav nav-tabs" role="tablist">
                                <li class="nav-item">
                                    <a class="nav-link active" data-toggle="tab" href="#General" data-placement="left"
                                       data-toggle="tooltip" data-original-title="Tooltip on left">General</a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link" data-toggle="tab" href="#Data">Data</a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link" data-toggle="tab" href="#Zone">Zone</a>
                                </li>

                                <li class="nav-item">
                                    <a class="nav-link" data-toggle="tab" href="#Links">Links</a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link" data-toggle="tab" href="#Option">Option</a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link" data-toggle="tab" href="#Images">Images</a>
                                </li>
                        {{--        <li class="nav-item">
                                    <a class="nav-link" data-toggle="tab" href="#CustomField">Custom Field</a>
                                </li>
--}}
                            </ul>
                            <!-- Tab panes -->
                            <div class="tab-content">
                                <div id="General" class="  tab-pane active"><br>
                                    <h3>General</h3>

                                    @include('admin/product/general')
                                </div>
                                <div id="Data" class="  tab-pane fade"><br>
                                    <h3>Data</h3>
                                    @include('admin/product/data')
                                </div>

                                <div id="Zone" class="  tab-pane fade"><br>
                                    @include('admin/product/zonewise_price')
                                </div>
                                <div id="Links" class="  tab-pane fade"><br>

                                    @include('admin/product/links')
                                </div>
                                <div id="Attribute" class="  tab-pane fade"><br>
                                    <h3>Attribute</h3>
                                    <p> Attribute</p>
                                </div>
                                <div id="Option" class="  tab-pane fade"><br>

                                    @include('admin/product/options')
                                </div>
                                <div id="Recurring" class="  tab-pane fade"><br>
                                    <h3>Recurring</h3>
                                    <p> Recurring</p>
                                </div>
                                <div id="Discount" class="  tab-pane fade"><br>
                                    <h3>Discount</h3>
                                    <p> Discount</p>
                                </div>
                                <div id="Special" class="  tab-pane fade"><br>
                                    <h3>Special</h3>
                                    <p> Special</p>
                                </div>
                                <div id="Images" class="  tab-pane fade"><br>
                                    <h3>Image</h3>
                                    @include('admin/product/images')
                                </div>
                                <div id="Image" class="  tab-pane fade"><br>
                                    <h3>Reword Points</h3>
                                    <p> Image</p>
                                </div>
                                <div id="CustomField" class="  tab-pane fade"><br>
                                    <h3>Custom Field</h3>
                                    <p> Custom Field</p>
                                </div>

                            </div>


                            <div class="form-group  text-right">
                                <input class="btn btn-primary" type="submit"
                                       value="{{ $formMode === 'edit' ? 'Update' : 'Submit' }}">
                            </div>

                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-sm-3">


            <div class="panel panel-default">
                <div class="bg-light lter b-b wrapper-md">
                    <strong>Published</strong>
                    <label class="i-switch bg-primary m-t-xs m-r pull-right">
                        <input type="checkbox" name="status" value="Active"
                               @if(isset($product->status)&&($product->status=='Active' || $result['status']=='')) checked @endif>
                        <i></i>
                    </label>
                </div>

                <div class="panel-body">
                    <div class="form-group {{ $errors->has('order_by') ? 'has-error' : ''}}">
                        <label for="order_by" class="control-label">{{ 'Order By' }}</label>
                        <input class="form-control" name="order_by" type="number" id="order_by"
                               value="{{ isset($product->order_by) ? $product->order_by : ''}}">
                        {!! $errors->first('order_by', '<p class="help-block">:message</p>') !!}
                    </div>
                </div>

            </div>


            <div class="panel panel-default">
                <div class="bg-light lter b-b wrapper-md">
                    <strong>Apply Discount</strong>
                    <label class="i-switch bg-primary m-t-xs m-r pull-right">
                        <input type="checkbox" name="discount_apply" value="Yes"
                               @if(isset($product) && $product->discount_apply =='Active') checked @endif>
                        <i></i>
                    </label>
                    <p> {{ $DISCOUNT_MESSAGE ?? ''}}  </p>
                </div>
            </div>


            <div class="panel panel-default">
                <div class="bg-light lter b-b wrapper-md">
                    <strong>Product image</strong>
                </div>

                <div class="wrapper-md" ng-controller="FormDemoCtrl">
                    <div class="box-body">
                        <div class="row form-group">
                            <div class="col-md-12">
                                <a href=""  id="thumb-image" data-toggle="image" class="img-thumbnail"><img
                                            src="{{ asset($product->image ?? 'images/no_image.png') }}" alt="" title=""
                                            data-placeholder="no_image.png" class="img img-responsive"/></a>
                                <input type="text" name="image" value="{{ $product->image ?? '' }}" id="input-image"/>

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





            <div class="panel panel-default">
                <div class="bg-light lter b-b wrapper-md">
                    <strong> Access limit</strong>
                </div>

                <div class="wrapper-md" ng-controller="FormDemoCtrl">
                    <div class="box-body">
                        <div class="row form-group">
                            <div class="col-md-12">


                                <input type="checkbox" name="access_limit[]"
                                       value="" @if(!isset($product->access_limit)) checked="checked" @endif /> <label>
                                    No Restriction</label><br/>

                                @php $member_codeArr = @explode(",", $product->access_limit ?? ''); @endphp
                                @if(isset($roles))
                                    @foreach($roles as $key=>$item)
                                        <input type="checkbox" name="access_limit[]" value="{{$item->id}}"
                                               @if(@in_array($item->id, $member_codeArr)) checked="checked" @endif
                                        /> {{ $item->name }} <br/>
                                    @endforeach
                                @endif

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

<script type="application/javascript">
    jQuery(function ($) {

        // Contact form
        var form = $('#main-form');
        form.submit(function (event) {
            CKupdate();

            event.preventDefault();
            var form_status = $('<div class="form_status"></div>');
            form.prepend(form_status.html('<p><i class="fa fa-spinner fa-spin"></i> Waiting...</p>').fadeIn());


            $.ajax({
                url: $(this).attr('action'),
                type: 'POST',
                dataType: 'JSON',
                data: form.serialize(),
                success: function (response) {    // alert(response)

                }
            }).done(function (data) {
                if (data.type == 'success') {
                    //eval(data.url
                    var $container = $(".box-body");
                    window.top.location = data.url
                }
                // $('#myModal').modal('hide');
                form_status.html('<p class="text-success">' + data.message + '</p>').delay(1000).fadeOut();
                // window.top.location = " ";
            });
        });

    });


   function CKupdate() {
        for (instance in CKEDITOR.instances)
            CKEDITOR.instances[instance].updateElement();
    }
</script>