@extends('admin._layouts.master')

@section('css')

    {!! HTML::style('/assets/common/bootstrap-datetimepicker/bootstrap-datetimepicker.min.css') !!}

@endsection

@section('content')

    {!! Form::model($transaction, array('url' => $action, 'method' => $method)) !!}
    <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' => transUc('models.stock_transaction.model_name')
                     ])</h3>
                </div>
                <div class="box-body">
                    {!! FormGroup::select('stock_item_id', transUc('models.generic.stock_item'), $items, $transaction->stock_item_id, ['class' => 'form-control',  ($transaction->exists ? 'disabled' : null)]) !!}

                    <div class="form-group">
                        <label>@transUc('models.stock_item.quantity')</label>
                        <div class='input-group'>
                            {!! Form::number('current_quantity', null, ['class' => 'form-control', 'disabled']) !!}
                            <span class="input-group-addon uom">
                                <i class="fa fa-circle-o-notch fa-spin loading {{ $transaction->transUom ? 'hidden' : '' }}"></i>
                                <span class="text">{{ $transaction->transUom }}</span>
                            </span>
                        </div>
                    </div>

                    <div class="form-group">
                        <label>@transUc('models.stock_transaction.model_name')</label>
                        <div class='input-group date' id='transaction-amount'>
                            <span class="input-group-addon">
                                <small data-toggle="tooltip" title="Stok miktarında olacak değişiklik">@transUc('models.stock_transaction.change')
                                    :</small>
                            </span>
                            {!! Form::number('change', $transaction->change, ['class' => 'form-control non-submitable', 'step' => '0.01']) !!}
                            <span class="input-group-addon">
                                <small>@transUc('models.stock_transaction.new_quantity') : </small>
                            </span>
                            {!! Form::number('new_quantity', $transaction->new_quantity, ['class' => 'form-control non-submitable', 'step' => '0.01']) !!}
                            <span class="input-group-addon uom">
                                <i class="fa fa-circle-o-notch fa-spin loading {{ $transaction->transUom ? 'hidden' : '' }}"></i>
                                <span class="text">{{ $transaction->transUom }}</span>
                            </span>
                        </div>
                    </div>

                    <div class="form-group">
                        <label>@transUc('models.stock_transaction.conducted_at')</label>
                        <div class='input-group date' id='conducted_at'>
                            <span class="input-group-addon">
                                <span class="fa fa-calendar"></span>
                            </span>
                            <input type="text" name="conducted_at" class="form-control">
                        </div>
                    </div>

                    {!! FormGroup::textarea('notes', transUc('models.generic.notes'), null, ['class' => 'form-control monospace']) !!}
                </div>
            </div>
        </div>
        <div class="col-md-12">
            <div class="box box-primary">
                <div class="box-body">
                    @include('admin._partials.form-submit')
                </div>
            </div>
        </div>
    </div>
    {!! Form::close() !!}

@endsection

@push('scripts')

    {!! HTML::script('/assets/common/bootstrap-datetimepicker/moment-with-locales.min.js') !!}
    {!! HTML::script('/assets/common/bootstrap-datetimepicker/bootstrap-datetimepicker.min.js') !!}

    <script>
        $(function () {
            $stockItemInput = $('#stock_item_id')


            $stockItemInput.select2({
                tags: false
            })

            $('#conducted_at').datetimepicker({
                locale     : moment.locale(window.userLocale),
                format     : 'DD.MM.YYYY HH:mm',
                sideBySide : true,
                defaultDate: '{{ $transaction->conducted_at ?: Carbon\Carbon::now() }}',
            })

            /*
             * Mechanics between 'stock_item' select input, 'change' and 'new_quantity'.
             * > When selected stock item changed;
             *      - Update uom display to match newly selected stock item
             *          + make an ajax request to get new stock item's uom (Unit of Measure).
             *          + Show loading during the ajax request.
             *      - set 'change' and 'new_quantity' input values to 0.
             */

            var $uom        = $('.uom')
            var $uomLoading = $uom.find('.loading')
            var $uomText    = $uom.find('.text')

            var $changeInput          = $('input[name="change"]')
            var $newQuantityInput     = $('input[name="new_quantity"]')
            var $currentQuantityInput = $('input[name="current_quantity"]')

            // listen for changes in stock_item select input
            $stockItemInput.change(function () {
                updateStockItemInfo()
            })

            // update various fields of form to match newly selected stock_item
            function updateStockItemInfo() {
                // get the id of newly selected stock_item
                var value = $stockItemInput.val()

                // remove currently displayed uom text and show loading
                $uomLoading.removeClass('hidden')
                $uomText.text('')
                // disable inputs
                $changeInput.attr('disabled', 1)
                $currentQuantityInput.attr('disabled', 1)
                $newQuantityInput.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
                    $currentQuantityInput.val(data.quantity)
                    $changeInput.val(0).removeAttr('disabled')
                    $newQuantityInput.val(data.quantity).removeAttr('disabled')

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

            // bound 'change' and 'new_quantity' inputs
            $changeInput.on('input', function () {
                $newQuantityInput.val(num.sum($currentQuantityInput.val(), $changeInput.val()).mtFixed(3)).glow()
            })
            $newQuantityInput.on('input', function () {
                $changeInput.val(num.sub($newQuantityInput.val(), $currentQuantityInput.val()).mtFixed(3)).glow()
            })

            // initially update the form
            updateStockItemInfo()
        })

    </script>

@endpush