@extends('layouts.main_without_top_button', ['title'=>config('app.name') . ' | OTHER INCIDENTS'])
@section('title', 'OTHER INCIDENTS')
@section('navigation')
    <ul class="breadcrumb">
        <li><a href="{{route('home')}}">Dashboard</a> <span class="divider">/</span></li>
        <li><a href=""> </a> <span class="divider">/</span></li>
        <li class="active">OTHER INCIDENTS</li>
    </ul>
@stop

@section('contentinner')
    <div class="tabbable">
        @include('HSE.incidents.includes.tabs')
        <div class="tab-content">
            <div class="tab-pane active">
                <div class="row-fluid" style="margin-bottom: 8px;">
                    <div class="span12  profile-left">
                        <div class="mediamgr_category">
                            <ul>
                                <li class="current" style="padding-left: 30px;"><a >Other Incidents List</a></li>

                                <li class="pull-right">
                                    <button class="btn" style="margin-right: 2px" onclick="create('{!! route('hse.other-incidents.create') !!}')"><span
                                                class="iconsweets-create"></span>New Other Incident
                                    </button>
                                </li>
                            </ul>
                        </div>
                        <div class="span12">
                            <table class="table table-bordered table-condensed" id="other_incident_table">
                                <thead>
                                <tr>
                                    <th class="head1" style="width: 05%">Sn</th>
                                    <th class="head1"style="width: 10%">Date</th>
                                    <th class="head1"style="width: 15%">Driver</th>
                                    <th class="head1"style="width: 10%">Vehicle</th>
                                    <th class="head1"style="width: 10%">Trailer</th>
                                    <th class="head1"style="width: 15%">Location</th>
                                    <th class="head1"style="width: 30%">Description</th>
                                    <th style="width: 05%"></th>
                                </tr>
                                </thead>
                            </table>
                        </div><!--span12-->
                    </div><!--span6-->
                </div><!--row-fluid-->
            </div><!--tab-pane-->
        </div><!--tabcontent-->
    </div><!--tabbable-->


    <script>
        var oTable = jQuery('#other_incident_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({
                "oLanguage": {
                    "sLoadingRecords": startSpinner(),
                    "sZeroRecords": "No other incident records to display.",
                    "sProcessing": "Please wait - loading records...",
                    "sInfoEmpty": "No entries to display."
                },
                "initComplete": function (settings, json) {
                    stopSpinner();
                },
                ajax: {
                    url: '{{ route("hse.other-incidents.datatable") }}',
                    data: function (d) {}
                },
                scrollCollapse: true,
                "sPaginationType": "full_numbers",
                processing: true,
                serverSide: true,
                "order":[[0,'asc']],
                "columns": [
                    {"class": "link", data: 'id'},
                    {"class": "link", data: 'date'},
                    {"class": "link", data: 'driver'},
                    {"class": "link", data: 'vehicle'},
                    {"class": "link", data: 'trailer'},
                    {"class": "link", data: 'location'},
                    {"class": "link", data: 'description'},
                    {"class": "link", data: 'action'}
                ],
                "bStateSave": true
            });


    </script>
@endsection