@extends('admin._layouts.master')

@section('content')

    <div class="row">
        <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.delivery.model_name')
                     ])</h3>
                </div>
                <div class="box-body">
                    <div class="form-group ">
                        <label for="title" class="control-label">{{ transUc('models.delivery.title') }}</label>

                        <span class="form-control">
                            {{ $delivery->title }}
                        </span>

                    </div>

                    <div class="form-group ">
                        <label for="title" class="control-label">{{ transUc('models.supplier.model_name') }}</label>

                        <span class="form-control">
                            {{ object_get($delivery, 'supplier.name', transTitleCase('ui.listing.deleted')) }}
                        </span>

                    </div>

                    <div class="form-group ">
                        <label for="title" class="control-label">{{ transUc('models.generic.notes') }}</label>

                        <span class="form-control">
                            {{ $delivery->notes }}
                        </span>

                    </div>

                </div>
            </div>
        </div>
        <div class="col-md-12">
            <div class="box box-primary">
                <div class="box-body no-padding">
                    <div class="table-responsive">
                        <table class="table table-striped input-rows">
                            <thead>
                            <tr>
                                <th>@transUc('models.generic.stock_item')</th>
                                <th>@transUc('models.stock_item.amount')</th>
                                <th>@transUc('models.stock_item.unit_price')</th>
                                <th>@transUc('models.stock_item.discount_pct')</th>
                                <th>@transUc('models.stock_item.discount_amount')</th>
                                <th>@transUc('models.stock_item.subtotal')</th>
                                <th>@transUc('generic.financial.vat')</th>
                                <th>@transUc('generic.financial.total_vat')</th>
                                <th>@transUc('models.stock_item.total_price')</th>
                            </tr>
                            </thead>
                            <tbody id="item-list">
                            @include('admin.expenses.deliveries._partials.item')

                            @foreach($transactions as $id => $transaction)
                                @include('admin.expenses.deliveries._partials.item', ['disabled' => 1, 'deletable' => 0])
                            @endforeach
                            </tbody>
                        </table>

                    </div>
                    <div class="row">
                        <div class="col-lg-offset-8 col-lg-4 col-md-offset-6 col-md-6 col-sm-offset-1 col-sm-11">
                            <table class="w80 table-summary">
                                <tbody>
                                <tr data-toggle="tooltip" data-container="body" title="@trans('admin.expenses.deliveries.create.subtotal_description')">
                                    <th>@transUc('generic.financial.subtotal')</th>
                                    <td>@currencySymbol <span id="subtotal"></span></td>
                                </tr>
                                <tr data-toggle="tooltip" data-container="body"
                                    title="@trans('admin.expenses.deliveries.create.total_vat_description')">
                                    <th>@transUc('generic.financial.total_vat')</th>
                                    <td>@currencySymbol <span id="total-vat"></span></td>
                                </tr>
                                <tr>
                                    <th>@transUc('generic.financial.total_discount')</th>
                                    <td>@currencySymbol <span id="total-discount"></span></td>
                                </tr>
                                <tr data-toggle="tooltip" data-container="body"
                                    title="@trans('admin.expenses.deliveries.create.grand_total_description')">
                                    <th>@transUc('generic.financial.grand_total') <i class="fa fa-info-circle"></i></th>
                                    <td>@currencySymbol <span id="grand-total"></span></td>
                                </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

@endsection


@push('scripts')
    <script>
        $(function () {

            var $createBtn = $('#create-btn')

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

            /* -------------------------------------------------------------------------------------------------------------- item Create Modal -+- */
            var $createModal = $('#ajax-create-modal').ajaxCreate({
                createUrl: '{{ route('admin.stock.items.create') }}',
                storeUrl : '{{ route('admin.stock.items.store') }}'
            })

            function itemCreateBtnClick() {
                var $trigger = $(this)

                $createModal.ajaxCreate('initCreate')

                // clear any previous event handlers
                $createModal.off('ajaxCreate:success')
                $createModal.off('ajaxCreate:formInit')

                $createModal.on('ajaxCreate:success', function (e, attributes) {
                    var newOption = new Option(attributes.name, attributes.id)

                    // add new option to all item inputs
                    $itemList.find('.item').append(newOption)

                    // select new option in current item input. Also trigger change event to update the item data.
                    $trigger.parents('tr').find('.item').val(attributes.id).trigger('change')
                })

                $createModal.on('ajaxCreate:formInit', function () {
                    $(this).find('select.select2').select2()
                })
            }

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

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

            // add items events
            $itemList.find('tr').not('.hidden').each(function () {
                var $row = $(this)
                addItemEvents($row)
                // update discount pct
                // this in row will trigger `updateItemTotalPrice()` and `updateSums()` to be called
                // first argument should be an event class, we give it empty,
                // so by default it will update pct based on amount for discount and not vice versa.
                updateDiscountPct({}, $row)
            })

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

                $item.find('.item').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, select').removeAttr('disabled')

                $itemList.append($item)

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

                addItemEvents($item)

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

            /* --------------------------------------------------------------------------------------------------------------- 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).
             *              ~ unit price
             *          + Show loading during the ajax request.
             *      - set 'change' input value to 1
             *      - update item price value input
             */
            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 $priceInput = $row.find('input.base_price')

                $uomLoading.removeClass('hidden')
                $uomText.text('')
                // disable inputs
                $row.find('input').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)
                    $priceInput.val(data.price)
                    $row.find('.vat').val(data.vat)

                    // - update 'current_quantity', 'change' and 'new_quantity' input values.
                    // - enable 'change' and 'new_quantity' inputs
                    $row.find('input').removeAttr('disabled')

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

                    // since the unit price has changed, update item total price
                    updateItemTotalPrice($row)
                })
            }

            /* ---------------------------------------------------------------------------------------------------------------- add Item Events -+- */
            function addItemEvents($row) {
                // listen for changes in price and change inputs and update the total price accordingly.
                $row.find('.base_price, .change, .vat').on('input', function () {
                    updateItemTotalPrice($row)
                })

                $row.find('.total_discount, .discount-pct').on('input', function (e) {
                    updateDiscountPct(e, $row)
                })

                // listen for changes in stock_item select input
                $row.find('select.item').change(function () {
                    updateItemInfo($row, $(this))
                })

                // this is external function for handler function also contain
                $row.find('.item-create-btn').click(itemCreateBtnClick)
            }

            function updateDiscountPct(e, $row) {
                var row = rowGetData($row)

                if ($(e.currentTarget).hasClass('discount-pct')) {
                    rowSetData($row, {
                        discount: num.pct(row.change * row.price, row.discount_pct)
                    })
                } else {
                    rowSetData($row, {
                        discount_pct: num.findPct(row.change * row.price, row.discount)
                    })
                }

                // we've changed some data on the row, recalculate the row values
                updateItemTotalPrice($row)
            }

            function updateItemTotalPrice($row) {
                var row = rowGetData($row)

                var subtotal   = (row.change * row.price) - row.discount
                var total_vat  = subtotal * (row.vat_pct * .01)
                var totalPrice = subtotal + total_vat

                rowSetData($row, {
                    'subtotal'  : subtotal,
                    'total_vat' : total_vat,
                    'totalPrice': totalPrice
                })

                // a value has changed, update sums
                updateSums()
            }

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

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

            /* -------------------------------------------------------------------------------------------------------------------- update Sums -+- */
            function updateSums() {
                var total_vat      = 0
                var total_discount = 0
                var grandTotal     = 0

                // loop all items
                $itemList.find('tr').not('.hidden').each(function () {
                    var row = rowGetData($(this))

                    grandTotal += row.totalPrice
                    total_vat += row.total_vat
                    total_discount += row.discount
                })

                $('#subtotal').text(num.tlFormat(grandTotal - total_vat))
                $('#total-vat').text(num.tlFormat(total_vat))
                $('#total-discount').text(num.tlFormat(total_discount))
                $('#grand-total').text(num.tlFormat(grandTotal))
            }


            /* ------------------------------------------------------------------------------------------------------------------- row Get Data -+- */
            function rowGetData($row) {

                var $changeInput      = $row.find('input.change')
                var $priceInput       = $row.find('input.base_price')
                var $discountInput    = $row.find('input.total_discount')
                var $discountPctInput = $row.find('input.discount-pct')
                var $vatPctInput      = $row.find('input.vat')

                var change       = num.parse($changeInput.val())
                var price        = num.parse($priceInput.val())
                var discount     = num.parse($discountInput.val())
                var discount_pct = num.parse($discountPctInput.val())
                var vat_pct      = num.parse($vatPctInput.val())

                var subtotal   = (change * price) - discount
                var total_vat  = subtotal * (vat_pct * .01)
                var totalPrice = subtotal + total_vat

                return {
                    change      : change,
                    price       : price,
                    discount    : discount,
                    vat_pct     : vat_pct,
                    total_vat   : total_vat,
                    discount_pct: discount_pct,
                    subtotal    : subtotal,
                    totalPrice  : totalPrice
                }
            }

            /* ------------------------------------------------------------------------------------------------------------------- row Set Data -+- */
            function rowSetData($row, data) {
                for (var name in data) {
                    if (!data.hasOwnProperty(name)) continue
                    var value = data[name]

                    switch (name) {
                        case 'subtotal':
                            $row.find('.subtotal').text(num.tlFormat(value))
                            break
                        case 'total_vat':
                            $row.find('.total-vat').text(num.tlFormat(value))
                            break
                        case 'totalPrice':
                            $row.find('.total-price').text(num.tlFormat(value))
                            break
                        case 'discount':
                            $row.find('input.discount').val(value)
                            break
                        case 'discount_pct':
                            $row.find('input.discount-pct').val(value)
                            break
                    }
                }
            }

            updateSums()
        })
    </script>
@endpush