@extends('adminlte::page')

@section('title_postfix', ' - Nova inverturana lista')

@section('content')


    <div class="box">
        <div class="box-header">
            <h3>Nova inverturna lista</h3>
        </div>
        <!-- /.box-header -->
        <div class="box-body">
            <form id="inputForm">
                <div class="col-md-4">
                    {!! BootForm::select('cover_id', 'Maskica', $covers, 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>Šifra</th>
                        <th>Mobitel</th>
                        <th>Maskica</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' => 'stocktaking.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 id="showImage" class="modal fade ownerBox" role="dialog">
        <div class="modal-dialog">

            <!-- Modal content-->
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title">Slika</h4>
                </div>
                <div class="modal-body">
                    <img src="#" id="coverImage">
                </div>
            </div>

        </div>
    </div>

    <div class="template_container" style="display: none">
        <table>
            <tr class="row_template">
                <td class="item_code"></td>
                <td class="item_device"></td>
                <td class="item_cover"></td>
                <td class="item_qty"></td>
                <td>
                    <div class="table-controls">
                        <i class="fa fa-image btn-image"></i>
                        <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 maskicu');
                    return;
                }
                if(isNaN(value)){
                    window.display_msg_box('Količina mora biti broj');
                    return;
                }

                if(items.indexOf(parseInt(cover.val())) === -1) {
                    $.ajax({
                        url: '/api/cover/' + cover.val(),
                        method: 'GET'
                    })
                        .done(function (data) {
                            console.log(qty.val());

                            var template = $('.row_template').clone();
                            template.removeClass('row_template');
                            template.find('.item_code').text(data.code);
                            template.find('.item_device').text(data.device.name);
                            template.find('.item_cover').text(data.name);
                            template.find('.item_qty').text(value);
                            template.find('.btn-image').attr('data-image', data.image_name);
                            template.attr('data-id', data.id);

                            $('.item_container').append(template);
                            cover.select2('open');
                            qty.val('');
                            items.push(data.id);
                            calculate();
                        })
                        .fail(function (data) {
                            if (data.status === 404) {
                                window.display_msg_box('Greška! Nije pronađeno!');
                            } else {
                                console.log(data);
                            }
                        });
                }
                else {
                    window.display_msg_box('Maskica 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();
            });

            body.on('click', '.btn-image', function(e) {
                var image = $(this).attr('data-image');
                $('#coverImage').attr('src', '/storage/covers_thumb/'+image);
                $('#showImage').modal("show");
            });

            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