@section('title')
    Consulta de Stock
@stop

@section('content-header')
    Consulta de Stock
@stop

@section('breadcrumb')
    <li class="active">Consulta 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="exportStock">
                        <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 hidden m-t-5 hide {{ Request::has('filter') ? 'active' : null }}" data-target="#stock-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="stock-table" class="table table-striped">
                        <thead>
                        <tr>
                            <th class="header panel-blue">Peça</th>
                            <th class="header panel-blue">Modelo</th>
                            <th class="header panel-blue">Referência</th>
{{--                            <th class="header panel-blue">Localização</th>--}}
{{--                            <th class="header panel-blue">Morada</th>--}}
                            <th class="header panel-blue">Quantidade</th>
                        </tr>
                        </thead>
                        <tbody>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection
        @section('scripts')
            <script>
                $(document).ready(function() {
                    var stockTable = $('#stock-table').DataTable({
                        processing: true,
                        serverSide: true,
                        ajax: {
                            url: "{{ route('admin.stock.datatable') }}",
                            data: function (d) {
                                d.garageShop = $('select[name=garageShop]').val();
                                d.search = $('input[type=search]').val();
                            }
                        },
                        columns: [
                            { data: 'Peça', name: 'partmodels.family.name', searchable: true, orderable: false },
                            { data: 'modelo', name: 'partmodels.name', searchable: true, orderable: false },
                            { data: 'Referência', name: 'partmodels.reference', searchable: true, orderable: false },
                            // { data: 'localizacao', name: 'garageshops.name', searchable: true, orderable: false },
                            // { data: 'morada', name: 'garageshops.address', searchable: true, orderable: false },
                            { data: 'quantidade', name: 'quantidade', searchable: true, orderable: true },
                        ],
                        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');
                        }
                    });
                    // Handle search input changes
                    $('#stock-table_filter input').on('keyup', function() {
                        stockTable.search($(this).val()).draw();
                    });

                    $('.filter-datatable').on('change', function (e) {
                        stockTable.draw();
                        e.preventDefault();
                    });

                    $('#exportStock').click(function() {
                        window.location.href = "{{ route('admin.stock.export') }}";
                    });
                });

            </script>
@endsection