@extends('layouts.main_without_top_button')
@section('title')
    Buss
@stop
@section('navigation')
    <ul class="breadcrumb">
        <li><a href="">Dashboard</a> <span class="divider">/</span></li>
        <li class="active">Buss</li>
    </ul>
@stop

@section('contentinner')
    <style>
        .td_left_border {
            border-top: 1px solid #dddddd;
            border-left: 1px solid #dddddd;
            border-bottom: 0;
        }

        .td_border_right {
            border-right: 1px solid #dddddd;
        }

        .widgettitle {
            color: #000000;
        }
    </style>
    <div class="tabbable">
{{--        @include('generals.crm.includes.crm_tab')--}}
        <div class="tab-content">
            <div id="glyphs" class="tab-pane active">
                <div class="msghead" style="margin-bottom: 4px;margin-top: -20px;">
                    <ul class="msghead_menu">
                        <li class="right btn-group">
                            <div class="btn-group">
                                <button onclick="create('{{ route('busses.create') }}')" class="btn">
                                    <i class="icon-th"></i> &nbsp;New Buss
                                </button>
                            </div><!--btn-group-->
                        </li>
                    </ul>
                    <span class="clearall"></span>
                </div><!--msghead-->
                <table style="width: 100%; table-layout: fixed" class="table table-bordered table-striped table-condensed" id="busses_data_table" >
                    <thead>
                    <tr>
                        <th style="width: 5%">Id</th>
                        <th style="width: 40%">Reg Number</th>
                        <th style="width: 10%">class</th>
                        <th style="width: 10%">Seat Count</th>
                        <th style="width: 10%">Make</th>
                        <th style="width: 10%">Model</th>
                        <th style="width: 10%"></th>
                    </tr>
                    </thead>
                    <tbody>

                    </tbody>
                </table>
            </div>
        </div><!--tabcontent-->
    </div>



    <script>
        var oTable = jQuery('#busses_data_table').on('error.dt', function (e, settings, techNote, message) {
            console.log('An error has been reported by DataTables: ', message);
            $.jGrowl("ERROR LOADING DATA!", {header: 'Important'});
            stopSpinner();
        })
            .DataTable({
                "lengthMenu": [100, 200, 300],
                "pageLength": 100,
                "oLanguage": {
                    "sLoadingRecords": startSpinner(),
                    "sZeroRecords": "No records to display.",
                    "sProcessing": "Please wait - loading records...",
                    "sInfoEmpty": "No entries to display."
                },
                "initComplete": function (settings, json) {
                    stopSpinner();
                },
                ajax: {
                    url: '{{ route("busses.datatables") }}',
                    data: function (d) {}
                },
                scrollCollapse: true,
                "sPaginationType": "full_numbers",
                processing: true,
                serverSide: true,
                "order":[[0,'asc']],
                "columns": [
                    {"orderable": true},
                    {"orderable": true},
                    {"orderable": true},
                    {"orderable": true},
                    {"orderable": true},
                    {"orderable": true},
                    {"orderable": true}
                ],
                "bStateSave": true
            });

        $('#busses_data_table_wrapper').attr('style','margin-top: 1.3% !important').trigger('change');


    </script>
@stop