@section('title')
        Fornecedores
    @stop

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

    @section('breadcrumb')
        <li><a href="{{ route('admin.purchases.index') }}">Compras</a></li>
        <li class="active">Fornecedores</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="openSuppliersModal">
                            <i class="fas fa-plus"></i> Novo Fornecedor
                        </button>
                    </li>
                    <button type="button" class="btn btn-primary btn-sm" id="exportSuppliers">
                        <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="#suppliers-table">
                    <ul class="list-inline pull-left">
                        <li style="margin-bottom: 5px;" class="col-xs-6">
                            <strong>Cidade</strong><br/>
                            <div class="w-100px">
                                {{ Form::select('city', ['' => 'Todas'] + $cities->pluck('name', 'name')->toArray(), Request::has('city') ? Request::get('city') : null, ['class' => 'form-control input-sm filter-datatable select2']) }}
                            </div>
                        </li>
                    </ul>
                </div>
        <div class="container">
            <div class="table-responsive">
            <table id="suppliers-table" class="table table-striped">
                <thead>
                <tr>
                    <th class="header panel-blue w-15">Nome</th>
                    <th class="header panel-blue w-5">NIF</th>
                    <th class="header panel-blue w-15">Morada</th>
                    <th class="header panel-blue w-15">Código-Postal</th>
                    <th class="header panel-blue w-5">Cidade</th>
                    <th class="header panel-blue">Telefone</th>
                    <th class="header panel-blue w-5">Email</th>
                    <th class="header panel-blue w-15">Detalhes</th>
                    <th class="header panel-blue w-3">Ações</th>
                </tr>
                </thead>
                <tbody>
                </tbody>
            </table>
        </div>
        </div>
        </div>
        <div class="modal fade" id="suppliersModal" tabindex="-1" role="dialog" aria-labelledby="suppliersModalLabel" aria-hidden="true">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="suppliersModalLabel">Novo Fornecedor</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="suppliersModalBody">
                    </div>
                </div>
            </div>
        </div>
    @endsection

    @section('scripts')
        <script>
            $(document).ready(function() {
                function openEditModal() {
                    var id_supplier = $(this).data('id');
                    $.get("{{ url('admin/suppliers') }}/" + id_supplier + "/edit", function(data) {
                        $('#suppliersModalBody').html(data);
                        $('#suppliersModalLabel').text('Editar Fornecedor');
                        $('#suppliersModal').modal('show');
                    });
                }
                $(document).on('click', '.openEditModal', openEditModal);
                var suppliersTable = $('#suppliers-table').DataTable({
                    processing: true,
                    serverSide: true,
                    ajax: {
                        url: "{{ route('admin.suppliers.datatable') }}",
                        data: function (d) {
                            d.city = $('select[name=city]').val();
                            d.search = $('input[type=search]').val();
                        }
                    },
                    columns: [
                        { data: 'name', name: 'name', searchable: true, orderable: true },
                        { data: 'vat', name: 'vat', searchable: true, orderable: true },
                        { data: 'address', name: 'address', searchable: true, orderable: true },
                        { data: 'zipcode', name: 'zipcode', searchable: true, orderable: true },
                        { data: 'city', name: 'city', searchable: true, orderable: true },
                        { data: 'phone', name: 'phone', searchable: true, orderable: false },
                        { data: 'email', name: 'email', searchable: true, orderable: false },
                        { data: 'details', name: 'details', orderable: false, searchable: false },
                        { data: 'actions', name: 'actions', orderable: false, searchable: false },
                    ],
                });

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

                $('#openSuppliersModal').click(function() {
                    $.get("{{ route('admin.suppliers.create') }}", function(data) {
                        $('#suppliersModalBody').html(data);
                        $('#suppliersModal').modal('show');
                    });
                });

                $('#exportSuppliers').click(function() {
                    window.location.href = "{{ route('admin.suppliers.export') }}";
                });
            });
        </script>
    @endsection