@extends('admin._layouts.master')

@section('content')

    @php
        $tabIndex = 1;
    @endphp

    <div class="row">
        {!! html()->model($product)->form($method, $action)->novalidate(true)->acceptsFiles()->open() !!}
        <div class="col-md-6">
            <div class="box box-primary">
                <div class="box-header with-border">
                    <h3 class="box-title">@transTitleCase('ui.create.title', [
                        'model_name' => trans('models.product.model_name')
                        ])
                    </h3>
                </div>
                <div class="box-body">
                    @formGroup(
                        transTitleCase('models.generic.name'),
                        html()->text('name')->attribute('tabindex', $tabIndex++),
                        $product->name
                    )

                    @formGroup(
                        transTitleCase('models.category.model_name'),
                        html()->select('category_ids[]', $categories, $productCategoryIds)->id('category-select')->attribute('tabindex', $tabIndex++)->multiple(),
                        implode(", ", Arr::only($categories->toArray(), $productCategoryIds))
                    )

                    @formGroup(
                        transTitleCase('models.generic.tracking_section'),
                        html()->select('tracking_section_id', $trackingSections, $product->tracking_section_id)->attribute('tabindex', $tabIndex++),
                    )

                    @formGroup(
                        transTitleCase('models.product.uom'),
                        html()->select('uom', $uomList)->attribute('tabindex', $tabIndex++),
                        $product->uom
                    )

                    @formGroup(
                        transTitleCase('models.product.description'),
                        html()->textarea('description')->attribute('tabindex', $tabIndex++)->attribute('rows', 3),
                        $product->description
                    )

                    @formGroup(
                        transTitleCase('models.product.barcode'),
                        html()->text('barcode')->addClass('non-submitable')->attribute('tabindex', $tabIndex++),
                        $product->barcode
                    )

                    <label>
                        {!! Form::checkbox('is_active', 1, null, [(!$product->exists || $product->is_active ? 'checked': '')]) !!}
                        @transUcFirst('models.table.enabled')
                    </label>
                </div>
            </div>
        </div>

        <!--------------------------------------------------------------------------------------------------------------------------------- image --->
        <div class="col-md-6">
            <div class="box box-primary">
                <div class="box-header with-border">
                    <h3 class="box-title">@transTitleCase('models.product.image')</h3>
                </div>
                <div class="box-body">
                    {!! Form::label('file', transTitleCase('models.product.image') . ' (800x450)') !!}
                    <br>
                    <label class="image">
                        <img class="clickable" width="400" height="225"
                             src="{{ ($product->photo ? $product->photo->getUrl('thumb') : '/assets/admin/images/product_placeholder-thumb.png') }}">
                        <input type="file" name="photo" class="image" accept="image/*" style="display: none">
                    </label>
                    @if($product->photo)
                        <br>
                        <a href="{{ route('admin.restaurant.products.destroy-image', $product->id) }}" class="btn btn-slim btn-danger mt-2">
                            <i class="fa fa-trash"></i>&nbsp; GÖRSELİ SİL
                        </a>
                    @endif
                </div>
            </div>
        </div>

        <!--------------------------------------------------------------------------------------------------------------------------------- price --->
        <div class="col-md-6">
            <div class="box box-primary">
                <div class="box-header with-border">
                    <h3 class="box-title">@transTitleCase('models.product.price')</h3>

                    <div class="pull-right box-tools">
                        <span type="button" class="btn btn-flat btn-sm dropdown-toggle" data-toggle="dropdown">
                            <i class="fa fa-gear fa-lg"></i>
                            <span class="sr-only">Toggle Dropdown</span>
                        </span>
                        <ul class="dropdown-menu dropdown-check" role="menu">
                            <li>
                                <a href="#" data-name="advanced-mode" class="dropdown-check-option">
                                    <label>
                                        <input type="checkbox" name="advanced_mode" value="1">
                                        <span>@transTitleCase('ui.create.advanced_mode')</span>
                                    </label>
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="box-body">

                    <div class="form-connected price-inputs">

                        @formGroup(
                        transTitleCase('generic.financial.ingredient_costs'),
                        html()->number('ingredient_costs', $product->ingredient_costs, 0, null, 0.01)->attribute('tabindex', $tabIndex++)->disabled(),
                        $product->ingredient_costs,
                        true,
                        [
                        'prepend-text' => currencySymbol('lg'),
                        'class' => 'advanced-input',
                        'style' => 'display: none;'
                        ]
                        )

                        @formGroup(
                            transTitleCase('generic.financial.base_costs'),
                            html()->number('base_costs', $product->base_costs, 0, null, 0.01)->attribute('tabindex', $tabIndex++),
                            $product->base_costs,
                            true,
                            [
                                'prepend-text' => currencySymbol('lg'),
                                'class' => 'advanced-input',
                                'style' => 'display: none;'
                            ]
                        )

                        <div class="form-group advanced-input" style="display: none;">
                            <label>@transTitleCase('generic.financial.profit_margin')</label>

                            <div class="input-group">
                                <div class="input-group-addon">
                                    <span class="input-group-text">
                                        <i class="fa fa-try fa-lg"></i>
                                    </span>
                                </div>
                                {!! html()->number('profit', $product->profit, 0, null, 0.01)->class('form-control')->attribute('tabindex', $tabIndex++) !!}
                                <div class="input-group-addon">
                                    <span class="input-group-text">
                                        <i class="fa fa fa-percent"></i>
                                    </span>
                                </div>
                                {!! html()->number('profit_pct', $product->profitPct, 0, null, 0.01)->class('form-control')->attribute('tabindex', $tabIndex++) !!}
                            </div>
                        </div>

                        @formGroup(
                            transTitleCase('generic.financial.base_price'),
                            html()->number('price', $product->price, 0, null, 0.01)->attribute('tabindex', $tabIndex++),
                            $product->price,
                            true,
                            [
                                'prepend-text' => currencySymbol('lg'),
                                'class' => 'advanced-input',
                                'style' => 'display: none;'
                            ]
                        )

                        @formGroup(
                            transTitleCase('models.stock_item.vat'),
                            html()->number('vat_pct', null, 0, null, 0.01)->attribute('tabindex', $tabIndex++),
                            $product->vat_pct,
                            true,
                            ['prepend-icon' => 'percent']
                        )

                        <div class="form-group">
                            <label>@transTitleCase('models.product.service_fee')</label>

                            <div class="input-group">
                                {!! html()->select('service_fee_type_id', $serviceFeeTypes, $product->service_fee_type_id)->attribute('tabindex', $tabIndex++)->addClass('form-control') !!}

                                <div class="input-group-addon">
                                    <span class="input-group-text">
                                        <i class="fa fa-try fa-lg"></i>
                                    </span>
                                </div>
                                {!! html()->number('service_fee', null, 0, null, 0.01)->attribute('tabindex', $tabIndex++)->addClass('form-control')->disabled() !!}
                            </div>
                        </div>

                        <div class="form-group">
                            <label>@transTitleCase('generic.financial.gross_price')</label>

                            <div class="input-group">
                                <div class="input-group-addon">
                                    <span class="input-group-text">
                                        <i class="fa fa-try fa-lg"></i>
                                    </span>
                                </div>

                                {!! html()->number('gross_price', null, 0, null, 0.01)->addClass('form-control')->attribute('tabindex', $tabIndex++) !!}

                                <label class="input-group-addon">
                                    <input type="checkbox" class="toggle-sibling d-none" name="gross_price_lock">
                                    <i class="fa fa-lock toggle-sibling-on text-red"></i>
                                    <i class="fa fa-unlock-alt toggle-sibling-off"></i>
                                </label>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!------------------------------------------------------------------------------------------------------------------------ stock Tracking --->
        <div class="col-md-12">
            <div class="box box-primary">
                <div class="box-header with-border">
                    <h3 class="box-title">@transTitleCase('models.product.auto_stock_tracking')</h3>
                    &nbsp;
                    <input type="checkbox" name="is_stock_enabled" value="1" {{ ($product->is_stock_enabled ? 'checked' : '') }}
                    data-toggle="toggle" data-on="@transTitleCase('ui.toggle.on')" data-off="@transTitleCase('ui.toggle.off')" data-size="mini"
                           data-onstyle="success" data-offstyle="default">

                </div>
                <div class="box-body no-padding stock-section" style="{{ $product->is_stock_enabled ? '' : 'display: none;' }}">
                    <div class="box-padding-restore">
                        <p>@trans('Specify how much of what stock item(s) will be deducted when one unit of this product is sold. Specified amounts will be deducted automatically on every sale of this product.')</p>
                    </div>
                    <div class="table-responsive">

                        <table class="table table-striped input-rows">
                            <thead>
                            <tr>
                                <th>@transTitleCase('models.stock_item.model_name')</th>
                                <th>@transTitleCase('models.stock_item.amount')</th>
                                <th></th>
                            </tr>
                            </thead>
                            <tbody id="item-list">
                            @include('admin.restaurant.products._partials.item')

                            @foreach($mixins as $id => $mixin)
                                @include('admin.restaurant.products._partials.item')
                            @endforeach
                            </tbody>
                        </table>
                        <a id="create-btn" class="btn btn-grey btn-success button-centered">
                            <i class="fa fa-plus"></i>&nbsp; @transTitleCase('ui.listing.add_new_row')
                        </a>
                    </div>
                </div>
            </div>
        </div>

        <!---------------------------------------------------------------------------------------------------------------------- channel Versions --->
        @if($product->getirVersion)
            <div class="col-md-6">
                <div class="box box-primary">
                    <div class="box-header with-border">
                        <h3 class="box-title">KANALLARDA BU ÜRÜN</h3>
                    </div>
                    <div class="box-body">
                        <div class="form-group">
                            <label>GETİRYEMEK ÜRÜN ADI</label>
                            <span class="form-control" disabled>
                                {{ $product->getirVersion->name }}
                            </span>
                        </div>

                        <div class="form-group">
                            <label>@transTitleCase('models.product.getir_price')</label>
                            <div class="input-group">
                                <div class="input-group-addon">
                                    <span class="input-group-text">
                                        <i class="fa fa-try fa-lg"></i>
                                    </span>
                                </div>
                                <span class="form-control" disabled>
                                    {{ $product->getirVersion->price }}
                                </span>
                            </div>
                        </div>

                        <div class="form-group">
                            <label>GETİRYEMEK ÜRÜN AÇIKLAMASI</label>
                            <span class="form-control" disabled>
                                {{ $product->getirVersion->description }}
                            </span>
                        </div>

                    </div>
                </div>
            </div>
        @endif


        <!---------------------------------------------------------------------------------------------------------------------------- action Buttons --->
        <div class="col-md-12">
            <div class="box box-primary">
                <div class="box-body">
                    <a class="btn btn-slim btn-default" href="{{ mRoute('index') }}" tabindex="{{ $tabIndex++ }}">
                        <i class="fa fa-arrow-left"></i>&nbsp; @transTitleCase('ui.create.back_to_index')
                    </a>
                    <div class="pull-right">
                        @if($editing)
                            <button class="btn btn-slim btn-success" tabindex="{{ $tabIndex++ }}">
                                <i class="fa fa-save"></i>&nbsp; @transTitleCase('ui.create.update')
                            </button>
                            <button class="btn btn-slim btn-primary" name="action" value="keep-editing" tabindex="{{ $tabIndex++ }}">
                                <i class="fa fa-refresh"></i>&nbsp; @transTitleCase('ui.create.update_and_keep_editing')
                            </button>
                            <button class="btn btn-slim btn-warning" name="action" value="clone" tabindex="{{ $tabIndex++ }}">
                                <i class="fa fa-copy"></i>&nbsp; @transTitleCase('ui.create.clone')
                            </button>
                        @else
                            <button class="btn btn-slim btn-success" tabindex="104"><i class="fa fa-save"></i>&nbsp; @transTitleCase('ui.create.create')
                            </button>
                            <button class="btn btn-slim btn-primary" name="action" value="create-new" tabindex="{{ $tabIndex++ }}">
                                <i class="fa fa-refresh"></i>&nbsp; @transTitleCase('ui.create.create_and_add_new')
                            </button>
                        @endif
                    </div>
                </div>
            </div>
        </div>
        {!! html()->form()->close() !!}


        <!------------------------------------------------------------------------------------------------------------------------------------- specs --->
        <div class="col-md-12">
            @if(!$creating)
                <div class="box box-primary">
                    <div class="box-header with-border">
                        <h3 class="box-title">@transTitleCase('models.generic.specs')</h3>
                    </div>
                    <div class="box-body">
                        <div id="accordion" class="panel-group specs-container">
                            @foreach($product->specs as $spec)
                                {!! view('admin.restaurant.products._partials.spec')->with('product', $product)->with('spec', $spec) !!}
                            @endforeach
                        </div>
                        <div class="btn btn-slim btn-success add_spec_btn" data-product-id="{{ $product->id }}">
                            <i class="fa fa-plus"></i>&nbsp; @transTitleCase('.add_new_spec')
                        </div>
                    </div>
                </div>
            @endif
        </div>

    </div>

@endsection

@push('scripts')

    <script>
        // manage advanced mode
        $(function () {
            $('input[name="advanced_mode"]').change(function () {
                let checked = $(this).prop('checked')

                if (checked) {
                    $('.advanced-input').show(200).glow()
                } else {
                    $('.advanced-input').glow().delay(300).hide(400)
                }
            })

            $('.dropdown-check').click(function (e) {
                e.stopPropagation()
            })
        })
    </script>

    <script>
        /* ----------------------------------------------------------------------------------------------------------------------- PRICE INPUTS -+- */

        (function () {

            let serviceFeeTypeDetails = {!! $serviceFeeTypeDetails !!};

            let serviceFeeType, $serviceFeeTypeInput

            const grossPriceLockInput = $('input[name="gross_price_lock"]')

            grossPriceLockInput.on('change', e => {
                inputs.gross_price.attr('disabled', e.target.checked)
            })

            // values
            const v = {
                price           : 0,
                base_costs      : 0,
                ingredient_costs: 0,
                profit          : 0,
                profit_pct      : 0,
                vat             : 0,
                vat_pct         : 0,
                gross_price     : 0,
                service_fee     : 0,
            }

            const inputs = {
                price           : null,
                base_costs      : null,
                ingredient_costs: null,
                profit          : null,
                profit_pct      : null,
                vat_pct         : null,
                gross_price     : null,
                service_fee     : null,
                getValues       : () => {
                    for (const name in inputs) {
                        const $input = inputs[name]
                        if (typeof $input === 'function') continue

                        v[name] = $input.val()
                    }
                },
                /* ---------------------------------------------------------------------------------------------------------------- recalculate -+- */
                recalculate: changed => {
                    inputs.getValues()

                    let divisor, subtotal

                    console.log("changed: " + changed)

                    switch (changed) {
                        case 'price':
                            divisor  = num.sum(100, v.profit_pct)
                            subtotal = num.mult(num.div(v.price, divisor), 100)

                            v.base_costs = num.sub(subtotal, v.ingredient_costs)
                            v.profit     = num.pct(num.sum(v.base_costs, v.ingredient_costs), v.profit_pct)

                            calculateVatAndServiceFee()
                            v.gross_price = num.fixed(num.sum(v.price, v.vat, v.service_fee))
                            break

                        case 'base_costs':
                        case 'ingredient_costs':
                            v.profit = num.pct(num.sum(v.base_costs, v.ingredient_costs), v.profit_pct)
                            v.price  = num.sum(v.base_costs, v.ingredient_costs, v.profit)

                            calculateVatAndServiceFee()
                            v.gross_price = num.fixed(num.sum(v.price, v.vat, v.service_fee))
                            break

                        case 'profit':
                            v.profit_pct = num.findPct(num.sum(v.base_costs, v.ingredient_costs), v.profit)
                            v.price      = num.sum(v.base_costs, v.ingredient_costs, v.profit)

                            calculateVatAndServiceFee()
                            v.gross_price = num.fixed(num.sum(v.price, v.vat, v.service_fee))
                            break

                        case 'profit_pct':
                            v.profit = num.pct(num.sum(v.base_costs, v.ingredient_costs), v.profit_pct)
                            v.price  = num.sum(v.base_costs, v.ingredient_costs, v.profit)

                            calculateVatAndServiceFee()
                            v.gross_price = num.fixed(num.sum(v.price, v.vat, v.service_fee))
                            break

                        case 'vat_pct':
                        case 'service_fee_type_id':
                            if (inputs.gross_price.attr('disabled')) {
                                recalculateBackFromGrossPrice()
                            } else {
                                calculateVatAndServiceFee()
                                v.gross_price = num.fixed(num.sum(v.price, v.vat, v.service_fee))
                            }
                            break

                        case 'gross_price':
                            recalculateBackFromGrossPrice()

                            divisor  = num.sum(100, v.profit_pct)
                            subtotal = num.mult(num.div(v.price, divisor), 100)

                            v.base_costs = num.sub(subtotal, v.ingredient_costs)
                            v.profit     = num.pct(num.sum(v.base_costs, v.ingredient_costs), v.profit_pct)
                            break
                    }

                    inputs.setValues(changed)
                },
                /* ----------------------------------------------------------------------------------------------------------------- set Values -+- */
                setValues: changed => {
                    for (const name in inputs) {
                        const $input = inputs[name]
                        if (name === changed || typeof $input === 'function') continue

                        if (num.fixed($input.val()) !== num.fixed(v[name]))
                            $input.val(num.fixed(v[name])).glow()
                    }
                }
            }

            /* --------------------------------------------------------------------------------------------------------------------------- load -+- */
            window.addEventListener('load', () => {
                registerObjects()
                initListeners()
            })

            /* --------------------------------------------------------------------------------------------------------------- register Objects -+- */
            function registerObjects() {
                inputs.price            = $('input[name="price"]')
                inputs.base_costs       = $('input[name="base_costs"]')
                inputs.ingredient_costs = $('input[name="ingredient_costs"]')
                inputs.profit           = $('input[name="profit"]')
                inputs.profit_pct       = $('input[name="profit_pct"]')
                inputs.vat              = $('input[name="vat"]')
                inputs.vat_pct          = $('input[name="vat_pct"]')
                inputs.gross_price      = $('input[name="gross_price"]')
                inputs.service_fee      = $('input[name="service_fee"]')
                $serviceFeeTypeInput    = $('select[name="service_fee_type_id"]')
            }

            /* ----------------------------------------------------------------------------------------------------------------- init Listeners -+- */
            function initListeners() {
                for (const name in inputs) {
                    if (typeof inputs[name] === 'function') continue

                    inputs[name].on('input', e => {
                        inputs.recalculate(e.target.getAttribute('name'))
                    })
                }

                $serviceFeeTypeInput.change(function () {
                    // get selected service fee type's ID
                    const id       = $serviceFeeTypeInput.val()
                    serviceFeeType = serviceFeeTypeDetails[id]

                    inputs.recalculate('service_fee_type_id')
                })

            }

            /* ------------------------------------------------------------------------------------------------------------- gross_price Change <-- */
            function recalculateBackFromGrossPrice() {
                let foundGrossPrice = null
                let increment       = 100
                let directionUp     = true
                let numIncrements   = 0
                v.price             = 0

                v.gross_price = num.parse(v.gross_price)

                while (foundGrossPrice !== v.gross_price) {
                    if (numIncrements > 10000)
                        break

                    numIncrements++

                    if (directionUp && foundGrossPrice > v.gross_price) {
                        increment   = (increment / 2) * -1
                        directionUp = false
                    } else if (!directionUp && foundGrossPrice < v.gross_price) {
                        increment   = (increment / 2) * -1
                        directionUp = true
                    }

                    v.price += increment

                    v.price = (v.price * 100) / 100

                    // calculate the service fee amount for this product - service fee type pair
                    calculateVatAndServiceFee()

                    foundGrossPrice = num.sum(v.price, v.vat, v.service_fee)
                    foundGrossPrice = parseFloat(foundGrossPrice.toFixed(2))
                }

                v.price       = num.fixed(v.price)
                v.gross_price = foundGrossPrice
            }

            /* -------------------------------------------------------------------------------------------------- calculate Vat And Service Fee <-- */
            function calculateVatAndServiceFee() {
                // calculate the VAT "amount"
                v.vat = num.mult(v.price, .01, v.vat_pct)
                // VAT amount cannot be less than 0
                v.vat = v.vat < 0 ? 0 : v.vat

                if (!serviceFeeType) {
                    v.service_fee = 0
                    return
                }

                let amount = num.parse(serviceFeeType.amount)

                if (serviceFeeType.type === 'fixed')
                    v.service_fee = amount

                switch (serviceFeeType.formula) {
                    case 'simple':
                        if (serviceFeeType.type !== 'fixed')
                            v.service_fee = num.mult(v.price, .01, amount)
                        break
                    case 'vat_on_top':
                        if (serviceFeeType.type !== 'fixed')
                            v.service_fee = num.mult(v.price, .01, amount)

                        // calculate the VAT "amount"
                        v.vat = num.mult(num.sum(v.price, v.service_fee), .01, v.vat_pct)
                        // VAT amount cannot be less than 0
                        v.vat = v.vat < 0 ? 0 : v.vat
                        break
                    case 'sf_on_top':
                        if (serviceFeeType.type !== 'fixed')
                            // VAT is added to the price, and Service Fee is calculated on top the sum. VAT increases the Service Fee in this formula.
                            v.service_fee = num.mult(num.sum(v.price, v.vat), .01, amount)
                        break
                }

                v.service_fee = num.fixed(v.service_fee)
            }

            $('form').on('submit', function () {
                inputs.gross_price.attr('disabled', false)
            })
        })()
        /* ---------------------------------------------------------------------------------------------------------------- manage Price Inputs -^- */

    </script>

    <script>
        /* ------------------------------------------------------------------------------------------------------------------------ STOCK ITEMS -+- */
        $(function () {
            var $createBtn = $('#create-btn')

            var $itemList = $('#item-list')

            /* ---------------------------------------------------------------------------------------------------------------- initiate Events -+- */
            // select2 item input
            $itemList.find('tr:not(.hidden) select.item').select2({
                tags: false,
            })

            // add delete events
            $('.delete-btn').click(deleteRow)

            $('#category-select').select2({
                closeOnSelect: false,
            })

            $('[name="tracking_section_id"]').select2({
                closeOnSelect: false,
            })

            // add items events
            $itemList.find('tr').not('.hidden').each(function () {
                addItemEvents($(this))
            })

            $('input[name="is_stock_enabled"]').change(function () {
                // enable or disable child settings
                if ($(this).prop('checked')) {
                    $('.stock-section').show(400)
                } else {
                    $('.stock-section').hide(400)
                }
            })

            /* ---------------------------------------------------------------------------------------------------------------- create New Item -+- */
            $createBtn.click(function () {
                var $item = $itemList.find('tr.hidden').clone().removeClass('hidden')

                $item.find('select').select2({
                    tags: false,
                })

                $item.find('.delete-btn').click(deleteRow)

                var itemKey = (Math.random() + 1).toString(36).substr(2, 5)

                $item.find('input, select').each(function () {
                    var name = $(this).attr('name')
                    $(this).attr('name', name.replace('items[new]', 'items[' + itemKey + ']'))
                })

                // enable inputs
                $item.find('input.change, select.item').removeAttr('disabled')

                $itemList.append($item)

                $item.find('select.item').change(function () {
                    updateItemInfo($item)
                })

                addItemEvents($item)

                // initially update info for the pre-selected item
                updateItemInfo($item)

                recalculateCost()
            })

            /* --------------------------------------------------------------------------------------------------------------- recalculate Cost -+- */
            function recalculateCost() {
                let $rows               = $itemList.find('tr:not(.hidden)')
                const $productCostInput = $('input[name="ingredient_costs"]')

                let productTotalCost = 0

                $rows.each(function (i, row) {
                    const $row                = $(row)
                    let rollingAvgPrice       = num.parse($row.data('net-rolling-avg-price'))
                    const $changeInput        = $row.find('input.change')
                    let change                = num.parse($changeInput.val())
                    const $totalAvgPriceInput = $row.find('input.total_net_rolling_avg_price')

                    let mixinTotalCost = change * rollingAvgPrice

                    if (num.fixed($totalAvgPriceInput.val()) !== num.fixed(mixinTotalCost))
                        $totalAvgPriceInput.val(num.fixed(mixinTotalCost)).glow()

                    productTotalCost += mixinTotalCost

                })

                if (num.fixed($productCostInput.val()) !== num.fixed(productTotalCost)) {
                    $productCostInput.val(num.fixed(productTotalCost))
                    $productCostInput.trigger('input')
                }
            }

            /* --------------------------------------------------------------------------------------------------------------- update Item Info -+- */

            /*
             * Update various fields of form to match newly selected stock_item
             *
             * > When selected stock item changed;
             *      - Update uom display to match newly selected stock item
             *          + make an ajax request to get new stock item's data;
             *              ~ uom (Unit of Measure).
             *          + Show loading during the ajax request.
             *      - set 'change' input value to 1
             */
            function updateItemInfo($row, $itemInput) {
                // get the id of newly selected stock_item
                var value = ($itemInput || $row.find('select.item')).val()

                // remove currently displayed uom text and show loading
                var $uom         = $row.find('.uom')
                var $uomLoading  = $uom.find('.loading')
                var $uomText     = $uom.find('.text')
                var $changeInput = $row.find('input.change')

                $uomLoading.removeClass('hidden')
                $uomText.text('')
                // disable inputs
                $changeInput.attr('disabled', 1)

                // make an ajax request to get newly selected stock_item's uom
                $.get('/admin/stock/items/' + value + '/get-attributes', function (data) {
                    // display updated uom and hide the loading
                    $uomText.text(data.trans_uom)

                    // - update 'current_quantity', 'change' and 'new_quantity' input values.
                    // - enable 'change' and 'new_quantity' inputs
                    $changeInput.removeAttr('disabled')
                    $row.data('net-rolling-avg-price', data.net_rolling_avg_price)

                    recalculateCost()

                    // hide loading
                    $uomLoading.addClass('hidden')
                })
            }

            /* ---------------------------------------------------------------------------------------------------------------- add Item Events -+- */
            function addItemEvents($row) {
                // listen for changes in stock_item select input
                $row.find('select.item').change(function () {
                    updateItemInfo($row, $(this))
                })

                $row.find('input.change').change(function () {
                    recalculateCost()
                })
            }

            /* -------------------------------------------------------------------------------------------------------------------- delete Item -+- */
            function deleteRow(e) {
                var $target = $(e.target).parents('tr')

                $target.hide(500, function () {
                    $target.remove()
                    recalculateCost()
                })
            }

            recalculateCost()
        })
    </script>

    <script>

        $(function () {
            $('.add_spec_btn').on('click', createNewSpec)
            // build specs that product have
            $('.spec-template').each(function (index, $obj) {
                buildSpec($($obj))
            })
        })

        function createNewSpec(e) {
            product_id = $(e.currentTarget).attr('data-product-id')

            var data           = {}
            data['product_id'] = product_id

            $.ajax({
                url     : '{{ route('admin.restaurant.products.specs.create') }}',
                method  : 'POST',
                data    : data,
                dataType: 'html',
                success : function (data) {
                    if (data) {
                        $('.specs-container').append(data)
                        $spec = $('.spec-template')
                        buildSpec($spec)
                    } else {
                        return false
                    }
                },
                error   : function () {
                    return false
                },
            })
        }

        function buildSpec($newSpec) {
            var newClass = String(Math.random()).substring(2)
            // adjust element classes
            $newSpec.removeClass('spec-template').addClass(newClass).appendTo('.specs-container')
            // add ajax events
            $newSpec.find('.ajax-request-on-click').off('click', ajaxRequestOnClick).on('click', ajaxRequestOnClick)
            // create connection between button and accordion
            $newSpec.find('a[href=\'#collapseElem\']').attr('href', '#' + newClass)
            $newSpec.find('#collapseElem').attr('ID', newClass)
            // attach event to add option button
            $newSpec.find('.add_opt_btn').on('click', createNewOption)
            // attach event to update title when the name is changed
            // add events to hide/show action buttons
            $newSpec.on('show.bs.collapse', accordionShowButtons)
            $newSpec.on('hide.bs.collapse', accordionHideButtons)
            // hide action buttons initially
            $newSpec.find('.action-btns').css('display', 'none')
            // add update on change event
            updateOnChange($newSpec.find('input.update-on-change'))
        }

        function accordionShowButtons(e) {
            $(e.currentTarget).find('.action-btns').slideDown()
        }

        function accordionHideButtons(e) {
            $(e.currentTarget).find('.action-btns').slideUp()
        }


        function createNewOption(e) {
            $spec   = $(e.currentTarget).parents('.spec')
            spec_id = $spec.attr('data-spec-id')

            var data        = {}
            data['spec_id'] = spec_id

            $.ajax({
                url     : '{{ route('admin.restaurant.products.specs.options.create') }}',
                method  : 'POST',
                data    : data,
                dataType: 'html',
                success : function (data) {
                    if (data) {
                        $spec.find('.option-container').append(data)
                        $option = $spec.find('.spec-template')
                        buildOption($option)
                    } else {
                        return false
                    }
                },
                error   : function () {
                    return false
                },
            })
        }

        function buildOption($newOption) {
            // clean placeholder class
            $newOption = $('.opt-template').removeClass('opt-template')

            // add update on change event
            updateOnChange($newOption.find('input.update-on-change'))
            $newOption.find('.ajax-request-on-click').on('click', ajaxRequestOnClick)
        }

        // update the spec title to match new input
        function updateSpecTitle(e) {
            $spec = $(e.currentTarget)
            name  = $spec.val()
            $spec.parents('.spec').find('.spec-name').text(name)
        }

    </script>

@endpush