@section('title')
        Compras
    @stop

    @section('content-header')
        Compras
    @stop

    @section('breadcrumb')
        <li class="active">Compras</li>
    @stop

    @section('content')
            <div class="box no-border">
                <div class="box-body">
                    <ul class="datatable-filters list-inline pull-left" data-target="#datatable">
                        <li>
                            <button type="button" class="btn btn-success btn-sm" id="openPurchasesModal">
                                <i class="fas fa-plus"></i> Registar Compra
                            </button>
                        </li>
                        <button type="button" class="btn btn-primary btn-sm" id="exportPurchases">
                            <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="container">
                    <div class="datatable-filters-extended m-t-5 hide {{ Request::has('filter') ? 'active' : null }}" data-target="#vehicles-table">
                        <ul class="list-inline pull-left">
                            <li style="margin-bottom: 5px;" class="col-xs-6">
                                <strong>Fornecedor</strong><br/>
                                <div class="w-100px">
                                    {{ Form::select('supplier', ['' => 'Todas'] + $suppliers->pluck('name', 'id_supplier')->toArray(), Request::has('supplier') ? Request::get('supplier') : 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="#vehicles-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>
        <div class="container">
            <table id="purchases-table" class="table table-striped">
                <thead>
                <tr>
                    <th class="header panel-blue">Nº</th>
                    <th class="header panel-blue">Nº de Documento</th>
                    <th class="header panel-blue">Localização</th>
                    <th class="header panel-blue">Data</th>
                    <th class="header panel-blue">Fornecedor</th>
                    <th class="header panel-blue">Montante</th>
                    <th class="header panel-blue">Ações</th>
                </tr>
                </thead>
                <tbody>
                </tbody>
            </table>
        </div>
        </div>
            <div class="modal fade" id="purchasesModal" tabindex="-1" role="dialog" aria-labelledby="purchasesModalLabel" aria-hidden="true">
                <div class="modal-dialog modal-xl" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="purchasesModalLabel">Registar Compra</h5>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">X</span>
                            </button>
                        </div>
                        <div class="modal-body" id="purchasesModalBody">
                        </div>
                    </div>
                </div>
            </div>
    @endsection

    @section('scripts')
        <script>
            $(document).ready(function() {
                var purchasesTable = $('#purchases-table').DataTable({
                    processing: true,
                    serverSide: true,
                    ajax: {
                        url: "{{ route('admin.purchases.datatable') }}",
                        data: function (d) {
                            d.supplier = $('select[name=supplier]').val();
                            d.garageShop = $('select[name=garageShop]').val();
                            d.search = $('input[type=search]').val();
                        }
                    },
                    columns: [
                        { data: 'id_purchase', name: 'id_purchase', searchable: true },
                        { data: 'is_document.document', name: 'is_document.document', searchable: true, orderable: false },
                        { data: 'garage_shop_name', name: 'garage_shop_name', searchable: true, orderable: false},
                        { data: 'is_document.start_date', name: 'is_document.start_date', searchable: true, orderable: false },
                        { data: 'has_supplier.name', name: 'has_supplier.name', searchable: true, orderable: false },
                        { data: 'is_document.total', name: 'is_document.total', searchable: true, orderable: false,
                            render: function(data, type, row) {
                                if (data === null || data === undefined || isNaN(data)) {
                                    return '';
                                }
                                return Number(data).toFixed(2) + ' €';
                            }},
                        { data: 'actions', name: 'actions', searchable: false, orderable: false },
                    ],
                    order: [
                        [0, 'desc']
                    ]
                });

                $('.filter-datatable').on('change', function (e) {
                    purchasesTable.draw();
                    e.preventDefault();
                });
                $('#openPurchasesModal').click(function() {
                    $.get("{{ route('admin.purchases.create') }}", function(data) {
                        $('#purchasesModalBody').html(data);
                        $('#purchasesModal').modal('show');
                    });
            });
                $('#exportPurchases').click(function() {
                    window.location.href = "{{ route('admin.purchases.export') }}";
                });
            });
        </script>
    @endsection