@extends('adminlte::page')

@section('title_postfix', ' - Nova primka')

@section('content')


    <div class="box">
        <div class="box-header">
            <h3>Nova primka</h3>
        </div>
        <!-- /.box-header -->
        <div class="box-body">
            <form id="inputForm">
                <div class="col-md-4">
                    {!! BootForm::select('cover_id', 'Proizvodi', $products, null, ['placeholder' => '', 'class' => 'select2', 'id' => 'cover_id', 'tabindex' => '0']) !!}
                </div>

                <div class="col-md-2">
                    {!! BootForm::text('qty', 'Količina', null, ['id' => 'qty', 'tabindex' => '1', 'autocomplete' => 'off']) !!}
                </div>

                <div class="col-md-2" style="padding-top: 25px;">
                    {!! BootForm::submit('Dodaj', ['tabindex' => '2']) !!}
                </div>

            </form>

           <div class="col-md-12">
               <table class="table table-responsive">
                   <thead>
                   <tr>
                       <th>Naziv</th>
                       <th>Količina</th>
                       <th></th>
                   </tr>
                   </thead>
                   <tbody class="item_container">

                   </tbody>
               </table>
           </div>

        </div>
        <div class="box-footer">
            {!! BootForm::vertical([
                  'model' => $formModel,
                  'store' => 'ecommerce.admittance.store',
                  'id' => 'mainForm',
              ]) !!}


            {!! BootForm::hidden('items', null, ['id' => 'items']) !!}

            <div class="col-md-12 col-sm-12 col-xs-12 text-right">
                {!! BootForm::submit( trans('common.submit'), array('class' => 'btn btn-primary')) !!}
            </div>
            {!! BootForm::close() !!}
        </div>
    </div>


    <div class="template_container" style="display: none">
        <table>
        <tr class="row_template">
            <td class="item_title"></td>
            <td class="item_qty"></td>
            <td>
                <div class="table-controls">
                    <i class="fa fa-close btn-remove"></i>
                </div>
            </td>
        </tr>
        </table>
    </div>



@stop

@section('css')
    <style>
        .modal-body{
            text-align: center;
        }
        .modal-body img{
            max-width: 100%;
        }
    </style>

@stop

@section('js')
    <script>
        $(document).ready(function() {

            $('.select2').select2();

            var items = [];
            var body = $("body");
            body.on('submit', '#inputForm', function (e) {
                e.preventDefault();

                var cover = $('#cover_id');
                var qty = $('#qty');
                var value = parseInt(qty.val());

                console.log('number', parseInt(qty.val()));
                if(cover.val().length === 0){
                    window.display_msg_box('Odaberite proizvod');
                    return;
                }
                if(isNaN(value)){
                    window.display_msg_box('Količina mora biti broj');
                    return;
                }

                if(items.indexOf(parseInt(cover.val())) === -1) {
                    var template = $('.row_template').clone();
                    template.removeClass('row_template');
                    template.find('.item_title').text(cover.find('option:selected').text());
                    template.find('.item_qty').text(value);
                    template.attr('data-id', cover.val());

                    $('.item_container').append(template);
                    cover.select2('open');
                    qty.val('');
                    items.push(data.id);
                    calculate();
                }
                else {
                    window.display_msg_box('Proizvod već postoji na popisu');
                }
            });

            body.on('click', '.item_container .btn-remove', function () {
                var id = $(this).closest('tr').attr('data-id');
                $(this).closest('tr').remove();

                items = jQuery.grep(items, function(value) {
                    return value !== parseInt(id);
                });
                calculate();
            });

            body.on('select2:select', '.select2', function () {
                $('#qty').focus();
            });



            function calculate() {
                var items = [];
                var data;
                $.each($('.item_container tr'), function () {
                    data = {
                        'id' : $(this).attr('data-id'),
                        'qty' : $(this).find('.item_qty').text()
                    };
                    items.push(data);
                });

                $('#items').val(JSON.stringify(items));
            }
        })
    </script>
@stop