first upload all files

2023-06-11 13:14:03 +01:00
parent f14dbc52b5
commit c08b36d1b6
1705 changed files with 106852 additions and 0 deletions
--- a/Modules/Option/Resources/assets/admin/js/BaseOption.js
+++ b/Modules/Option/Resources/assets/admin/js/BaseOption.js
@@ -0,0 +1,114 @@
+export default class {
+    addOptionsErrors(errors) {
+        for (let key in errors) {
+            let inputField = this.getInputFieldForErrorKey(key);
+
+            inputField.closest('.option').addClass('option-has-errors');
+
+            let parent = inputField.parent();
+
+            parent.append(`<span class="help-block">${errors[key][0]}</span>`);
+        }
+    }
+
+    getRowTemplate(data) {
+        let template = _.template($('#option-select-values-template').html());
+
+        return $(template(data));
+    }
+
+    changeOptionType({ optionId, type, values = [] }) {
+        let optionValuesElement = this.getOptionValuesElement(optionId);
+        let templateType = this.getTemplateType(type, optionValuesElement);
+        let optionValuesData = { optionId, value: { id: '', label: '', price: '', price_type: 'fixed' } };
+
+        if (this.shouldNotChangeTemplate(templateType, optionValuesElement)) {
+            return;
+        }
+
+        if (values.length !== 0 && templateType === 'text') {
+            optionValuesData.value = values[0];
+        }
+
+        let template = _.template($(`#option-${templateType}-template`).html());
+
+        optionValuesElement.html(template(optionValuesData));
+
+        if (templateType === 'select') {
+            this.addOptionRowEventListener(optionId);
+
+            this.addOptionRows({ optionId, values });
+
+            if (values.length === 0) {
+                this.getAddNewRowButton(optionId).trigger('click');
+            }
+        }
+    }
+
+    addOptionRows({ optionId, values }) {
+        for (let [index, value] of values.entries()) {
+            this.addOptionRow({
+                optionId,
+                valueId: index,
+                value,
+            });
+        }
+    }
+
+    getTemplateType(type) {
+        if (this.templateTypeIsText(type)) {
+            return 'text';
+        }
+
+        if (this.templateTypeIsSelect(type)) {
+            return 'select';
+        }
+    }
+
+    templateTypeIsText(type) {
+        return ['field', 'textarea', 'date', 'date_time', 'time'].includes(type);
+    }
+
+    templateTypeIsSelect(type) {
+        return ['dropdown', 'checkbox', 'checkbox_custom', 'radio', 'radio_custom', 'multiple_select'].includes(type);
+    }
+
+    shouldNotChangeTemplate(templateType, optionValuesElement) {
+        return templateType === undefined || this.alreadyHasCurrentTemplate(templateType, optionValuesElement);
+    }
+
+    alreadyHasCurrentTemplate(templateType, optionValuesElement) {
+        if (templateType === 'text') {
+            return optionValuesElement.children().hasClass('option-text');
+        }
+
+        if (templateType === 'select') {
+            return optionValuesElement.children().hasClass('option-select');
+        }
+    }
+
+    initOptionRow(template, selectValues) {
+        if (selectValues.length !== 0 && ! selectValues.is('.sortable')) {
+            this.makeSortable(selectValues[0]);
+
+            selectValues.addClass('sortable');
+        }
+
+        this.deleteOptionRowEventListener(template);
+
+        window.admin.tooltip();
+    }
+
+    deleteOptionRowEventListener(row) {
+        row.find('.delete-row').on('click', (e) => {
+            $(e.currentTarget).closest('.option-row').remove();
+        });
+    }
+
+    makeSortable(el) {
+        Sortable.create(el, {
+            handle: '.drag-icon',
+            animation: 150,
+        });
+    }
+}
--- a/Modules/Option/Resources/assets/admin/js/Option.js
+++ b/Modules/Option/Resources/assets/admin/js/Option.js
@@ -0,0 +1,53 @@
+import BaseOption from './BaseOption';
+
+export default class extends BaseOption {
+    constructor() {
+        super();
+
+        let values = FleetCart.data['option.values'];
+
+        $('#type').on('change', (e) => {
+            super.changeOptionType({ type: e.currentTarget.value, values });
+            super.addOptionsErrors(FleetCart.errors['option.values']);
+        });
+
+        $('#type').trigger('change');
+
+        window.admin.removeSubmitButtonOffsetOn('#values');
+    }
+
+    addOptionRow({ valueId, value = { label: '', price: '', price_type: 'fixed' } }) {
+        let template = this.getRowTemplate({ optionId: undefined, valueId, value });
+
+        let selectValues = $('#select-values').append(template);
+
+        super.initOptionRow(template, selectValues);
+    }
+
+    addOptionRowEventListener() {
+        $('#add-new-row').on('click', () => {
+            let valueId = $('#option-values .option-row').length;
+
+            this.addOptionRow({ valueId });
+        });
+    }
+
+    getOptionValuesElement() {
+        return $('#option-values');
+    }
+
+    getAddNewRowButton() {
+        return $('#add-new-row');
+    }
+
+    getInputFieldForErrorKey(key) {
+        let keyParts = key.split('.');
+
+        // Replace all "_" to "-".
+        keyParts = keyParts.map(k => {
+            return k.split('_').join('-');
+        });
+
+        return $(`#${keyParts.join('-')}`);
+    }
+}
--- a/Modules/Option/Resources/assets/admin/js/ProductOption.js
+++ b/Modules/Option/Resources/assets/admin/js/ProductOption.js
@@ -0,0 +1,161 @@
+import BaseOption from './BaseOption';
+
+export default class extends BaseOption {
+    constructor() {
+        super();
+
+        this.optionsCount = 0;
+
+        this.addOptions(FleetCart.data['product.options']);
+
+        if (this.optionsCount === 0) {
+            this.addOption();
+        }
+
+        if (this.optionsCount > 3) {
+            this.collapseOptions();
+        }
+
+        super.addOptionsErrors(FleetCart.errors['product.options']);
+
+        $('#add-new-option').on('click', () => this.addOption());
+        $('#add-global-option').on('click', () => this.addGlobalOption());
+    }
+
+    addOptions(options) {
+        for (let option of options) {
+            this.addOption(option);
+        }
+    }
+
+    collapseOptions() {
+        let options = $('.option:not(.option-has-errors)');
+
+        for (let option of options) {
+            $(option).find('[data-toggle=collapse]').trigger('click');
+        }
+    }
+
+    addGlobalOption() {
+        let globalOptionId = $('#global-option').val();
+
+        if (globalOptionId === '') {
+            return window.admin.stopButtonLoading($('#add-global-option'));
+        }
+
+        $.ajax({
+            type: 'GET',
+            url: route('admin.options.show', globalOptionId),
+            dataType: 'json',
+            success: option => {
+                this.addOption(option);
+
+                window.admin.stopButtonLoading($('#add-global-option'));
+            },
+        });
+    }
+
+    addOption(option = { id: null, name: null, type: null, is_required: false, values: [] }) {
+        // Cast "is_required" field to boolean.
+        option.is_required = !! JSON.parse(option.is_required);
+
+        let optionId = this.optionsCount;
+
+        let template = _.template($('#option-template').html());
+        let html = $(template({ option, optionId }));
+
+        if (option.name !== null) {
+            setTimeout(() => {
+                $(`#option-${optionId}`).find('#option-name').text(option.name);
+            });
+        }
+
+        let optionGroup = $('#options-group').append(html);
+
+        if (! optionGroup.is('.sortable')) {
+            super.makeSortable(optionGroup[0]);
+
+            optionGroup.addClass('sortable');
+        }
+
+        this.deleteOptionEventListener(html);
+        this.updateOptionNameEventListener(optionId);
+        this.updateTemplateEventListener(optionId, option['values']);
+
+        window.admin.tooltip();
+
+        this.optionsCount++;
+    }
+
+    deleteOptionEventListener(option) {
+        option.find('.delete-option').on('click', (e) => $(e.currentTarget).closest('.option').remove());
+    }
+
+    updateOptionNameEventListener(optionId) {
+        let option = $(`#option-${optionId}`);
+        let old = option.find('#option-name').text();
+
+        $(option).find('.option-name-field').on('input', (e) => {
+            let name = e.currentTarget.value !== '' ? e.currentTarget.value : old;
+
+            option.find('#option-name').text(name);
+        });
+    }
+
+    updateTemplateEventListener(optionId, values = []) {
+        let optionTypeElement = $(`#option-${optionId}-type`);
+
+        optionTypeElement.on('change', (e) => {
+            let type = e.currentTarget.value;
+
+            if (type === '') {
+                return this.getOptionValuesElement(optionId).html('');
+            }
+
+            super.changeOptionType({ optionId, type, values });
+        });
+
+        // Trigger the "change" event on option type after attaching the listener
+        // this will automatically take effect of the current option which is
+        // maybe loaded from the old input values or from the product data.
+        optionTypeElement.trigger('change');
+    }
+
+    addOptionRow({ optionId, valueId, value = { label: '', price: '', price_type: 'fixed' } }) {
+        let template = this.getRowTemplate({ optionId, valueId, value });
+
+        let selectValues = $(`#option-${optionId}-select-values`).append(template);
+
+        super.initOptionRow(template, selectValues);
+    }
+
+    addOptionRowEventListener(optionId) {
+        $(`#option-${optionId}-add-new-row`).on('click', () => {
+            let valueId = $(`#option-${optionId}-values .option-row`).length;
+
+            this.addOptionRow({ optionId, valueId });
+        });
+    }
+
+    getOptionValuesElement(optionId) {
+        return $(`#option-${optionId}-values`);
+    }
+
+    getAddNewRowButton(optionId) {
+        return $(`#option-${optionId}-add-new-row`);
+    }
+
+    getInputFieldForErrorKey(key) {
+        let keyParts = key.split('.');
+
+        // Remove the first element which is "option".
+        keyParts.shift();
+
+        // Replace all "_" to "-".
+        keyParts = keyParts.map(k => {
+            return k.split('_').join('-');
+        });
+
+        return $(`#option-${keyParts.join('-')}`);
+    }
+}
--- a/Modules/Option/Resources/assets/admin/js/main.js
+++ b/Modules/Option/Resources/assets/admin/js/main.js
@@ -0,0 +1,10 @@
+import Option from './Option';
+import ProductOption from './ProductOption';
+
+if ($('#option-create-form, #option-edit-form').length !== 0) {
+    new Option();
+}
+
+if ($('#product-create-form, #product-edit-form').length !== 0) {
+    new ProductOption();
+}
--- a/Modules/Option/Resources/assets/admin/sass/main.scss
+++ b/Modules/Option/Resources/assets/admin/sass/main.scss
@@ -0,0 +1,127 @@
+.new-option {
+    .checkbox {
+        margin: 30px 0 0;
+        display: inline-block;
+    }
+
+    .delete-option {
+        margin-top: 25px;
+        padding: 10px 15px;
+    }
+}
+
+.options-group-wrapper {
+    .panel-title a {
+        position: relative;
+        text-decoration: none;
+        overflow: hidden;
+
+        > .drag-icon {
+            font-size: 16px;
+            color: #737881;
+            cursor: move;
+            vertical-align: top;
+            margin: 4px 10px 0 0;
+            white-space: nowrap;
+            display: inline-block;
+            i {
+                float: left;
+
+                &:nth-child(2) {
+                    margin-left: 1px;
+                }
+            }
+        }
+    }
+
+    .form-group {
+        margin-left: 0;
+        margin-right: 0;
+    }
+}
+
+.options {
+    .form-group {
+        margin: 0;
+    }
+
+    thead th {
+        &:first-child {
+            width: 40px;
+        }
+
+        &:last-child {
+            width: 60px;
+        }
+    }
+}
+
+.option-select {
+    .options {
+        .option-row {
+            td {
+                &:nth-child(2) {
+                    min-width: 180px;
+                }
+
+                &:nth-child(3) {
+                    min-width: 120px;
+                }
+
+                &:nth-child(4) {
+                    min-width: 110px;
+                }
+            }
+        }
+    }
+}
+
+.add-global-option {
+    .form-group {
+        margin-left: 0 !important;
+        margin-right: 10px !important;
+    }
+
+    > button {
+        margin-bottom: 15px;
+    }
+}
+
+
+@media screen and (max-width: 1199px) {
+    .add-global-option {
+        float: none !important;
+        clear: both;
+    }
+
+    .new-option {
+        .checkbox {
+            margin-top: 4px;
+        }
+
+        .delete-option {
+            margin-top: 0;
+        }
+
+        .p-l-0 {
+            padding-right: 0;
+        }
+    }
+
+    .options-group-wrapper {
+        .option-values {
+            .option-text,
+            .option-select {
+                margin-top: 15px;
+            }
+        }
+    }
+}
+
+@media screen and (max-width: 991px) {
+    .new-option {
+        .checkbox {
+            padding-top: 7px;
+        }
+    }
+}
--- a/Modules/Option/Resources/lang/en/attributes.php
+++ b/Modules/Option/Resources/lang/en/attributes.php
@@ -0,0 +1,21 @@
+<?php
+
+return [
+    'name' => 'Name',
+    'type' => 'Type',
+    'is_required' => 'Required',
+    'label' => 'Label',
+    'price' => 'Price',
+    'price_type' => 'Price Type',
+
+    // Validations
+    'values.*.label' => 'Label',
+    'values.*.price' => 'Price',
+    'values.*.price_type' => 'Price Type',
+
+    'options.*.name' => 'Name',
+    'options.*.type' => 'Type',
+    'options.*.values.*.label' => 'Label',
+    'options.*.values.*.price' => 'Price',
+    'options.*.values.*.price_type' => 'Price Type',
+];
--- a/Modules/Option/Resources/lang/en/options.php
+++ b/Modules/Option/Resources/lang/en/options.php
@@ -0,0 +1,52 @@
+<?php
+
+return [
+    'option' => 'Option',
+    'options' => 'Options',
+    'select_global_option' => 'Select Global Option',
+    'please_select_a_option_type' => 'Please select a option type.',
+    'table' => [
+        'name' => 'Name',
+        'type' => 'Type',
+    ],
+    'tabs' => [
+        'group' => [
+            'option_information' => 'Option Information',
+        ],
+        'general' => 'General',
+        'values' => 'Values',
+        'product' => [
+            'options' => 'Options',
+        ],
+    ],
+    'form' => [
+        'this_option_is_required' => 'This option is required',
+        'add_new_option' => 'Add New Option',
+        'add_global_option' => 'Add Global Option',
+        'new_option' => 'New Option',
+        'option_types' => [
+            'please_select' => 'Please Select',
+            'text' => 'Text',
+            'field' => 'Field',
+            'textarea' => 'Textarea',
+            'select' => 'Select',
+            'dropdown' => 'Dropdown',
+            'checkbox' => 'Checkbox',
+            'checkbox_custom' => 'Custom Checkbox',
+            'radio' => 'Radio Button',
+            'radio_custom' => 'Custom Radio Button',
+            'multiple_select' => 'Multiple Select',
+            'date' => 'Date',
+            'date_time' => 'Date & Time',
+            'time' => 'Time',
+        ],
+        'delete_option' => 'Delete Option',
+        'price' => 'Price',
+        'price_types' => [
+            'fixed' => 'Fixed',
+            'percent' => 'Percent',
+        ],
+        'add_new_row' => 'Add New Row',
+        'delete_row' => 'Delete Row',
+    ],
+];
--- a/Modules/Option/Resources/lang/en/permissions.php
+++ b/Modules/Option/Resources/lang/en/permissions.php
@@ -0,0 +1,10 @@
+<?php
+
+return [
+    'options' => [
+        'index' => 'Index Options',
+        'create' => 'Create Options',
+        'edit' => 'Edit Options',
+        'destroy' => 'Delete Options',
+    ],
+];
--- a/Modules/Option/Resources/lang/en/sidebar.php
+++ b/Modules/Option/Resources/lang/en/sidebar.php
@@ -0,0 +1,5 @@
+<?php
+
+return [
+    'options' => 'Options',
+];
--- a/Modules/Option/Resources/views/admin/options/create.blade.php
+++ b/Modules/Option/Resources/views/admin/options/create.blade.php
@@ -0,0 +1,18 @@
+@extends('admin::layout')
+
+@component('admin::components.page.header')
+    @slot('title', trans('admin::resource.create', ['resource' => trans('option::options.option')]))
+
+    <li><a href="{{ route('admin.options.index') }}">{{ trans('option::options.options') }}</a></li>
+    <li class="active">{{ trans('admin::resource.create', ['resource' => trans('option::options.option')]) }}</li>
+@endcomponent
+
+@section('content')
+    <form method="POST" action="{{ route('admin.options.store') }}" class="form-horizontal" id="option-create-form" novalidate>
+        {{ csrf_field() }}
+
+        {!! $tabs->render(compact('option')) !!}
+    </form>
+@endsection
+
+@include('option::admin.options.partials.scripts')
--- a/Modules/Option/Resources/views/admin/options/edit.blade.php
+++ b/Modules/Option/Resources/views/admin/options/edit.blade.php
@@ -0,0 +1,20 @@
+@extends('admin::layout')
+
+@component('admin::components.page.header')
+    @slot('title', trans('admin::resource.edit', ['resource' => trans('option::options.option')]))
+    @slot('subtitle', $option->name)
+
+    <li><a href="{{ route('admin.options.index') }}">{{ trans('option::options.options') }}</a></li>
+    <li class="active">{{ trans('admin::resource.edit', ['resource' => trans('option::options.option')]) }}</li>
+@endcomponent
+
+@section('content')
+    <form method="POST" action="{{ route('admin.options.update', $option) }}" class="form-horizontal" id="option-edit-form" novalidate>
+        {{ csrf_field() }}
+        {{ method_field('put') }}
+
+        {!! $tabs->render(compact('option')) !!}
+    </form>
+@endsection
+
+@include('option::admin.options.partials.scripts')
--- a/Modules/Option/Resources/views/admin/options/index.blade.php
+++ b/Modules/Option/Resources/views/admin/options/index.blade.php
@@ -0,0 +1,38 @@
+@extends('admin::layout')
+
+@component('admin::components.page.header')
+    @slot('title', trans('option::options.options'))
+
+    <li class="active">{{ trans('option::options.options') }}</li>
+@endcomponent
+
+@component('admin::components.page.index_table')
+    @slot('buttons', ['create'])
+    @slot('resource', 'options')
+    @slot('name', trans('option::options.option'))
+
+    @slot('thead')
+        <tr>
+            @include('admin::partials.table.select_all')
+
+            <th>{{ trans('admin::admin.table.id') }}</th>
+            <th>{{ trans('option::options.table.name') }}</th>
+            <th>{{ trans('option::options.table.type') }}</th>
+            <th data-sort>{{ trans('admin::admin.table.created') }}</th>
+        </tr>
+    @endslot
+@endcomponent
+
+@push('scripts')
+    <script>
+        new DataTable('#options-table .table', {
+            columns: [
+                { data: 'checkbox', orderable: false, searchable: false, width: '3%' },
+                { data: 'id', width: '5%' },
+                { data: 'name', name: 'translations.name', orderable: false, defaultContent: '' },
+                { data: 'type', name: 'type' },
+                { data: 'created', name: 'created_at' },
+            ],
+        });
+    </script>
+@endpush
--- a/Modules/Option/Resources/views/admin/options/partials/scripts.blade.php
+++ b/Modules/Option/Resources/views/admin/options/partials/scripts.blade.php
@@ -0,0 +1,21 @@
+@push('globals')
+    <script>
+        FleetCart.data['option.values'] = {!! old_json('values', $option->values) !!};
+        FleetCart.errors['option.values'] = @json($errors->get('values.*'), JSON_FORCE_OBJECT);
+    </script>
+@endpush
+
+@push('shortcuts')
+    <dl class="dl-horizontal">
+        <dt><code>b</code></dt>
+        <dd>{{ trans('admin::admin.shortcuts.back_to_index', ['name' => trans('option::options.option')]) }}</dd>
+    </dl>
+@endpush
+
+@push('scripts')
+    <script>
+        keypressAction([
+            { key: 'b', route: "{{ route('admin.options.index') }}" },
+        ]);
+    </script>
+@endpush
--- a/Modules/Option/Resources/views/admin/options/tabs/general.blade.php
+++ b/Modules/Option/Resources/views/admin/options/tabs/general.blade.php
@@ -0,0 +1,73 @@
+<div class="row">
+    <div class="col-md-8">
+        {{ Form::text('name', trans('option::attributes.name'), $errors, $option, ['required' => true]) }}
+
+        <div class="form-group required">
+            <label for="type" class="col-md-3 control-label text-left">
+                {{ trans('option::attributes.type') }}<span class="m-l-5 text-red">*</span>
+            </label>
+
+            <div class="col-md-9">
+                <select name="type" class="form-control custom-select-black" id="type">
+                    <option value="" {{ is_null(old('type', $option->type)) ? 'selected' : '' }}>
+                        {{ trans('option::options.form.option_types.please_select') }}
+                    </option>
+
+                    <optgroup label="{{ trans('option::options.form.option_types.text') }}">
+                        <option value="field" {{ old('type', $option->type) === 'field' ? 'selected' : '' }}>
+                            {{ trans('option::options.form.option_types.field') }}
+                        </option>
+
+                        <option value="textarea" {{ old('type', $option->type) === 'textarea' ? 'selected' : '' }}>
+                            {{ trans('option::options.form.option_types.textarea') }}
+                        </option>
+                    </optgroup>
+
+                    <optgroup label="{{ trans('option::options.form.option_types.select') }}">
+                        <option value="dropdown" {{ old('type', $option->type) === 'dropdown' ? 'selected' : '' }}>
+                            {{ trans('option::options.form.option_types.dropdown') }}
+                        </option>
+
+                        <option value="checkbox" {{ old('type', $option->type) === 'checkbox' ? 'selected' : '' }}>
+                            {{ trans('option::options.form.option_types.checkbox') }}
+                        </option>
+
+                        <option value="checkbox_custom" {{ old('type', $option->type) === 'checkbox_custom' ? 'selected' : '' }}>
+                            {{ trans('option::options.form.option_types.checkbox_custom') }}
+                        </option>
+
+                        <option value="radio" {{ old('type', $option->type) === 'radio' ? 'selected' : '' }}>
+                            {{ trans('option::options.form.option_types.radio') }}
+                        </option>
+
+                        <option value="radio_custom" {{ old('type', $option->type) === 'radio_custom' ? 'selected' : '' }}>
+                            {{ trans('option::options.form.option_types.radio_custom') }}
+                        </option>
+
+                        <option value="multiple_select" {{ old('type', $option->type) === 'multiple_select' ? 'selected' : '' }}>
+                            {{ trans('option::options.form.option_types.multiple_select') }}
+                        </option>
+                    </optgroup>
+
+                    <optgroup label="{{ trans('option::options.form.option_types.date') }}">
+                        <option value="date" {{ old('type', $option->type) === 'date' ? 'selected' : '' }}>
+                            {{ trans('option::options.form.option_types.date') }}
+                        </option>
+
+                        <option value="date_time" {{ old('type', $option->type) === 'date_time' ? 'selected' : '' }}>
+                            {{ trans('option::options.form.option_types.date_time') }}
+                        </option>
+
+                        <option value="time" {{ old('type', $option->type) === 'time' ? 'selected' : '' }}>
+                            {{ trans('option::options.form.option_types.time') }}
+                        </option>
+                    </optgroup>
+                </select>
+
+                {!! $errors->first('type', '<span class="help-block text-red">:message</span>') !!}
+            </div>
+        </div>
+
+        {{ Form::checkbox('is_required', trans('option::attributes.is_required'), trans('option::options.form.this_option_is_required'), $errors, $option) }}
+    </div>
+</div>
--- a/Modules/Option/Resources/views/admin/options/tabs/values.blade.php
+++ b/Modules/Option/Resources/views/admin/options/tabs/values.blade.php
@@ -0,0 +1,9 @@
+<div class="option-values clearfix" id="option-values">
+    <div class="alert alert-info" id="option-values-info">
+        {{ trans('option::options.please_select_a_option_type') }}
+    </div>
+</div>
+
+@include('option::admin.options.templates.option.text')
+@include('option::admin.options.templates.option.select')
+@include('option::admin.options.templates.option.select_values')
--- a/Modules/Option/Resources/views/admin/options/templates/option/select.blade.php
+++ b/Modules/Option/Resources/views/admin/options/templates/option/select.blade.php
@@ -0,0 +1,39 @@
+<script type="text/html" id="option-select-template">
+    <div class="option-select <% if (optionId === undefined) { %> m-b-15 <% } %>">
+        <div class="table-responsive">
+            <table class="options table table-bordered table-striped">
+                <thead>
+                    <tr>
+                        <th></th>
+                        <th>{{ trans('option::attributes.label') }}</th>
+                        <th>{{ trans('option::attributes.price') }}</th>
+                        <th>{{ trans('option::attributes.price_type') }}</th>
+                        <th></th>
+                    </tr>
+                </thead>
+
+                <tbody
+                    <% if (optionId === undefined) { %>
+                        id="select-values"
+                    <% } else { %>
+                        id="option-<%- optionId %>-select-values"
+                    <% } %>
+                >
+                    {{--  Custom option dropdown rows will be added here dynamically using JS  --}}
+                </tbody>
+            </table>
+        </div>
+
+        <button
+            type="button"
+            class="btn btn-default"
+            <% if (optionId === undefined) { %>
+                id="add-new-row"
+            <% } else { %>
+                id="option-<%- optionId %>-add-new-row"
+            <% } %>
+        >
+            {{ trans('option::options.form.add_new_row') }}
+        </button>
+    </div>
+</script>
--- a/Modules/Option/Resources/views/admin/options/templates/option/select_values.blade.php
+++ b/Modules/Option/Resources/views/admin/options/templates/option/select_values.blade.php
@@ -0,0 +1,83 @@
+<script type="text/html" id="option-select-values-template">
+    <tr class="option-row">
+        <td class="text-center">
+            <span class="drag-icon">
+                <i class="fa">&#xf142;</i>
+                <i class="fa">&#xf142;</i>
+            </span>
+        </td>
+        <td>
+            <input
+                type="hidden"
+                <% if (optionId === undefined) { %>
+                    name="values[<%- valueId %>][id]"
+                    id="values-<%- valueId %>-id"
+                <% } else { %>
+                    name="options[<%- optionId %>][values][<%- valueId %>][id]"
+                    id="option-<%- optionId %>-values-<%- valueId %>-id"
+                <% } %>
+
+                value="<%- value.id %>"
+            >
+
+            <input
+                type="text"
+                <% if (optionId === undefined) { %>
+                    name="values[<%- valueId %>][label]"
+                    id="values-<%- valueId %>-label"
+                <% } else { %>
+                    name="options[<%- optionId %>][values][<%- valueId %>][label]"
+                    id="option-<%- optionId %>-values-<%- valueId %>-label"
+                <% } %>
+
+                class="form-control"
+                value="<%- value.label %>"
+            >
+        </td>
+        <td>
+            <input
+                type="number"
+                <% if (optionId === undefined) { %>
+                    name="values[<%- valueId %>][price]"
+                    id="values-<%- valueId %>-price"
+                <% } else { %>
+                    name="options[<%- optionId %>][values][<%- valueId %>][price]"
+                    id="option-<%- optionId %>-values-<%- valueId %>-price"
+                <% } %>
+                class="form-control"
+                value="<%- _.isObject(value.price) ? value.price.amount : value.price %>"
+                step="0.01"
+                min="0"
+            >
+        </td>
+        <td>
+            <select
+                <% if (optionId === undefined) { %>
+                    name="values[<%- valueId %>][price_type]"
+                    id="values-<%- valueId %>-price_type"
+                <% } else { %>
+                    name="options[<%- optionId %>][values][<%- valueId %>][price_type]"
+                    id="option-<%- optionId %>-values-<%- valueId %>-price_type"
+                <% } %>
+                class="form-control custom-select-black"
+            >
+                <option value="fixed"
+                    <%= value.price_type === 'fixed' ? 'selected' : '' %>
+                >
+                    {{ trans('option::options.form.price_types.fixed') }}
+                </option>
+
+                <option value="percent"
+                    <%= value.price_type === 'percent' ? 'selected' : '' %>
+                >
+                    {{ trans('option::options.form.price_types.percent') }}
+                </option>
+            </select>
+        </td>
+        <td class="text-center">
+            <button type="button" class="btn btn-default delete-row" data-toggle="tooltip" title="{{ trans('option::options.form.delete_row') }}">
+                <i class="fa fa-trash"></i>
+            </button>
+        </td>
+    </td>
+</script>
--- a/Modules/Option/Resources/views/admin/options/templates/option/text.blade.php
+++ b/Modules/Option/Resources/views/admin/options/templates/option/text.blade.php
@@ -0,0 +1,54 @@
+<script type="text/html" id="option-text-template">
+    <div class="table-responsive option-text">
+        <table class="table table-bordered">
+            <thead>
+                <tr>
+                    <th>{{ trans('option::attributes.price') }}</th>
+                    <th>{{ trans('option::attributes.price_type') }}</th>
+                </tr>
+            </thead>
+            <tbody>
+                <tr>
+                    <td>
+                        <input
+                            type="number"
+                            <% if (optionId === undefined) { %>
+                                name="values[0][price]"
+                                id="values-0-price"
+                            <% } else { %>
+                                name="options[<%- optionId %>][values][0][price]"
+                                id="option-<%- optionId %>-values-0-price"
+                            <% } %>
+                            class="form-control"
+                            value="<%- _.isObject(value.price) ? value.price.amount : value.price %>"
+                        >
+                    </td>
+                    <td>
+                        <select
+                            <% if (optionId === undefined) { %>
+                                name="values[0][price_type]"
+                                id="values-0-price-type"
+                            <% } else { %>
+                                name="options[<%- optionId %>][values][0][price_type]"
+                                id="option-<%- optionId %>-values-0-price-type"
+                            <% } %>
+                            class="form-control custom-select-black"
+                        >
+                            <option value="fixed"
+                                <%= value.price_type === 'fixed' ? 'selected' : '' %>
+                            >
+                                {{ trans('option::options.form.price_types.fixed') }}
+                            </option>
+
+                            <option value="percent"
+                                <%= value.price_type === 'percent' ? 'selected' : '' %>
+                            >
+                                {{ trans('option::options.form.price_types.percent') }}
+                            </option>
+                        </select>
+                    </td>
+                </tr>
+            </tbody>
+        </table>
+    </div>
+</script>
--- a/Modules/Option/Resources/views/admin/options/templates/product_option.blade.php
+++ b/Modules/Option/Resources/views/admin/options/templates/product_option.blade.php
@@ -0,0 +1,147 @@
+<script type="text/html" id="option-template">
+    <div class="content-accordion panel-group options-group-wrapper" id="option-<%- optionId %>">
+        <div class="panel panel-default option">
+            <div class="panel-heading">
+                <h4 class="panel-title">
+                    <a data-toggle="collapse" data-parent="#option-<%- optionId %>" href="#custom-collapse-<%- optionId %>">
+                        <span class="drag-icon pull-left">
+                            <i class="fa">&#xf142;</i>
+                            <i class="fa">&#xf142;</i>
+                        </span>
+
+                        <span id="option-name" class="pull-left">{{ trans('option::options.form.new_option') }}</span>
+                    </a>
+                </h4>
+            </div>
+
+            <div id="custom-collapse-<%- optionId %>" class="panel-collapse collapse in">
+                <div class="panel-body">
+                    <div class="new-option clearfix">
+                        <input type="hidden" name="options[<%- optionId %>][id]" value="<%- option.id %>">
+
+                        <div class="col-lg-6 col-md-12 p-l-0">
+                            <div class="form-group">
+                                <label for="option-<%- optionId %>-name">{{ trans('option::attributes.name') }}</label>
+                                <input type="text" name="options[<%- optionId %>][name]" class="form-control option-name-field" id="option-<%- optionId %>-name" value="<%- option.name %>">
+                            </div>
+                        </div>
+
+                        <div class="col-lg-3 col-md-12 p-l-0">
+                            <div class="form-group">
+                                <label for="option-<%- optionId %>-type">{{ trans('option::attributes.type') }}</label>
+
+                                <select name="options[<%- optionId %>][type]" class="form-control custom-select-black" id="option-<%- optionId %>-type">
+                                    <option value=""
+                                        <%= option.type === null ? 'selected' : '' %>
+                                    >
+                                        {{ trans('option::options.form.option_types.please_select') }}
+                                    </option>
+
+                                    <optgroup label="{{ trans('option::options.form.option_types.text') }}">
+                                        <option value="field"
+                                            <%= option.type === 'field' ? 'selected' : '' %>
+                                        >
+                                            {{ trans('option::options.form.option_types.field') }}
+                                        </option>
+
+                                        <option value="textarea"
+                                            <%= option.type === 'textarea' ? 'selected' : '' %>
+                                        >
+                                            {{ trans('option::options.form.option_types.textarea') }}
+                                        </option>
+                                    </optgroup>
+
+                                    <optgroup label="{{ trans('option::options.form.option_types.select') }}">
+                                        <option value="dropdown"
+                                            <%= option.type === 'dropdown' ? 'selected' : '' %>
+                                        >
+                                            {{ trans('option::options.form.option_types.dropdown') }}
+                                        </option>
+
+                                        <option value="checkbox"
+                                            <%= option.type === 'checkbox' ? 'selected' : '' %>
+                                        >
+                                            {{ trans('option::options.form.option_types.checkbox') }}
+                                        </option>
+
+                                        <option value="checkbox_custom"
+                                            <%= option.type === 'checkbox_custom' ? 'selected' : '' %>
+                                        >
+                                            {{ trans('option::options.form.option_types.checkbox_custom') }}
+                                        </option>
+
+                                        <option value="radio"
+                                            <%= option.type === 'radio' ? 'selected' : '' %>
+                                        >
+                                            {{ trans('option::options.form.option_types.radio') }}
+                                        </option>
+
+                                        <option value="radio_custom"
+                                            <%= option.type === 'radio_custom' ? 'selected' : '' %>
+                                        >
+                                            {{ trans('option::options.form.option_types.radio_custom') }}
+                                        </option>
+
+                                        <option value="multiple_select"
+                                            <%= option.type === 'multiple_select' ? 'selected' : '' %>
+                                        >
+                                            {{ trans('option::options.form.option_types.multiple_select') }}
+                                        </option>
+                                    </optgroup>
+
+                                    <optgroup label="{{ trans('option::options.form.option_types.date') }}">
+                                        <option value="date"
+                                            <%= option.type === 'date' ? 'selected' : '' %>
+                                        >
+                                            {{ trans('option::options.form.option_types.date') }}
+                                        </option>
+
+                                        <option value="date_time"
+                                            <%= option.type === 'date_time' ? 'selected' : '' %>
+                                        >
+                                            {{ trans('option::options.form.option_types.date_time') }}
+                                        </option>
+
+                                        <option value="time"
+                                            <%= option.type === 'time' ? 'selected' : '' %>
+                                        >
+                                            {{ trans('option::options.form.option_types.time') }}
+                                        </option>
+                                    </optgroup>
+                                </select>
+                            </div>
+                        </div>
+
+                        <div class="checkbox">
+                            <input type="hidden" name="options[<%- optionId %>][is_required]" value="0">
+
+                            <input type="checkbox"
+                                name="options[<%- optionId %>][is_required]"
+                                class="form-control"
+                                id="option-<%- optionId %>-is-required"
+                                value="1"
+                                <%= option.is_required ? 'checked' : '' %>
+                            >
+
+                            <label for="option-<%- optionId %>-is-required">{{ trans('option::attributes.is_required') }}</label>
+                        </div>
+
+                        <button type="button" class="btn btn-default delete-option pull-right" data-toggle="tooltip" title="{{ trans('option::options.form.delete_option') }}">
+                            <i class="fa fa-trash"></i>
+                        </button>
+                    </div>
+
+                    <div class="clearfix"></div>
+
+                    <div class="option-values clearfix" id="option-<%- optionId %>-values">
+                        {{-- Custom option values will be added here dynamically using JS --}}
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</script>
+
+@include('option::admin.options.templates.option.text')
+@include('option::admin.options.templates.option.select')
+@include('option::admin.options.templates.option.select_values')
--- a/Modules/Option/Resources/views/admin/products/tabs/options.blade.php
+++ b/Modules/Option/Resources/views/admin/products/tabs/options.blade.php
@@ -0,0 +1,42 @@
+<div id="options-group">
+    {{--  Options will be added here dynamically using JS  --}}
+</div>
+
+<div class="box-footer no-border p-t-0">
+    <div class="form-group pull-left">
+        <div class="col-md-10">
+            <button type="button" class="btn btn-default m-r-10" id="add-new-option">
+                {{ trans('option::options.form.add_new_option') }}
+            </button>
+        </div>
+    </div>
+
+    @hasAccess('admin.options.index')
+        @if ($globalOptions->isNotEmpty())
+            <div class="add-global-option clearfix pull-right">
+                <div class="form-group pull-left">
+                    <select class="form-control custom-select-black" id="global-option">
+                        <option value="">{{ trans('option::options.select_global_option') }}</option>
+
+                        @foreach ($globalOptions as $globalOption)
+                            <option value="{{ $globalOption->id }}">{{ $globalOption->name }}</option>
+                        @endforeach
+                    </select>
+                </div>
+
+                <button type="button" class="btn btn-default" id="add-global-option" data-loading>
+                    {{ trans('option::options.form.add_global_option') }}
+                </button>
+            </div>
+        @endif
+    @endHasAccess
+</div>
+
+@push('globals')
+    <script>
+        FleetCart.data['product.options'] = {!! old_json('options', $product->options) !!};
+        FleetCart.errors['product.options'] = @json($errors->get('options.*'), JSON_FORCE_OBJECT);
+    </script>
+@endpush
+
+@include('option::admin.options.templates.product_option')