@extends('layouts.app')
@section('title')
    {{ __('messages.Productgroup') }}
@endsection
@section('content')
    <section class="content-header">
        <div class="container-fluid">
            <div class="row mb-2">
                <div class="col-sm-6">
                    <h1>{{ __('messages.Productgroup') }}</h1>
                </div>
                <div class="col-sm-6">
                    <ol class="breadcrumb float-sm-right">
                        <li class="breadcrumb-item"><a href="{{ route('home') }}">{{ __('messages.Dashboard') }}</a></li>
                        <li class="breadcrumb-item active">{{ __('messages.Productgroup') }}</li>
                    </ol>
                </div>
            </div>
        </div><!-- /.container-fluid -->
    </section>
    <section class="content">
        <div class="container-fluid">
            <div class="row">
                <div class="col-md-12">
                    <div class="card card-info">
                        <div class="card-header"></div>
                        <form class="form-horizontal" action="" method="post" id="productgroupForm" enctype="multipart/form-data">
                            @csrf
                            <div class="card-body">
                                <div class="form-group row d-flex">
                                    <label for="name" class="col-sm-2 col-form-label">{{ __('messages.Name') }}</label>
                                    <div class="col-sm-10">
                                        <input type="text" name="productgroup_name" class="form-control" id="productgroup_name" placeholder="{{ __('messages.Name') }}" value="{{ old('name') ? old('name') : ($productgroup->name??'') }}">
                                        @error('name')
                                            <span class="error invalid-feedback d-block">{{ $message }}</span>
                                        @enderror
                                    </div>
                                </div>
                                <div class="form-group row">
                                    <label for="name" class="col-sm-2 col-form-label">{{ __('messages.Properties') }}</label>
                                    <div class="col-sm-10">
                                        <input type="hidden" name="properties" id="properties">
                                        <button id="getJSONProperties" class="d-none" type="button"></button>
                                        {{-- <textarea name="properties" id="properties" class="form-control" cols="30" rows="5" placeholder="{{ __('messages.Properties') }}">{{ old('properties') ? old('properties') : ($productgroup->properties??'') }}</textarea> --}}
                                        @error('properties')
                                            <span class="error invalid-feedback d-block">{{ $message }}</span>
                                        @enderror
                                    </div>
                                </div>
                                <div class="form-group row">
                                    <div class="col-sm-12">
                                        <div id="fb-editor-properties"></div>
                                    </div>
                                </div>
                                <div class="form-group row">
                                    <label for="name" class="col-sm-2 col-form-label">{{ __('messages.Prices') }}</label>
                                    <div class="col-sm-10">
                                        <input type="hidden" name="prices" id="prices">
                                        <button id="getJSONPrices" class="d-none" type="button"></button>
                                        {{-- <textarea name="prices" id="prices" class="form-control" cols="30" rows="5" placeholder="{{ __('messages.Prices') }}">{{ old('prices') ? old('prices') : ($productgroup->prices??'') }}</textarea> --}}
                                        @error('prices')
                                            <span class="error invalid-feedback d-block">{{ $message }}</span>
                                        @enderror
                                    </div>
                                </div>
                                <div class="form-group row">
                                    <div class="col-sm-12">
                                        <div id="fb-editor-prices"></div>
                                    </div>
                                </div>
                            </div>
                            <div class="card-footer">
                                <button type="submit" id="submit" class="btn btn-info">{{ __('messages.Submit') }}</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection
@section('script')
<script src="https://formbuilder.online/assets/js/form-builder.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jQuery-formBuilder/3.5.2/form-builder.min.js"></script>
<script>
    jQuery(function($) {
        // Properties Form
        let properties = {!! json_encode(old('properties') ? old('properties') : ($productgroup->properties??'')) !!};
        let propertiesOptions = {
            dataType: 'json',
            disabledActionButtons: ['data','save'],
            formData: properties
        };
        const $fbEditorProperties = $(document.getElementById('fb-editor-properties'));
        $fbEditorProperties.formBuilder(propertiesOptions);
        document.getElementById('getJSONProperties').addEventListener('click', function() {
            $("#properties").val($fbEditorProperties.data('formBuilder').actions.getData('json', true));
        });

        // Prices Form
        let prices = {!! json_encode(old('prices') ? old('prices') : ($productgroup->prices??'')) !!};
        let pricesOptions = {
            dataType: 'json',
            disabledActionButtons: ['data','save'],
            formData: prices
        };
        const $fbEditorPrices = $(document.getElementById('fb-editor-prices'));
        $fbEditorPrices.formBuilder(pricesOptions);
        document.getElementById('getJSONPrices').addEventListener('click', function() {
            $("#prices").val($fbEditorPrices.data('formBuilder').actions.getData('json', true));
        });
    });

    $("#productgroupForm").submit(function() {
        $("#getJSONProperties").trigger("click");
        $("#getJSONPrices").trigger("click");
        let properties = $("#properties").val();
        if(properties == '[]') {
            $("#properties").val('');
        }
        let prices = $("#prices").val();
        if(prices == '[]') {
            $("#prices").val('');
        }
        return true;
    });
</script>
@endsection