@inject('hookServices','App\Blueprint\Services\hookServices')
<div class="portletHousing col-md-12">
    <div class="portlet light bordered fieldWizard">
        <div class="portlet-title">
            <div class="caption">
                <i class="fa fa-cubes font-grey-gallery"></i>
                <span class="caption-subject bold font-grey-gallery uppercase">{{ _t('settings.package') }}</span>
                <span class="caption-helper">
                @if(isset($package_id))
                        {{ _t('settings.edit_package') }}
                    @else
                        {{ _t('settings.add_package') }}
                    @endif
            </span>
            </div>
            <div class="inputs">
                <button type="button"
                        class="btn btn-circle dark btn-outline sbold packageList">{{ _t('settings.back') }}</button>
            </div>
        </div>
        <form role="form" class="packageForm" id="packageForm">
            @if(isset($package_id))
                <input type="hidden" name="action" value="edit">
            @else
                <input type="hidden" name="action" value="insert">
            @endif
            <div class="portlet-body" style="position: relative;">
                @if($cart_status)
                    @include('admin.Cartform.opencart_product_form')
                @else
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label>{{ _t('settings.package_name') }}</label><span class="required"> * </span>
                                <input type="text" name="name" class="form-control" id="name"
                                       placeholder="{{ _t('settings.Enter_package_name') }}"
                                       value="{{ $packageData->get('name') }}">
                                <input type="hidden" name="update_id" @if(isset($package_id)) value="{{ $package_id }}"
                                       @else value="" @endif>
                            </div>
                            <div class="form-group">
                                <label>{{ _t('settings.slug') }}</label><span class="required"> * </span>
                                <input type="text" name="slug" class="form-control" id="slug"
                                       placeholder="{{ _t('settings.Enter_slug') }}"
                                       value="{{ $packageData->get('slug') }}">
                            </div>
                            <div class="form-group">
                                <label for="price">{{ _t('settings.price') }}</label><span class="required"> * </span>
                                <input type="text" name="price" class="form-control" id="price"
                                       placeholder="{{ _t('settings.Enter_price') }}"
                                       value="{{ $packageData->get('price') }}"
                                       onkeypress="return event.charCode &gt;= 48 &amp;&amp; event.charCode &lt;= 57">
                            </div>
                            <div class="form-group">
                                <label for="product_value">{{ _t('settings.product_value') }}</label><span
                                    class="required"> * </span>
                                <input type="text" name="pv" class="form-control" id="pv"
                                       placeholder="{{ _t('settings.enter_product_value') }}"
                                       value="{{ $packageData->get('pv') }}"
                                       onkeypress="return event.charCode &gt;= 48 &amp;&amp; event.charCode &lt;= 57">
                            </div>
                            <div class="form-group">
                                <label for="sort_order">{{ _t('settings.sort_order') }}</label><span
                                    class="required"> * </span>
                                <input type="text" name="sort_order" class="form-control" id="sort_order"
                                       placeholder="{{ _t('settings.sort_order') }}"
                                       value="{{ $packageData->get('sort_order') }}"
                                       onkeypress="return event.charCode &gt;= 48 &amp;&amp; event.charCode &lt;= 57">
                            </div>
                            <div class="form-group">
                                <label for="sort_order">{{ _t('settings.type') }}</label><span
                                    class="required"> * </span>
                                <select name="type" class="form-control select2 input-sm">
                                    <option value="">{{ _t('settings.select_type') }}</option>
                                    <option value="enrollment" @if($packageData->get('type') =='enrollment')selected="selected" @endif>{{ _t('settings.enrollment') }}</option>
                                    <option value="rePurchase" @if($packageData->get('type') =='rePurchase')selected="selected" @endif>{{ _t('settings.rePurchase') }}</option>
                                </select>
                            </div>
                            {!! defineFilter('packageFormBottom', '', 'root',['package' => $packageData]) !!}
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="sort_order">{{ _t('settings.description') }}</label><span class="required"> * </span>
                                <textarea class="packageDescription" name="description" id="description"
                                          placeholder="{{ _t('settings.Package_descriptions') }}">{{ $packageData->get('description') }}</textarea>
                            </div>
                            <div class="form-group">
                                <div class="input-group">
                                <span class="input-group-btn">
                                    <a id="fmTrigger" data-input="thumbnail" data-preview="holder"
                                       class="btn btn-outline dark fmTrigger">
                                       <i class="fa fa-picture-o"></i> {{ _t('settings.choose') }}
                                    </a>
                                </span>
                                    @php
                                        $placeholderImage = $packageData->get('image') != '' ? $packageData->get('image') : 'images/placeholder.jpg';
                                    @endphp
                                    <img id="holder" class="fmImage"
                                         src="{{ asset($placeholderImage) }}">
                                    <input id="thumbnail"
                                           value="{{ $packageData->get('image','http://placehold.it/150x150') }}"
                                           class="form-control"
                                           name="image" type="hidden" name="filepath">
                                </div>
                            </div>
                            <div class="form-group">
                                <button type="button" class="btn dark ladda-button packageSubmit" style="float:left;"
                                        data-style="contract">{{ _t('settings.save') }}
                                </button>
                                @if(!isset($package_id))
                                    <button type="button" class="btn red ladda-button packageReset" style="float:left; margin-left: 5px;"
                                            data-style="contract">{{ _t('settings.reset') }}
                                    </button>
                                @endif
                            </div>
                        </div>
                    </div>
                @endif
            </div>
        </form>
    </div>
</div>
<script type="text/javascript">
    "use strict";
    //Document ready functions

    $('.packageList').click(function () {
        loadPackageList();
    });
    //bind filemanager to button
    var domain = '{{ asset('filemanage') }}';

    $('.fmTrigger').filemanager('image', {prefix: domain});

    $('.packageDescription').summernote({
        placeholder: '{{ _t('settings.Enter_Description_here') }}',
        height: 150
    });

    $('.packageReset').click(function () {
        let btn = Ladda.create(this); // bind Ladda to this button
        btn.start();

        let form = $('#packageForm');
        // Clear input, textarea, select
        form.find('input[type="text"], input[type="hidden"], select').val('');
        $('.packageDescription').summernote('code', '');

        // Reset image preview to placeholder
        $('#holder').attr('src', '{{ asset("images/placeholder.jpg") }}');
        $('#thumbnail').val('');

        // Remove validation errors
        form.find('.form-group').removeClass('has-error');
        form.find('.help-block-error').remove();

        setTimeout(function () {
            btn.stop();
        }, 300);
    });

    $(function () {
        Ladda.bind('.ladda-button');

        var form = $('#packageForm');
        var error1 = $('.alert-danger', form);
        var success1 = $('.alert-success', form);

        $.validator.addMethod('ajaxValidate', function (value, element, param) {
            var isValid = !$(element).parent().hasClass('ajaxValidationError');
            return isValid; // return bool here if valid or not.
        }, function (param, element) {
            return $(element).siblings('.help-block-error').text();
        });

        var validator = form.validate({
            errorElement: 'span', //default input error message container
            errorClass: 'help-block help-block-error', // default input error message class
            focusInvalid: false, // do not focus the last invalid input
            ignore: "", // validate all fields including form hidden input
            rules: {
                'name': {
                    required: true,
                    ajaxValidate: true,
                },
                'slug': {
                    required: true,
                    ajaxValidate: true,
                },
                'price': {
                    required: true,
                    number: true,
                    ajaxValidate: true,
                },
                'pv': {
                    required: true,
                    number: true,
                    ajaxValidate: true,
                },
                'description': {
                    required: true,
                    ajaxValidate: true,
                },
                'sort_order': {
                    required: true,
                    number: true,
                    ajaxValidate: true,
                },
                'type': {
                    required: true,
                    ajaxValidate: true,
                },
            },
            messages: {
                'name': {
                    required: "{{ _t('settings.please_enter_package_name') }}",

                },
                'slug': {
                    required: "{{ _t('settings.please_enter_slug') }}",

                },
                'price': {
                    required: "{{ _t('settings.please_enter_package_price') }}",
                    number: "{{ _t('settings.invalid_amount') }}",
                },
                'pv': {
                    required: "{{ _t('settings.please_enter_package_product_value') }}",
                    number: "{{ _t('settings.invalid_amount') }}",
                },
                'description': {
                    required: "{{ _t('settings.please_enter_package_description') }}",
                },
                'sort_order': {
                    required: "{{ _t('settings.please_enter_package_sort_order') }}",
                    number: "{{ _t('settings.invalid_amount') }}",
                },
                'type': {
                    required: "{{ _t('settings.please_select_any_type') }}",
                },
            },

            errorPlacement: function (error, element) {
                if (element.is(':checkbox')) {
                    error.insertAfter(element.closest(".md-checkbox-list, .md-checkbox-inline, .checkbox-list, .checkbox-inline"));
                } else if (element.is(':radio')) {
                    error.insertAfter(element.closest(".md-radio-list, .md-radio-inline, .radio-list,.radio-inline"));
                } else {
                    error.insertAfter(element); // for other inputs, just perform default behavior
                }
            },

            highlight: function (element) { // hightlight error inputs
                $(element)
                    .closest('.form-group').addClass('has-error'); // set error class to the control group
            },

            unhighlight: function (element) { // revert the change done by hightlight
                $(element)
                    .closest('.form-group').removeClass('has-error'); // set error class to the control group
            },

            success: function (label) {
                label
                    .closest('.form-group').removeClass('has-error'); // set success class to the control group
            },
        });

        //Registration request

        $('.packageForm .packageSubmit').click(function () {

            $('.ajaxValidationError').removeClass('ajaxValidationError');

            var successCallBack = function (response) {
                Ladda.stopAll();
                loadPackageList();
                toastr.success("{{ _t('settings.package_updated_successfully') }}");
            }

            if (!form.valid()) {
                Ladda.stopAll();
                // return false;
            }

            var failCallBack = function (response) {
                Ladda.stopAll();
                var errors = response.responseJSON;

                for (var key in errors) {
                    var elemKey = key;
                    $('#adminConfig [name="' + elemKey + '"]').parent().addClass('ajaxValidationError');
                    var errorOption = {};
                    errorOption[elemKey] = errors[key];
                    validator.showErrors(errorOption);
                }
                Ladda.stopAll();
            }

            var options = {
                form: form,
                actionUrl: "{{ route('package.store') }}",
                successCallBack: successCallBack,
                failCallBack: failCallBack
            };
            sendForm(options);
        });
    });

    //Small patch

    $('body').on('keyup click', '.ajaxValidationError input', function () {
        $(this).parent().removeClass('ajaxValidationError');
    });
</script>