@extends('layouts.main')
@section('title')
    Vendors
@stop
@section('navigation')
    <ul class="breadcrumb">
        <li><a href="{{route('home')}}">Dashboard</a> <span class="divider">/</span></li>
        <li class="active">Vendors</li>
    </ul>
@stop
@section('msghead_menu')
    <li class="right btn-group">
        <a class="btn" onclick=createOld("{{ route('vendors.create') }}")>
            <span class="iconsweets-create"></span> NEW VENDOR
        </a>
    </li>
@stop
@section('contentinner')
    <div class="tab-content">
        <div class="tab-pane active">
            <div class="row-fluid">
                <div class="span12">

                    <table class="table table-bordered" id="vendors-list">
                        <thead>
                            <tr>
                                <th class="head0 nosort" width="4%">S/N</th>
                                <th class="head0" width="20%">Company name</th>
                                <th class="head0" width="20%">Category</th>
                                <th class="head1">Phone Number</th>
                                <th class="head0">Address</th>
                                <th class="head1" width="20%">Email</th>
                                <th class="head0" width="8%">Action</th>
                            </tr>
                        </thead>
                    </table>
                </div><!--span12-->
            </div><!--row-fluid-->
        </div><!--row-fluid-->
    </div><!--row-fluid-->

    <script type="text/javascript">
        let mainDataTable = jQuery('#vendors-list').DataTable({
            "oLanguage": {
                "sLoadingRecords":startSpinner(),
                "sZeroRecords": "No vendors records to display.",
                "sProcessing": "Please wait - loading records...",
                "sInfoEmpty": "No entries to display."
            },
            "initComplete": function (settings, json) {
                stopSpinner();
            },
            ajax: {
                url: '{{route('vendors.data-table.index')}}',
                data: function (d) {
                    d.route_id = jQuery('#name').val();
                },
                error: function (xhr, textStatus, error) {
                    onAjaxError(xhr, textStatus, error);

                    mainDataTable.fnProcessingIndicator(false);
                }
            },
            scrollCollapse: true,
            "sPaginationType": "full_numbers",
            processing: true,
            serverSide: true,
            "columns": [
                {data: 'checkbox', 'orderable':false},
                {"class": "link", data: 'name'},
                {"class": "link", data: 'categories'},
                {"class": "link", data: 'phone_number'},
                {"class": "link", data: 'address'},
                {"class": "link", data: 'email'},
                {
                    "class": "link", data: 'action', 'orderable':false, 'searchable':false
                }
            ],
            "fnRowCallback": function( nRow, aData, iDisplayIndex, iDisplayIndexFull ) {
                var index = iDisplayIndex +1;
                $('td:eq(0)',nRow).html(index);
                return nRow;
            },
            "bStateSave": true
        });
        function pageInitiation() {}
        function incrementRow(elem) {
            var data;
            data = $('#data').clone();
//            data.find('select').addClass('searchable_select');
            jQuery('.select2s').select2();
            var table = elem.parents('table');
            var tbody = table.find('tbody');
            tbody.prepend(data);
//            onModalShown();
            $('.no-data-found').fadeOut();
        }
        function decrementRow(elem) {
            var tr = elem.parents('tr');
            tr.fadeOut(function() {
                tr.remove();
            });
        }
    </script>
@stop