@extends('layouts.app')
@section('content')
<script type="text/javascript">
    $(document).ready(function(){
        $('#tool_type').val(0);
        $('#tool_type').change(function(){
            $('#tool').empty();
            if($(this).val() != ''){
                var route = $(this).attr('route');
                var id = $(this).val();
                var dependent = $(this).data('dependent');
                var _token = $('input[name="_token"]').val();
                $.ajax({
                    type	:	"POST",
                    cache	: 	false,
                    url		:	route,
                    data    :   {
                        "_token" : _token,
                        'id'  : id,
                        'dependent' : dependent
                    },
                    success	: function(result){
                        $('#'+dependent).html(result);
                    }

                });
            }
        });

        $('.btn-tool').click(function(){
            var route = $(this).attr('route');
            var _token = $('input[name="_token"]').val();
            var toolId = $('#tool').val();
            var quantity = $('#quantity').val();
            var operation = $(this).data('operation');
            $.ajax({
                type	:	"POST",
                cache	: 	false,
                url		:	route,
                data    :   {
                    'toolId' : toolId,
                    'quantity' : quantity,
                    'storageId' : '{{$storage->id}}',
                    '_token' : _token,
                    'param' : 'storage',
                    'operation' : operation
                },
                success	: function(result){
                    alert(result);
                    document.location.reload();
                }
            });
        });
        $('#btn_enable_log_search').click(function(){
            $('#log_search').fadeIn(1000);
        });

        $('#btn_disable_log_search').click(function(){
            $('#log_search').fadeOut(1000);
        });
    });
</script>

<section class="panel">
    <header class="panel-heading">
        <div class="panel-actions">
            <a href="{{route('tool_logs', ['storage_id' => $storage->id])}}"><button type="button" class="btn btn-info">{{__('History')}} <i class="fa fa-history"></i></button></a>
        </div>
        <h2 class="panel-title">{{__("Inventory")}} ({{$storage->naziv}})</h2>
    </header>
    @csrf
    <div class="panel-body">
        <div class='form-group'>
            <label class="col-sm-1 control-label">{{__('Type')}} </label>
            <div class="col-sm-3">
                <select class="form-control populate dynamic" data-plugin-selectTwo name="tool_type" id="tool_type"
                        route="{{route('tool_populate')}}" data-dependent="tool">
                    <option value="0">-- {{__('Type')}} --</option>
                    @foreach($toolTypes as $type)
                        <option value="{{$type->id}}">{{$type->type}}</option>
                    @endforeach
                </select>
            </div>
            <label class="col-sm-1 control-label">{{__('Tools')}} </label>
            <div class="col-sm-3">
                <select class="form-control populate" data-plugin-selectTwo name="tool" id="tool">
                    <option value="">-- {{__('Tools')}} --</option>
                </select>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-1 control-label">{{__('Quantity')}}</label>
            <div class="col-sm-2">
                <input type="text" class="form-control" name="quantity" id="quantity">
            </div>
            <div class="col-sm-2 btn-group">
                <button type="button" class="btn btn-sm btn-success btn-tool" route="{{route('fill_tool_storage')}}"
                        data-toggle="tooltip" data-placement="top" data-operation="plus"
                        data-original-title="{{__('Add')}}">
                    <i class="fa fa-plus"></i>
                </button>
                <button type="button" class="btn btn-sm btn-danger btn-tool" route="{{route('fill_tool_storage')}}"
                        data-toggle="tooltip" data-placement="top" data-operation="minus"
                        data-original-title="{{__('Remove')}}">
                    <i class="fa fa-minus"></i>
                </button>
            </div>
        </div>
    </div>
</section>

@if(!$tools->isEmpty())
    <section class="panel">
        <header class="panel-heading">
            <h2 class="panel-title">{{__('Inventory')}}</h2>
        </header>
        <div class="panel-body">
            <div class="table-mobile">
                <table class="table table-bordered table-striped mb-none" id="datatable-default">
                    <thead>
                    <tr>
                        <th>{{__('Type')}}</th>
                        <th>{{__('Tools')}}</th>
                        <th>{{__('Provider')}}</th>
                        <th>{{__('Invoice number')}}</th>
                        <th>{{__('Quantity')}}</th>
                    </tr>
                    </thead>
                    <tbody>
                    @foreach($tools as $tool)
                        <tr class="gradeX">
                            <td>{{$tool->type}}</td>
                            <td>{{$tool->tool}}</td>
                            <td>{{$tool->provider}}</td>
                            <td>{{$tool->invoice_number}}</td>
                            <td>{{$tool->quantity}}</td>
                        </tr>
                    @endforeach
                    </tbody>
                </table>
            </div>
        </div>
    </section>
@endif

@endsection