@section('title', 'Movimentos de Stock')

    @section('content-header', 'Movimentos de Stock')


    @section('breadcrumb')
        <li>Stock</li>
        <li class="active">Movimentos de Stock</li>
    @stop

    @section('content')
        <div class="row">
            <div class="col-xs-12">
                <div class="nav-tabs-custom">
                    <ul class="nav nav-tabs tabs-filter">
                        @foreach($garageShops as $garageShop)
                            <li><a href="#tab-{{ $garageShop->id_garage }}" data-id="{{ $garageShop->id_garage }}" data-toggle="tab">{{ $garageShop->name }}</a></li>
                        @endforeach
                    </ul>
                    <div class="tab-content">
                        <div class="tab-pane active" id="tab-all">
        <div class="box no-border">
            <div class="box-body">
                <ul class="datatable-filters list-inline pull-left" data-target="#datatable">
                    <button type="button" class="btn btn-primary btn-sm" id="exportMovements">
                        <i class="fas fa-download"></i> Exportar
                    </button>
                    <button type="button" class="btn btn-filter-datatable btn-default">
                        <i class="fas fa-filter"></i> Filtrar <i class="fas fa-angle-down"></i>
                    </button>
                </ul>
            </div>
            <div class="datatable-filters-extended m-t-5 hide {{ Request::has('filter') ? 'active' : null }}" data-target="#stockMovements-table">
                <ul class="list-inline pull-left">
                    <li style="margin-bottom: 5px;" class="col-xs-6">
                        <strong>Direção</strong><br/>
                        <div class="w-100px">
                            {{ Form::select('direction', ['' => 'Ambas', 'O' => 'Saída', 'I' => 'Entrada'], Request::has('direction') ? Request::get('direction') : null, ['class' => 'form-control input-sm filter-datatable select2']) }}
                        </div>
                    </li>
                </ul>
            </div>
            <div class="datatable-filters-extended m-t-5 hide {{ Request::has('filter') ? 'active' : null }}" data-target="#stockMovements-table">
                <ul class="list-inline pull-left">
                    <li style="margin-bottom: 5px;" class="col-xs-6">
                        <strong>Localização</strong><br/>
                        <div class="w-100px">
                            {{ Form::select('garageShop', ['' => 'Todas'] + $garageShops->pluck('name', 'id_garage')->toArray(), Request::has('garageShop') ? Request::get('garageShop') : null, ['class' => 'form-control input-sm filter-datatable select2']) }}
                        </div>
                    </li>
                </ul>
            </div>
        <div class="container">
            <div class="table-responsive">
                <table id="stockMovements-table" class="table table-striped">
                    <thead>
                    <tr>
                        <th class="header panel-blue">Data</th>
                        <th class="header panel-blue">Peça</th>
                        <th class="header panel-blue">Quantidade</th>
                        <th class="header panel-blue">Localização</th>
                        <th class="header panel-blue">Direção</th>
                        <th class="header panel-blue">Ações</th>
                    </tr>
                    </thead>
                    <tbody>
                    </tbody>
                </table>
            </div>
        </div>
        </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    @endsection

    @section('scripts')
        <script>
            $(document).ready(function() {
                var movementsTable = $('#stockMovements-table').DataTable({
                    processing: true,
                    serverSide: true,
                    ajax: {
                        url: "{{ route('admin.stockMovements.datatable') }}",
                        data: function (d) {
                            d.direction = $('select[name=direction]').val();
                            d.garageShop = $('select[name=garageShop]').val();
                        }
                    },
                    columns: [
                        { data: 'from_line.from_document.start_date', name: 'from_line.from_document.start_date', searchable:true, orderable:true },
                        { data: 'from_line.for_part.name', name: 'from_line.for_part.name', searchable:true, orderable:true },
                        { data: 'from_line.amount', name: 'from_line.amount', searchable:false, orderable:true },
                        { data: 'from_garage.name', name: 'from_garage.name', searchable:true, orderable:true },
                        { data: 'direction', name: 'direction', searchable:false, orderable:true },
                        { data: 'actions', name: 'actions', searchable:false, orderable:false },
                    ],
                    order: [
                        [0, 'desc']
                    ]
                });
                $('.tabs-filter a').on('click', function(e) {
                    e.preventDefault();
                    var garageShopId = $(this).data('id');

                    if (garageShopId == 'all') {
                        $('select[name=garageShop]').val('').trigger('change');
                    } else {
                        $('select[name=garageShop]').val(garageShopId).trigger('change');
                    }
                });
                $('.filter-datatable').on('change', function (e) {
                    movementsTable.draw();
                    e.preventDefault();
                });
                $('#exportMovements').click(function() {
                    window.location.href = "{{ route('admin.stockMovements.export') }}";
                });
            });
        </script>
    @endsection